8.11. Introduction to CSS: Selectors, Properties, and Values: How to Use the Element Inspector to Debug CSS

Introduction to CSS: selectors, properties and values

CSS (Cascading Style Sheets) is the language used to style and layout web pages. CSS describes how HTML elements should be displayed on screen, paper, or other media. It is a powerful language that, when combined with HTML, can create visually stunning and highly functional websites. In this chapter, we'll explore the basics of CSS, including selectors, properties, and values, and how to use the element inspector to debug CSS.

CSS Selectors

CSS selectors are the way to choose which HTML elements you want to style. There are several types of selectors in CSS, including type selectors, class selectors, ID selectors, and attribute selectors.

• Type selectors: They select elements based on the HTML element type. For example, if you wanted to select all paragraphs on a page, you would use the p type selector.
• Class selectors: They select elements based on the HTML class. For example, if you wanted to select all elements with the class "highlight", you would use the class selector .highlight.
• ID Selectors: They select a specific element based on the HTML ID. For example, if you want to select the element with the ID "my-id", you would use the ID selector #my-id.
• Attribute selectors: They select elements based on a specific attribute. For example, if you wanted to select all links that point to a specific URL, you would use the [href="https://www.mysite.com"] attribute selector.

CSS Properties and Values

Once you've selected the elements you want to style, you can set CSS properties and values ​​for those elements. CSS properties are aspects of the element that you want to change, such as color, font size, width, height, margin, padding, etc. CSS values ​​are the specific values ​​you want to apply to these properties. For example, if you wanted to change the text color of all paragraphs to red, you would use the color CSS property with the value red.

Here's an example of how you can use CSS selectors, properties, and values ​​to style a web page:

<style>
P {
  color: red;
  font-size: 16px;
}
.emphasis {
  background-color: yellow;
}
#my-id {
  width: 100px;
  height: 100px;
}
[href="https://www.mysite.com"] {
  text-decoration: none;
}
</style>

Using the Element Inspector to Debug CSS

The Element Inspector is a powerful tool that allows you to view and edit the HTML and CSS of a web page in the browser. It's an essential tool for any front-end developer as it allows you to debug CSS issues in real time.

To open the Element Inspector, right-click anywhere on the web page and select "Inspect" or "Inspect Element". This will open the Element Inspector at the bottom of the browser window. You will see the page's HTML in the left panel and the CSS in the right panel.

To debug CSS, you can select any element in the HTML panel and see all the CSS rules applied to that element in the CSS panel. You can edit any CSS property or value directly in the Element Inspector to see how the changes affect the element in real time. This is extremely useful for debugging issues with layout, colors, font sizes, etc.

Additionally, the Element Inspector also shows you which CSS rules are being overridden, which can help you understand why certain styles are not being applied as expected.

In short, CSS is a powerful language that allows you to style and layout web pages. Understanding the basics of CSS selectors, properties, and values ​​is essential for any front-end developer. Additionally, learning how to use the Element Inspector to debug CSS is an invaluable skill that can save you a lot of time and frustration.

Next page of the Free Ebook:

55Text styling with CSS

4 minutes