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: Understanding CSS selectors

CSS selectors are patterns that identify the elements to 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, prefixed by a full stop. For example,.menu will target all elements that haveclass="menu".
• ID selectors: target elements with a specific ID attribute, prefixed by a hash. 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 atype with 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: Understanding the specific features of CSS selectors

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

• ID selectors: An ID (#id) has the highest specificity. It scores 100 points.
• Class, pseudo-class and attribute selectors: These selectors (.classe, :hover, [type="text"]) have 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 obtains 1 point.
• The universal selector (``), combiners (+, >, , ~) and pseudo-class negation (:not()) do not affect specificity (0 point).
• Inline styles (not recommended): Place 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 the event of a tie, the last rule defined in the CSS takes precedence. To force a style despite specificity, you can use!important although its use is generally not recommended, as it can make debugging CSS code more complex.

 

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

To effectively modify the styles of your PrestaShop store, you need to know how to identify 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 element's HTML code will be highlighted.

  

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

Example: here the element's background color is modified

 

Step 4: Basic CSS properties and values

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

• color: defines text color.
• background-color: defines the background color of an element.
• font-size: defines font size.
• margin and padding: control the space around and inside 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 undo a CSS rule applied by mistake?

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

Are CSS changes immediately visible?

To see the changes, you'll need to 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 gives you an overview of how to get started with CSS to customize your PrestaShop online store. With these basics, you can start exploring the possibilities of customization. To find out more, see the dedicated article.