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

8.2. Introduction to CSS: selectors, properties and values

The CSS (Cascading Style Sheets) language is a powerful tool that allows developers to control the style and layout of a website. CSS allows you to apply styles to HTML elements on a website without changing the page content. This is done through the use of selectors, properties and values.

CSS Selectors

CSS selectors are the way to choose which HTML element a set of CSS styles will be applied to. There are several types of selectors in CSS, each with its own rules and uses. The most common are the type, class and id selectors.

A type selector is simply the name of an HTML tag. For example, to style all paragraphs in a document, you would use the "p" type selector.

A class selector is a name you give to a set of styles so you can reuse them in multiple places in a document. To use a class selector, you add the "class" attribute to an HTML element and then reference that class in your CSS using a period followed by the class name.

An ID selector is similar to a class selector, but is used to identify a single element in a document. To use an ID selector, you add the "id" attribute to an HTML element and then reference that ID in your CSS using a hashtag followed by the ID name.

CSS Properties

CSS properties are the aspects of the style that you want to change. Each property has a specific name and can be used to control things like the background color of an element, the font used for text, the thickness of an element's border, etc.

For example, the "color" property is used to change the color of an element's text. The "font-family" property is used to change the font of an element's text. The "border-width" property is used to change the thickness of an element's border.

CSS Values

CSS values ​​are the specific settings you want to apply to a property. For example, if you are using the "color" property, the value would be the specific color you want the text to be.

Values ​​can be keywords such as "red" or "blue", numbers such as "12px" or "50%", or even more complex values ​​such as "rgb(255, 0, 0)" to red or "url(image.jpg)" to use an image as a background.

In summary, selectors are used to choose which HTML element the style will be applied to, properties are used to choose which aspect of the style will be changed, and values ​​are used to choose the specific setting that will be applied to the property.

Understanding how these three components work together is critical to understanding CSS and creating effective styles for your sites.

Next page of the Free Ebook:

46Introduction to CSS: selectors, properties and values: Types of CSS selectors: Element, Class and ID

4 minutes