Introduction to CSS : Style your website

What is CSS?

Definition

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML or XML. Essentially, if HTML is the skeleton of your site, CSS is the wardrobe. It allows you to separate content (HTML) from presentation (CSS), simplifying maintenance and enhancing flexibility.

History

CSS made its debut in December 1996 with CSS1. At the time, developers were still dancing the Macarena and wondering what they could do with this new tool. Over time, CSS has evolved through several versions (CSS2, CSS3), bringing new features and making web design even more exciting.

CSS Basics

Basic Syntax

CSS syntax is quite simple: a selector, a property, and a value. For example:

Here, body is the selector, background-color is the property, and lightblue is the value. Easy, right?

Integrating CSS with HTML

There are three ways to integrate CSS with HTML:

• Inline CSS: directly in the HTML tags, ideal for quick adjustments.
• Internal CSS: in a <style> tag in the HTML document’s head, perfect for styles specific to a single page.
• External CSS: in a separate .css file, the best practice for maintaining clean and reusable code.

CSS Comments

CSS comments are essential for keeping your code understandable. They are written like this:

Use them generously to explain your styling choices and avoid future confusion.

CSS Selectors

Selector Types

Selectors are the basic elements of CSS. Here are the main ones:

• Type Selectors: target HTML tags, e.g., p {color: red;}.
• Class Selectors: target classes defined with class="name", e.g., .name {font-size: 20px;}.
• ID Selectors: target IDs defined with id="name", e.g., #name {margin: 10px;}.
• Attribute Selectors: target elements with a certain attribute.
• Pseudo-class and Pseudo-element Selectors: target specific states of elements, like :hover or ::after.

Hierarchy and Specificity

Specificity is a crucial rule in CSS: it determines which rules apply when multiple rules target the same element. In short, the more specific a selector is, the more weight it carries. And believe me, in CSS, weight matters!

Essential CSS Properties

Text and Typography

Text and typography properties are crucial for the readability and aesthetics of your site:

• font-family, font-size, font-weight to set the font, size, and weight of the text.
• text-align, text-decoration, line-height to align, decorate, and space the text.

Colors and Backgrounds

Colors and backgrounds bring life to your site:

• color, background-color, background-image to set colors and background images.
• Gradients and transparency for elegant visual effects.

Box Model

Box model properties define the space around and inside elements:

• margin, padding, border to manage spaces and borders.
• width, height, box-sizing to control the size of elements.

Element Layout

Layout is key to organizing your content:

display, position, flexbox, grid to align and place elements in a flexible and responsive manner.

Advanced CSS Techniques

Animations and Transitions

Add dynamism to your site with CSS animations and transitions:

• Transitions allow properties to change smoothly.
• Keyframes and animations add complex and attractive effects.

Responsive Design

Responsive design is essential for making your site look great on all devices:

• Use media queries to adapt styles based on screen size.
• Techniques like flexbox and grid for creating adaptive layouts.

CSS Preprocessors

CSS preprocessors like SASS and LESS make CSS even more powerful:

They enhance the maintainability and reusability of CSS code.

They add features such as variables, functions, and mixins.

CSS Best Practices

Organization and Structure

Well-structured CSS code is easier to maintain:

• Use naming conventions like BEM (Block, Element, Modifier) or OOCSS (Object-Oriented CSS).
• Organize your CSS into modules for better management.

Performance

Optimize the performance of your CSS:

• Minify and concatenate your CSS files to reduce load times.
• Avoid heavy selectors and redundancies.

Accessibility

Ensure your CSS is accessible to everyone:

• Avoid animations and transitions that could cause issues for sensitive users.
• Use appropriate colors and contrasts.

Visual Resources and Code Examples

To illustrate the concepts discussed, we invite you to check out CSS code examples on sites like CodePen. There, you’ll find real-time demonstrations that you can modify and adapt to your needs.

To go further, here are some useful resources:

• Codecademy
• MDN Web Docs
• CSS-Tricks