CSS: rules, selectors, properties

CSS (Cascading Style Sheets) is a style language used to design web pages. It allows you to separate page content from its presentation, making it easier to work with layouts and design.

CSS consists of a set of rules, each of which determines how a certain element on a web page should be styled. The rules include selecting elements using selectors and setting properties on those elements. Let’s look at the main components of CSS – rules, selectors and properties.

Rules

A CSS rule consists of a selector and a property block. The rule tells the browser which elements of the web page to style and how they should be styled. Each rule starts with a selector that selects elements and ends with a block of properties that apply to the selected elements.

Here is an example of a simple rule:

Here `p` is a selector that selects all paragraphs on the page. Inside the property block, styles for paragraphs are set: blue text color and font size 16 pixels.

Selectors

Selectors allow you to select one or more elements on a web page to apply certain styles to. Selectors can be very simple or more complex and allow you to select elements based on their type, classes, IDs, attributes, and even their location on the page.

Examples of simple selectors:

• `p` – selects all paragraphs.
• `.header` – selects all elements with class “header”.
• `#logo` – selects the element with id “logo”.

Examples of more complex selectors:

• `ul li` – selects all elements of the `li` list that are children of the `ul` element.
• `input` – selects all text fields on the page.

Properties

Properties determine the appearance of elements selected using selectors. Each property has a value that specifies how the element should look.

Property examples:

• `color` – defines the text color of the element.
• `font-size` – sets the font size.
• `background-color` – sets the background color of the element.
• `border` – defines the style, thickness and color of the element’s border.

Here is an example of using properties:

This rule selects all h1 headings and sets their text color to red, font size 24px, yellow background, and black border 1px thick.

Combinators

Combinators in CSS allow you to combine selectors and create more specific rules. Here are some examples of combinators:

• `div p` – selects all `p` elements that are children of `div` elements.
• `.menu-item > a` – selects all `a` elements that are direct descendants of elements with class `.menu-item`.
• `h2 + p` – selects all `p` elements that come directly after `h2` elements.

Using combinators allows you to fine-tune how styles are applied to elements on a page.

Pseudo-classes and pseudo-elements

Pseudo-classes and pseudo-elements allow you to select elements that are in certain states or have specific parts. They are specified after the main selector and are denoted by a colon.

Pseudo-class examples:

• `:hover` – Applies styles when the cursor hovers over an element.
• `:active` – applies styles when the element is active (clicking on a button, for example).
• `:focus` – applies styles when the element has focus (for example, an input field when it is clicked).

Examples of pseudo elements:

• `::before` – adds content before the content of the selected element.
• `::after` – adds content after the content of the selected element.
• `::first-line` – applies styles to the first line of text in the element.
• `::first-letter` – applies styles to the first letter of the text in the element.

Import CSS files

To make your code more structured and easier to maintain, CSS allows you to import styles from other files. This is achieved with the `@import` command, which can be placed at the top of the CSS file.

In this way, you can split styles into different files, which will make them easier to edit and reduce the size of each one.

Cascading and priorities

CSS is based on the principle of cascading, which means that styles can be defined in different places and sources, and the browser will decide which style to apply based on priorities. Cascading includes:

• Selector Precedence: The browser respects the specificity of selectors. The more specific the selector, the higher its precedence.
• Style Order: If two rules have the same specificity, then the last rule will be applied to the element.
• Style Importance: You can set the importance of a style using `!important`. This makes style take precedence.

It is important to use `!important` carefully to avoid future code maintenance issues.

Media queries

CSS allows styles to adapt based on device settings such as screen width and resolution. Media queries allow you to create responsive designs that look good on a variety of devices, from mobile phones to desktops.

Media query example:

In this example, styles will be applied to page elements when the screen width does not exceed 768 pixels.

CSS is a powerful web styling tool and these basics will help you get started using it to create beautiful and functional designs. Practice and experience will help you improve your skills and become an experienced front-end developer.