CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a document written in HTML or XML. This introductory article is designed to help PrestaShop merchants understand the basics of CSS, including the use of selectors, identifying these selectors on their site via the element inspector, and fundamental CSS properties.

Step 1: Understand CSS selectors

CSS selectors are patterns that identify the elements on which styles will be applied. Here are the most common types of selectors:

• Type selectors: target elements by their tag name, such asp for paragraphs.
• Class selectors: target elements with a specific class attribute, preceded by a dot. For example,.menu will target all elements withclass="menu".
• ID selectors: target elements with a specific ID attribute, preceded by a hash symbol. For example,#header will target the element withid="header".
• Attribute selectors: target elements based on the presence of an attribute or the value of an attribute. For example,[type="text"] will select all elements with an attributetype having the value "text".
• Pseudo-class selectors: target elements in specific states. For example,:hover applies a style when the user hovers over an element with the cursor.

Step 2: Understand the specificity of CSS selectors

The specificity of CSS selectors is a point system used by browsers to determine which CSS rules apply in case of conflict between several rules targeting the same element. Here's how specificity works:

• ID selectors: One ID (#id) has the highest specificity. It gets 100 points.
• Class selectors, pseudo-classes and attributes: These selectors (.classe, :hover, [type="text"]) have an average specificity. Each selector gets 10 points.
• Type selectors: Selectors that target elements by their tag name (h1, div) have the lowest specificity. Each selector gets 1 point.
• The universal selector (``), the combinators (+, >, , ~) and the pseudo-class negation (:not()) do not affect the specificity (0 point).
• Inline styles (not recommended): Placing styles directly in an attributestyle of an HTML element (for example,<div style="color: red;">) has a higher specificity than any selector, receiving 1000 points.

The rule with the highest total specificity will be applied. In case of a tie, the last rule defined in the CSS will take precedence. To force a style despite the specificity, you can use!important, although its use is generally discouraged because it can make debugging CSS code more complex.

Step 3: Identify the selectors on your site with the element inspector

To effectively modify the styles of your PrestaShop store, you need to know how to identify the selectors using the browser's element inspector:

• Right-click on the element you wish to style and select "Inspect".

  

• The element inspector will open a window where the HTML code of the element will be highlighted.

  

• On the Styles panel next to it, you can see the CSS applied to this element. You can also modify these styles temporarily here to see how the changes affect your page (the modifications made here will only be temporary, and will be lost when the page is reloaded for the first time; they are essentially used to test your CSS modifications before sending them to the server)

Example: here the background-color of the element is modified

Step 4: Basic properties and values in CSS

To apply styles, you use CSS properties assigned to specific values. Here are some basic properties:

• color: defines the color of the text.
• background-color: defines the background color of an element.
• font-size: defines the font size.
• margin and padding: control the space around and inside the elements, respectively.
• border: defines the border around elements.

Example of CSS syntax:

selector {
  property: value;
}

To practice, try changing the background color and font size of an element on your site.

Frequently asked questions

How can I cancel a CSS rule that was applied by mistake?

You can either delete or comment out the CSS rule in your file, or override it by adding a new, more specific rule or using!important after the property value.

Are the CSS changes immediately visible?

To see the changes, you must refresh the page, clear your store's cache from Advanced Settings / Performance, and sometimes clear your browser's cache for the new CSS rules to take effect.

This guide offers an overview of how to get started with CSS to customize your PrestaShop online store. With these basics, you can begin to explore the possibilities of customization. For more information, see the dedicated article.