8.5. Introduction to CSS: Selectors, Properties and Values: Introduction to CSS Properties

Introduction to CSS: selectors, properties and values

CSS, which stands for 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. This can control the layout of multiple web pages at once. CSS allows you to apply styles to web pages. More importantly, CSS allows you to do this independently of the HTML being used to structure the document.

CSS Selectors

CSS selectors are the part of CSS that selects the HTML element you want to style. There are several types of selectors in CSS, including type, class, ID, attribute selectors, among others.

• Type selectors: Select elements based on the name of the HTML element. For example, the p type selector will select all paragraphs.
• Class selectors: Select elements based on class attribute. For example, the class selector .intro will select all elements with class="intro".
• ID Selectors: Select an element based on the ID attribute. For example, the ID selector #firstname will select the element with id="firstname".
• Attribute selectors: Select elements based on an attribute or attribute value. For example, the [target="_blank"] attribute selector will select all elements with target="_blank".

CSS Properties

CSS properties are what you want to style in the selected element. For example, you may want to change the color, font, size, margin, padding, background, border, and many other properties of HTML elements. Each property has a specific value.

For example, the color property controls the color of the text. So, if you want the text of all paragraphs to be red, you would use the following CSS code:

P {
  color: red;
}

CSS Values

CSS values ​​are the adjustments you make to properties. In the example above, red is the value of the color property. Values ​​can be keywords such as red, numbers such as 12px, percentages such as 50%, or a variety of other units of measure.

Values ​​can also be more complex, such as url("image.jpg") for the background-image property, or rgba(255, 0 , 0, 0.3) for a semi-transparent color.

In short, CSS is a powerful language that allows developers to precisely control how HTML elements are displayed on the screen. Understanding CSS selectors, properties, and values ​​is key to becoming an effective front-end developer.

Next page of the Free Ebook:

49Introduction to CSS: selectors, properties and values: How to use and understand CSS properties

3 minutes