First steps with Sass CSS
Discover how Sass CSS revolutionizes stylesheet writing by bringing the power of a preprocessor to your web development workflow. Learn the fundamental concepts that will transform your approach to styling.
Educational objectives
- Understanding how Cascading Style Sheets work and their role in web presentation
- Mastering the creation of inline styles and understanding their priority in the CSS cascade
- Use CSS selectors effectively to precisely target HTML elements
- Apply the box model components (margin, padding, border) to your designs
- Identify and resolve common problems related to the box model and margin merging
What is CSS cascading?
The CSS cascade is the fundamental mechanism that determines which styles are applied to an HTML element when multiple CSS rules target it. Imagine the cascade as a river: the water (the styles) flows from the source (the browser) to the mouth (the final element), and at each confluence (new CSS rule), the water can change direction or force.
The cascade system follows a precise order of priority: browser (user agent) styles are applied first, then your custom styles, and finally inline styles directly in the HTML. This hierarchy ensures that your custom styles can override the browser's default styles while allowing inline styles to have the final say.
The role of style sheets in web presentation
CSS stylesheets separate content (HTML) from presentation (CSS), a fundamental principle of modern web development. This separation allows for easier maintenance, code reuse, and improved accessibility. Your stylesheets control all visual aspects: colors, fonts, spacing, positioning, and animations.
Key point The CSS cascade always follows this order of priority: browser styles external styles < internal styles < styles inline !important
Key points to remember
The CSS cascade determines the order of priority of styles applied to an element, allowing a clear hierarchy between browser, external, internal and inline styles.
Understanding inline styles
Inline styles are CSS declarations written directly within the `style` attribute of an HTML element. They have the highest priority in the CSS cascade (with the exception of `!important`). For example, <div style=" »color:" red; font-size: 16px; »> applies these styles directly to this specific element.
While powerful, inline styles should be used sparingly. They are convenient for quick adjustments or dynamic styles generated by JavaScript, but they make maintenance difficult because they mix content and presentation. Furthermore, they cannot utilize certain CSS features such as media queries or pseudo-classes.
Priority management in the cascade
CSS priority follows a point system: ID selectors are worth 100 points, classes and pseudo-classes 10 points, and elements 1 point. Inline styles add 1000 points, guaranteeing their priority. In case of a tie, the last declared rule applies. Understanding this system allows you to create predictable and maintainable stylesheets.
Key point Inline styles have a specificity of 1000, higher than any combination of classic selectors, but can be overridden by !important
Key points to remember
Inline styles have the highest priority in the CSS cascade and should be used judiciously to maintain clean and maintainable code.
The different types of selectors
CSS selectors are the tools that allow you to precisely target the HTML elements you want to style. Element selectors (h1, p, div) target all elements of that type. Class selectors (.my-class) target elements with that CSS class, while ID selectors (#my-id) target a unique element with that ID.
Advanced selectors offer even more precision: descendant selectors (div p) target all paragraphs inside divs, direct child selectors (div > p) target only direct child paragraphs, and pseudo-class selectors (:hover, :focus, :nth-child) allow targeting specific states or positions.
Effective targeting strategies
To create effective selectors, prioritize simplicity and reusability. Use classes for reusable styles, IDs for unique elements, and avoid overly specific selectors that would be difficult to override. The Block Element Modifier (BEM) methodology can help you structure your classes in a logical and maintainable way.
Key point A good CSS selector is specific enough: neither too general (risk of conflicts) nor too specific (difficult to maintain).
Key points to remember
CSS selectors allow for precise targeting of HTML elements, and their effectiveness depends on a balance between specificity and maintainability.
The components of the box model
The CSS box model is how the browser calculates the size and spacing of elements. Each HTML element is a rectangular box composed of four concentric zones: content, padding, border, and margin. Imagine these zones like the layers of an onion: the content in the center, surrounded by padding, then border, and finally margin.
The content defines the area where the text or child elements are displayed. The padding creates a transparent space between the content and the border. The border is visible and can have different styles, colors, and thicknesses. The margin creates a transparent space around the element, separating it from other elements. These properties accept values in pixels, percentages, or relative units.
Box sizing and dimension calculations
By default, CSS uses the "content-box" model: width and height apply only to the content, and padding/border are added to the total size. The `box-sizing: border-box` property changes this behavior: width and height then include padding and border, simplifying layout calculations. This is why many developers apply `box-sizing: border-box` to all their elements.
Key point With `box-sizing: border-box`, an element with a width of 300px will always remain 300px wide, even with padding and a border.
Key points to remember
The CSS box model defines how the dimensions of elements are calculated with content, padding, border and margin, and box-sizing controls this calculation.
Understanding the merging of margins
Margin collapse is a CSS behavior where adjacent vertical margins combine into a single margin. For example, if one element has `margin-bottom: 20px` and the next element has `margin-top: 30px`, the space between them will be 30px (the larger margin), not 50px. This phenomenon only occurs vertically and can create unexpected spacing in your layouts.
Merging affects margins between sibling elements, between a parent and its first/last child, and even empty elements. To avoid this behavior, you can use padding instead of margin, apply `overflow: hidden` to the parent container, or use modern layout techniques like Flexbox that don't merge margins.
Debugging dimension problems
Your browser's developer tools are essential for understanding box model issues. The inspector visually displays the content, padding, border, and margin areas of each element. Use these tools to identify why an element isn't displaying as expected: is it a box-sizing issue, overlapping margins, or incorrect width calculations?
Key point Margin merging only occurs vertically, between elements in normal flow, and can be prevented by using padding or formatting contexts.
Key points to remember
Common problems with the box model include margin merging and unexpected dimension calculations, which can be resolved with the right tools and techniques.
Summary
Key points to remember
- The CSS cascade : Determines the order of priority of styles according to a precise hierarchy (browser) < external < internal < inline (!important)
- Inline styles These have the highest priority but should be used sparingly to maintain clean code.
- CSS Selectors They allow for precise targeting of elements; effectiveness depends on the balance between specificity and maintainability.
- Box model Each element is composed of content, padding, border, and margin, with box-sizing controlling the dimension calculations.
- Margin merging Adjacent vertical margins combine, a phenomenon prevented by padding or modern layouts like Flexbox.
Sources
To deepen your knowledge:
Validate your knowledge
Test your understanding with this 10-question quiz:
