8.1. Introduction to CSS: selectors, properties and values: Introduction to CSS

8.1. Introduction to CSS: selectors, properties and values

CSS, or Cascading Style Sheets, is a style language that is used to describe the appearance and formatting of a document written in HTML. CSS is one of the main front-end technologies, along with HTML and JavaScript, that are used to create and design websites.

So what are selectors, properties and values ​​in CSS? Let's start with selectors.

CSS Selectors

CSS selectors are the part of CSS that determines which HTML elements on a page will be styled. In other words, they "select" which elements will receive certain CSS styles. There are several types of CSS selectors, including type selectors, class selectors, ID selectors, attribute selectors, pseudo-class selectors, and pseudo-element selectors.

Type selectors select HTML elements based on their element type. For example, the 'h1' type selector would select all h1 elements on a page.

Class selectors select HTML elements based on their class. Classes are HTML attributes that can be added to any HTML element. For example, the class selector '.intro' would select all elements with the class 'intro'.

ID selectors select HTML elements based on their ID. IDs are unique HTML attributes that can be added to any HTML element. For example, the ID selector '#header' would select the element with the ID 'header'.

CSS Properties

CSS properties are the aspects of HTML elements that you want to style. For example, you may want to change the background color, font, font size, margin, padding, height, width, and many other aspects of an HTML element. Each of these things you might want to change is a CSS property.

For example, the 'color' property is used to change the color of an element's text. The 'font-size' property is used to change the font size of an element. The 'background-color' property is used to change the background color of an element.

CSS Values

CSS values ​​are the specific values ​​you assign to a CSS property. For example, if you wanted the text of an element to be red, you would use the 'color' property and assign the value 'red' to it.

Values ​​can be many different things depending on the property. For example, for the 'color' property, the values ​​can be color names, such as 'red', 'blue', or 'green', or they can be hexadecimal color codes, such as '#FF0000' for red.

For the 'font-size' property, values ​​can be units of measurement, such as 'px' for pixels, 'em' for the width of the letter 'M' in the current font, or '%' for a relative size to the font size of the parent element.

In conclusion, CSS is a powerful styling language that allows you to style HTML elements in many different ways. By understanding CSS selectors, properties, and values, you can start creating more complex and attractive website designs.

Next page of the Free Ebook:

45Introduction to CSS: selectors, properties and values: Understanding what CSS selectors are

3 minutes