CSS Learning Guide

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS controls how elements are displayed on screen, paper, or in other media.

Key Features of CSS:

Defines styles for web pages, including design, layout, and display variations
Saves time by controlling multiple web pages at once
Enables responsive design for different devices and screen sizes
Separates content from presentation for better maintainability

MDN CSS Documentation

CSS Syntax and Structure

A CSS rule consists of a selector and a declaration block:

                /* This is a CSS comment */
                selector {
                  property: value; /* Declaration */
                }
            

Example:

                /* Make all h1 elements blue and centered */
                h1 {
                  color: blue;
                  text-align: center;
                }
            

Adding CSS to HTML

Inline CSS

Internal CSS

External CSS

Inline CSS

Apply styles directly to HTML elements using the style attribute:

                    <h1 style="color: blue; text-align: center;">
                      This is a heading
                    </h1>
                

Note: Inline styles have the highest specificity and are hard to maintain. Use sparingly.

Internal CSS

Place CSS rules inside a <style> element in the HTML document's <head>:

                    <!DOCTYPE html>
                    <html>
                    <head>
                      <style>
                        body {
                          background-color: #f0f0f0;
                        }
                        h1 {
                          color: blue;
                          text-align: center;
                        }
                      </style>
                    </head>
                    <body>
                      <h1>This is a heading</h1>
                    </body>
                    </html>
                

External CSS

Link to an external CSS file (recommended approach):

                    /* In your HTML file */
                    <head>
                      <link rel="stylesheet" href="styles.css">
                    </head>
                    
                    /* In styles.css */
                    body {
                      background-color: #f0f0f0;
                    }
                    
                    h1 {
                      color: blue;
                      text-align: center;
                    }
                

External CSS is the most maintainable approach as it separates content from presentation.

Essential CSS Concepts

Master these fundamental CSS concepts to build effective styles:

Selectors

Target HTML elements by type, class, ID, attributes, or relationships

Box Model

Content, padding, border, and margin that make up element layout

Positioning

Static, relative, absolute, fixed, and sticky positioning schemes

Flexbox

One-dimensional layout model for efficient space distribution

Grid

Two-dimensional layout system for complex web layouts

Responsive Design

Media queries and flexible layouts for all screen sizes

Specificity

Rules that determine which CSS declarations are applied

Variables

Custom properties for reusable values throughout CSS

CSS Selectors

Selectors define which HTML elements to style:

Selector	Example	Description
Element	p	Selects all <p> elements
Class	.intro	Selects all elements with class="intro"
ID	#header	Selects the element with id="header"
Attribute	a[target]	Selects all <a> elements with a target attribute
Descendant	div p	Selects all <p> elements inside <div> elements
Child	div > p	Selects all <p> elements where the parent is a <div>
Pseudo-class	a:hover	Selects links on mouse hover

CSS Box Model

Every element is represented as a rectangular box with these properties:

Content Box

                    .box {
                      width: 200px;          /* Content width */
                      height: 100px;         /* Content height */
                      padding: 20px;         /* Space around content */
                      border: 5px solid blue; /* Border around padding */
                      margin: 30px;         /* Space outside border */
                      box-sizing: border-box; /* Include padding/border in width/height */
                    }
                

CSS Layout Techniques

Flexbox Example

Item 1

Item 2

Item 3

                    .container {
                      display: flex;
                      justify-content: space-between; /* Horizontal alignment */
                      align-items: center;      /* Vertical alignment */
                      gap: 10px;            /* Space between items */
                    }
                

CSS Grid Example

Header

Content

                    .container {
                      display: grid;
                      grid-template-columns: repeat(3, 1fr);
                      gap: 10px;
                    }
                

Learning Resources

1

MDN Web Docs

Comprehensive resource for CSS documentation and tutorials.

Visit MDN

2

CSS-Tricks

Excellent articles, guides, and reference for all things CSS.

Visit CSS-Tricks

3

Flexbox Froggy

A game for learning CSS flexbox in a fun, interactive way.

Play Game