Skip to main content
Sign in
Español Français Italiano

Discovering CSS

  • Updated

CSS (Cascading Style Sheets) is a stylesheet 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 dot. For example,.menu it will target all elements havingclass="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 an attributetype having the value "text".
  • Pseudo-class selectors: target elements in specific states. For example,:hover Apply 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 the event of a conflict between multiple rules targeting the same element. Here is how specificity works:

  • ID selectors: An ID (#id) has the highest specificity. It receives 100 points.
  • Class selectors, pseudo-classes, and attributes: These selectors (.classe, :hover, [type="text"]have an average specificity. Each selector receives 10 points.
  • Type selectors: Selectors that target elements by their tag name (h1, divhave the lowest specificity. Each selector gets 1 points.
  • The universal selector (``), the combinators (+, >, , ~) and the pseudo-class negation (:not()) do not affect the 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 will take precedence. To force a style despite specificity, you can use!important, although its use is generally discouraged as it can make debugging CSS code more complex.

 

Step 3: Identify the selectors on your site using the element inspector.

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

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

    IMG-discover-css 1.png

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

    IMG-discover-css 2.png

  • 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 (changes made here will only be temporary, and will be lost on the first page reload; they are mainly used to test your CSS changes before sending them to the server).

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

IMG-decouvrir-css 3.png

 

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 size of the font.
  • margin and padding: control the space around and within elements, respectively.
  • border: defines the border around the elements.

Example of CSS syntax:

selector {
  property: value;
}

To practice, try changing the background color and the 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 by using!important after the property value.

Are the CSS changes immediately visible?

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

Related articles