Skip to main content

#CSS

The first principle of CSS is the separation of form and content. In other words, CSS (Cascading Style Sheets) is used to define the formatting and appearance of HTML elements, while HTML is used to define the content and structure of the web page. This separation helps separate different responsibilities and improves the flexibility and maintainability of the code.

Here's a simple example that demonstrates using CSS to define the formatting of HTML elements:


h1 {
  font-size: 24px;
  color: red;
}
p {
  font-size: 16px;
  color: blue;
}

Here the title h1 is defined with a font size of 24px and a red color, while the paragraph p is defined with a font size of 16px and a blue color.

CSS Fundamentals

Selectors: selectors allow you to select HTML elements to apply styles to them. There are different types of selectors, such as identifier, class, element, descendant, attribute, and universality selectors.

  • ID selector
  • Class selector
  • HTM element selector
    #promotion {
font-size: 50px;
color: red;
border: 1 px solid blue;
    }

Class selector​

allows you to select one or more HTML elements based on their class. The class selector is represented by the symbol . followed by the class name, as in the following example:

    .category-container {
display: flex;
    }

Properties​

Properties are characteristics of HTML elements that can be modified by CSS. There are many CSS properties, such as color, size, font, border, background, spacing, alignment, and layout.

color: allows you to set the font color of an HTML element. The value of the property color can be a color in RGB, hexadecimal, name, or HSL value, as in the following example:


h1 {
  color: #ff0000;
}

font-size: allows you to define the font size of an HTML element. The value of the font-size property can be a number in pixels, points, ems, or percentage, as in the following example:


h1 {
  font-size: 24px;
}

background-color: allows you to define the background color of an HTML element. The value of the property background-color can be a color in RGB, hexadecimal, name, or HSL value, as in the following example:

body {
  background-color: #f0f0f0;
}

border: allows you to define the border of an HTML element. The value of the border property can be composed of three elements: the width, the style, and the color of the border, as in the following example:

img {
  border: 2px solid #cccccc;
}

Values

  • If you want the size of an element to be fixed and not change depending on the size of the browser window, you can use pixel values ​​(px).
  • If you want the size of an element to be proportional to the size of its parent or browser window, you can use values ​​in percentage (%) or vh/vw (vh or vw).
  • If you want the size of an element to be related to the font size of the element or root element, you can use values ​​in em/rem (em or rem).

It's important to note that pixel size values ​​(px) can make your site less responsive to different screen sizes. Where possible, it is recommended to use values ​​in percentage (%), vh/vw (vh or vw) or em/rem (em or rem) to make your site responsive.

the values ​​are specifications of CSS properties. They can be numbers, units of measurement, colors, fonts, margins, padding, borders, backgrounds, transitions, transformations, and other values ​​specific to each property.

Color value

  • Name: red, green, blue, ...
  • Hexadecimal value: #ff0000, #00ff00, #0000ff, ...
  • RGB value: rgb(255.0, 0), rgb(0.255.0), rgb(0.0.255), ...
  • RGBA value (access to opacity): rgba(255, 0, 0, 1), ...

Size value:

-px

  • % (50% = half as the parent element)
  • em
  • rem
  • 1rem -vh
  • (vw)

Alignment value

  • left: aligns the element to the left
  • right: align the element to the right
  • center: align the element to the center
  • justify: aligns the element to the full width of the parent
  • inherit: inherits alignment from parent element

Waterfall

cascading determines how styles are applied to HTML elements in case of conflict or redundancy.

Cascading rules define the order of priority of styles based on their origin, their specificity, and their importance.

Rule Importance: A rule declared with the !important attribute has a higher priority than a normal rule.

Rule specificity: A rule that targets an element more specifically (for example, using a unique identifier) ​​has a higher priority than a rule that targets an element more generally (for example, using a class common to several elements). Order of application of rules: if several rules have the same importance and the same specificity, it is the last rule declared which will be applied.

Legacy

In CSS, inheritance refers to the fact that an element can inherit properties from its parent or child elements. This means that if a parent element has a CSS property defined, that property will automatically be applied to all child elements of that parent element.

For example, if you set the text color of an element <body> using the CSS property color, all child elements of the element <body> will automatically have the same text color. This avoids having to redefine the same property for each child element individually.

It is possible to disable inheritance for a CSS property by using the value inherit for that property.

body {
  color: red;
}

p {
  color: inherit;
}

All <p> elements will inherit the red color from parent <body>, except those whose color has been explicitly redefined with the value inherit.

CSS property categories​

Text formatting properties

they allow you to control the size, font, alignment, etc. text of an element.

  • font-size: defines the font size used for the text of an element.
  • font-family: defines the font family to use for the text of an element.
  • text-align: defines the text alignment of an element (left, right, centered, justified).

Color Formatting Properties

they allow you to control the color of the text, font and background of an element.

  • color: defines the text color of an element.
  • background-color: defines the background color of an element.

Dimension formatting properties

they allow you to control the width, height, margin and padding of an element.

  • width and height: define the width and height of an element
  • margin and padding: define the spacing around an element. The margin sets the spacing around the element itself, while the padding sets the spacing around the element's content.

Layout formatting properties

they allow you to control the position, arrangement and stacking of elements on the page.

  • line-height: defines the spacing between lines of text in an element.
  • letter-spacing: defines the spacing between letters in an element.

Border and shadow formatting properties

they allow you to control the appearance of borders and shadows around elements.

  • border: defines a border around an element. You can set its color, width and style (e.g. solid, dotted, lines).
  • box-shadow: adds a shadow around an element.
  • border-radius: allows you to redundant the corners of an element giving it a rounded appearance.
  • opacity: defines the transparency of an element.
  • float: allows you to float an element (usually an image) to the left or right of the text surrounding it.
  • position: allows you to control the position of an element relative to its parent container or other elements on the page.
  • display: allows you to control how an element is displayed, for example as a block or in a line.
  • overflow: allows you to manage how the content of an element is displayed when it exceeds the element's boundaries.
  • visibility: allows you to control whether an element is visible or not.
  • z-index: allows you to control the stacking order of elements, that is to say the element which is displayed above or below the others.