Coding Classes at RCCG Harvest Centre, Stafford

Understanding HTML Tags and CSS Selectors

Hello again, future web designers!

In our last lesson, we created a simple webpage using HTML and CSS. Today, we’ll dive a bit deeper into HTML tags and CSS selectors. These are essential concepts that will help you create more complex and beautiful websites.

HTML Tags: The Building Blocks

HTML tags are the core components of HTML that define the structure of your webpage. Let’s explore some common tags:

Headings: Used to define headings of different levels.

<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>

Paragraphs: Used to define a paragraph of text.
```
<p>This is a paragraph.</p>
```

Links: Used to create hyperlinks.

<a href="https://www.example.com">This is a link</a>

Images: Used to display images.

<img src="image.jpg" alt="Description of image">

Lists: Used to create ordered and unordered lists.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>

CSS Selectors: Styling Your HTML

CSS selectors are used to target HTML elements for styling. Here are some common types of selectors:

Element Selector: Targets all instances of an element.
```
p {
    color: blue;
}
```

Class Selector: Targets elements with a specific class attribute.

.intro {
    font-size: 20px;
}

In HTML:

<p class="intro">This is an introductory paragraph.</p>

ID Selector: Targets a single element with a specific ID attribute.
```
#main-title {
    text-align: center;
}
```
In HTML:
```
<h1 id="main-title">Main Title</h1>
```

Descendant Selector: Targets elements that are descendants of another element.

div p {
    margin-left: 20px;
}

In HTML:

<div>
    <p>This paragraph is inside a div.</p>
</div>

Putting It All Together

Let’s create an HTML file that uses different tags and a CSS file that styles them:

HTML File (index.html)

<!DOCTYPE html>
<html>
<head>
    <title>My Styled Webpage</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1 id="main-title">Welcome to My Website</h1>
    <p class="intro">This is an introductory paragraph.</p>
    <a href="">Visit Example.com</a>
    <img src="image.jpg" alt="Example image">
    <ul>
        <li>First item</li>
        <li>Second item</li>
    </ul>
</body>
</html>

CSS File (styles.css)

body {
    font-family: Arial, sans-serif;
}
#main-title {
    color: darkblue;
    text-align: center;
}
.intro {
    font-size: 18px;
    color: gray;
}
a {
    color: red;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
img {
    width: 200px;
    height: auto;
}
ul {
    list-style-type: square;
}

Open your index.html file in a web browser, and you’ll see your styled webpage!

Final Thoughts

Understanding HTML tags and CSS selectors is crucial for web design. Experiment with different tags and selectors to see how they affect your webpage. In our next lesson, we’ll explore more advanced CSS techniques and start looking into JavaScript.

Happy coding!

CODING@HC

Contact Info