8.9. Introduction to CSS: selectors, properties and values: How to apply values ​​to CSS properties

Introduction to CSS: Selectors, Properties and Values

CSS, or Cascading Style Sheets, is a style language used to describe the appearance of a document written in HTML. CSS describes how HTML elements should be displayed on screen, paper, or other media. CSS saves a lot of work as it controls the layout of multiple pages at once.

CSS Selectors

CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.

For example, a type selector selects elements by node name. For example, the type selector 'h1' selects all elements <h1>.

<style>
h1 {
  color: blue;
}
</style>

This example selects all <h1> elements and changes the text color to blue.

CSS Properties

CSS properties are used to specify the style of an element. Each property has a name and a value. The property name is followed by a colon and the property value. A CSS declaration always ends with a semicolon, and style declarations are separated by a space.

For example:

<style>
P {
  color: red;
  text-align: center;
}
</style>

This example sets the text color to red and aligns the text to the center.

CSS Values

CSS values ​​are defined along with properties to style HTML elements. For example, the color property can have values ​​like 'red', 'blue', 'green', etc. Additionally, the width property can have values ​​like '100px', '50%', etc.

Example:

<style>
P {
  font-size: 20px;
  color: white;
  background-color: black;
}
</style>

This example sets the font size to 20 pixels, the text color to white, and the background color to black.

How to apply values ​​to CSS properties

Applying values ​​to CSS properties is quite simple. First, you need to select the element you want to apply the style to. Next, you need to define the property you want to change. Finally, you need to set the value you want to apply to this property.

For example, if you want to change the color of all your paragraphs to blue, you can do this as follows:

<style>
P {
  color: blue;
}
</style>

In this example, 'p' is the selector, 'color' is the property, and 'blue' is the value.

CSS is a powerful language that allows developers to control the appearance of their websites. By understanding how CSS selectors, properties, and values ​​work, you can create more attractive and effective websites.

We hope this guide helped you understand CSS better. Remember that practice is key when it comes to learning and mastering CSS. So keep practicing and experimenting with different selectors, properties and values.

Next page of the Free Ebook:

53Introduction to CSS: selectors, properties and values: Understanding cascade and inheritance in CSS

4 minutes