Skip to main content

HTML and CSS Basics

Introduction​

Welcome to the world of web development! As a computer science student, understanding HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) is crucial for building websites and web applications. In this guide, we'll explore the fundamentals of both languages, providing you with the knowledge needed to create visually appealing and functional web pages.

What is HTML?​

HTML is the backbone of every website. It defines the structure and content of web pages using a series of elements and tags. These elements tell browsers how to display content and what kind of content to expect.

Basic HTML Structure​

A typical HTML document starts with the <!DOCTYPE html> declaration followed by the <html> tag, which contains two main sections: <head> and <body>.

Example of Basic HTML Structure:​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic HTML Page</title>
</head>
<body>
    <h1>Welcome to Web Development!</h1>
    <p>This is a basic example of an HTML document.</p>
</body>
</html>

Key HTML Tags​

  • <h1> to <h6>: Header tags, used for defining headings.
  • <p>: Paragraph tag, used to define blocks of text.
  • <a>: Anchor tag, used to create hyperlinks.
  • <img>: Image tag, used to embed images.
  • <ul> and <ol>: Unordered and ordered lists, used for lists of items.
  • <div> and <span>: Generic container tags for grouping content and applying styles.

What is CSS?​

CSS (Cascading Style Sheets) is used to control the presentation, layout, and visual design of web pages. CSS allows you to apply styles to HTML elements, enhancing the visual appearance of a website.

Basic CSS Syntax​

CSS consists of selectors and declarations. A selector identifies which HTML element(s) to style, and the declaration contains the style properties and values.

Example of Basic CSS Syntax:​

/* This is a comment in CSS */
h1 {
    color: blue;           /* Sets the text color to blue */
    font-size: 24px;       /* Sets the font size to 24 pixels */
}
p {
    color: gray;
    line-height: 1.5;      /* Sets the line spacing */
}

CSS Selectors​

  • Element Selector: Targets HTML elements directly, e.g., h1, p.
  • Class Selector: Targets elements with a specific class, e.g., .container.
  • ID Selector: Targets an element with a specific ID, e.g., #header.

Example of Applying CSS to HTML:​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled HTML Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: darkblue;
        }
        p {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Welcome to Web Development!</h1>
    <p>This is a styled HTML document with CSS.</p>
</body>
</html>

Conclusion​

HTML provides the structure and content for a web page, while CSS adds style and layout, making the page visually engaging. Mastering these two technologies is essential for anyone interested in web development.

With a solid foundation in HTML and CSS, you'll be able to create functional and aesthetically pleasing web pages. In the next steps, you can dive deeper into more advanced topics like responsive design, CSS frameworks, and JavaScript to further enhance your web development skills.