Introducing CSS Selectors
Now that we have covered some basic HTML tags, it's time to explore how to enhance their visual presentation using CSS. In this lesson, we will start with the CSS selector, which is the pattern used to locate specific HTML elements on a webpage. Cascading Style Sheet (CSS) CSS is short for Cascading Style Sheet, it controls the appearance of the HTML components, such as the the color, spacing, size, and more. Recall that the default appearance of an HTML element can be altered by specifying a style attribute. For example, if you want to change the color of a paragraph, this is what you can do: Lorem ipsum dolor sit amet . . . The style declaration statement follows the format : ;. You may define another style after the semicolon (;). Lorem ipsum . . . However, this is an inefficient way of managing styles, as a real-life webpage could have hundreds of different elements. It will become a disaster if you try to micromanage all of them. In practice, you are likely to have multiple elements that share the same appearance, and it makes more sense to assign the same set of styles to them. This can be achieved by creating a element in the section like this: Document p { color: red; text-decoration: underline; } . . . . . . . . . Alternatively, you could create an separate CSS document, such as style.css, and then import the document into your HTML file. . ├── index.html └── style.css style.css p { color: red; text-decoration: underline; } index.html Document This is how you can add CSS code to your webpage, and as you can see, both paragraphs have been assigned the same style. Note: Here is a small tip when designing your webpages. You can check the styles assigned to each element through the developer tools built into your browser. For example, if you use Google Chrome, right-click on the webpage and select Inspect. A side panel should pop up, displaying the source code. You can select any element to check what CSS styles are applied. You can also uncheck certain styles to see what would happen to the page without it. How to select HTML elements Let's take a closer look at the CSS code demo above. p { color: red; text-decoration: underline; } p is a selector that selects all elements in the HTML document. The styles defined inside the curly braces ({}) will then be assigned to all the selected elements. However, what if you have a more complex HTML structure? For example, here we have two blocks, and , each with its own paragraphs. What should you do if you need the paragraphs to have different styles? Lorem ipsum . . . Lorem ipsum . . . Lorem ipsum . . . The class and id selectors To answer this question, we must first discuss two essential HTML attributes, id and class. In an HTML document, each element can be assigned an id. . . . . . . The id must be unique across the entire document. For example, the following code is not allowed, because the first paragraphs have the same id. . . . . . . After setting an appropriate id, you can then use an id selector to give each paragraph a unique style. An id selector starts with a hash character (#), followed by the id of the element you wish to select. #first-paragraph { color: red; } #second-paragraph { color: blue; } #third-paragraph { color: green; } View Code Demo
Now that we have covered some basic HTML tags, it's time to explore how to enhance their visual presentation using CSS. In this lesson, we will start with the CSS selector, which is the pattern used to locate specific HTML elements on a webpage.
Cascading Style Sheet (CSS)
CSS is short for Cascading Style Sheet, it controls the appearance of the HTML components, such as the the color, spacing, size, and more.
Recall that the default appearance of an HTML element can be altered by specifying a style attribute. For example, if you want to change the color of a paragraph, this is what you can do:
style="color: red;">Lorem ipsum dolor sit amet . . .
The style declaration statement follows the format ;).
style="color: red; text-decoration: underline;">Lorem ipsum . . .
However, this is an inefficient way of managing styles, as a real-life webpage could have hundreds of different elements. It will become a disaster if you try to micromanage all of them.
In practice, you are likely to have multiple elements that share the same appearance, and it makes more sense to assign the same set of styles to them. This can be achieved by creating a
. . .
. . .
. . .