CSS Learning Roadmap

62 min readApr 8, 2025

Chapter 1: Introduction to CSS

1.1 What is CSS? (Cascading Style Sheets)

Explanation: CSS stands for Cascading Style Sheets. It’s a style sheet language used for describing the look and formatting of a document written in a markup language like HTML. CSS is what makes your web pages visually appealing and provides control over layout, colors, fonts, and more.

Key Concepts:

Style Sheet: A document containing a set of rules that specify how HTML elements should be displayed.
Cascading: Refers to the way CSS rules are applied to HTML elements. Rules can come from multiple sources (e.g., external stylesheets, internal stylesheets, inline styles), and the browser uses a set of rules to determine which styles to apply. This “cascade” is determined by specificity, inheritance, and source order (which we’ll cover in detail later).
Separation of Concerns: CSS allows you to separate the structure (HTML) from the presentation (CSS), making your code more organized and maintainable.

Why Use CSS?

Control Over Presentation: CSS gives you precise control over the look and feel of your web pages.
Consistency: You can apply the same styles to multiple pages, ensuring a consistent look and feel across your website.
Maintainability: Changes to your website’s design can be made by modifying the CSS, without having to change the HTML.
Accessibility: CSS can be used to improve the accessibility of your website by providing alternative styles for users with disabilities.
Responsive Design: CSS Media Queries allow you to create websites that adapt to different screen sizes and devices.
Reduced File Size: External CSS files can be cached by the browser, reducing the amount of data that needs to be downloaded for each page.

CSS vs. HTML for Styling:

In the early days of the web, HTML was used for both structure and presentation. However, this made code difficult to maintain and update. CSS was introduced to address this problem by separating the presentation from the structure.
While you can still use HTML attributes for basic styling (e.g., the style attribute), it’s generally considered bad practice. CSS provides much more powerful and flexible styling options and promotes better separation of concerns.

1.2 History of CSS

Explanation: The first CSS specification was proposed by Håkon Wium Lie in 1994. The first official CSS recommendation (CSS1) was published by the W3C in 1996. CSS has evolved significantly since then, with new features and capabilities being added over time.

Key Milestones:

1994: Håkon Wium Lie proposes CSS.
1996: CSS1 is published by the W3C.
1998: CSS2 is published.
2000s: CSS2.1 is developed to clarify and correct errors in CSS2.
Present: CSS3 is developed as a modular specification, with different modules being developed and implemented independently. This means we have things like CSS Grid Layout, Flexbox, Transitions, Animations, and much more. CSS4 is more of a marketing term than a formal specification; it refers to the continued evolution of CSS3 modules.

Why it matters: Understanding the history of CSS helps you appreciate how the language has evolved and why certain features exist. It also gives you context for understanding the current state of CSS development and the direction it’s heading.

1.3 CSS Syntax: Selectors, Properties, and Values

Explanation: CSS syntax consists of a selector, a property, and a value.

Selector: Specifies the HTML element(s) that the style rule applies to. Examples: p, h1, .my-class, #my-id. We’ll cover selectors in detail in Chapter 2.
Property: Specifies the style attribute you want to change (e.g., color, font-size, background-color).
Value: Specifies the value of the property (e.g., red, 16px, #ffffff).
Basic Syntax:

selector {   property: value;   property: value; }

Example:

p {   color: blue;   font-size: 14px; }

p: The selector (targets all paragraph elements).
color: The property (sets the text color).
blue: The value (sets the text color to blue).
font-size: The property (sets the font size).
14px: The value (sets the font size to 14 pixels).

Key Points:

/* Sample css example */
p {   
  color: blue;   
  font-size: 14px; 
}

CSS rules are enclosed in curly braces {}.
Properties and values are separated by a colon :.
Each property-value pair is terminated by a semicolon ;.
Comments in CSS are enclosed in /* … */.

1.4 Ways to Add CSS: Inline, Internal, and External

Explanation: There are three ways to add CSS styles to your HTML documents:

Inline CSS: Styles are applied directly to individual HTML elements using the style attribute.

<p style="color: green; font-size: 16px;">This is a paragraph with inline styles.</p>

Disadvantages:

Hard to maintain: Styles are scattered throughout the HTML code.
Not reusable: Styles cannot be shared between elements or pages.
Overrides external and internal styles (high specificity).

Use Sparingly: Inline styles should be used sparingly, primarily for quick prototyping or when you need to apply a specific style to a single element that cannot be achieved any other way.

2. Internal CSS: Styles are defined within the <style> tag in the <head> section of the HTML document.

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS Example</title>
    <style>
        p {
            color: purple;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>This is a paragraph with internal styles.</p>
</body>
</html>

Advantages:

Easy to implement: Styles are contained within the HTML document.

Disadvantages:

Not reusable: Styles cannot be shared between pages.
Can make the HTML document larger and less organized.

Use For: Small websites or when you need to include page-specific styles.

3. External CSS: Styles are defined in a separate .css file and linked to the HTML document using the <link> tag in the <head> section.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>External CSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>This is a paragraph with external styles.</p>
</body>
</html>

styles.css:

p {   color: orange;   font-size: 20px; }

Advantages:

Highly reusable: Styles can be shared between multiple pages.
Easy to maintain: Changes to the design can be made in a single file.
Improved organization: Separates the presentation from the structure.
Browser caching: External CSS files can be cached by the browser, improving performance.

Best Practice: This is the recommended way to add CSS styles to your web pages for most projects.

1.5 CSS Specificity and Inheritance

Explanation: Specificity and inheritance are two fundamental concepts in CSS that determine how styles are applied to HTML elements.

Specificity: Determines which CSS rule takes precedence when multiple rules apply to the same element. The more specific a rule is, the higher its specificity, and the more likely it is to be applied.

Specificity Hierarchy (from least to most specific):

User-agent stylesheet: The browser’s default styles.
Normal element selectors (e.g., p, h1) and pseudo-elements (e.g., ::before, ::after)
Class selectors (e.g., .my-class), attribute selectors (e.g., [type=”text”]), and pseudo-classes (e.g., :hover, :focus)
ID selectors (e.g., #my-id)
Inline styles (using the style attribute)
!important rule: Overrides all other specificity rules (use sparingly!).

Calculating Specificity (Simplified): You can think of specificity as a four-part value (a, b, c, d):
a: 1 if the style is inline, 0 otherwise.
b: The number of ID selectors.
c: The number of class selectors, attribute selectors, and pseudo-classes.
d: The number of element selectors and pseudo-elements.
The rule with the higher value is applied. For example:
* {} (0,0,0,0)
li {} (0,0,0,1)
li:hover {} (0,0,1,1)
.my-class {} (0,0,1,0)
#my-id {} (0,1,0,0)
style=”… “ (1,0,0,0)

Inheritance: Allows certain CSS properties to be inherited from parent elements to their child elements. For example, the color and font-family properties are typically inherited.

Properties that are typically inherited: color, font, font-family, font-size, font-weight, letter-spacing, line-height, text-align, text-indent, text-transform, visibility.

Properties that are NOT typically inherited: background, border, display, margin, padding, position, width, height.

inherit keyword: You can explicitly force a property to inherit its value from its parent element using the inherit keyword.

p {   color: inherit; /* Inherit the color from the parent element */ }

initial keyword: You can set a property to its default value using the initial keyword.

p {   color: initial; /* Set the color to its default value */ }

unset keyword: This is a shorthand to reset the property to its inherited value if it naturally inherits from its parent or to its initial value if not.
p { color: unset; }
Example:

<!DOCTYPE html>
<html>

<head>
    <title>Specificity and Inheritance Example</title>
    <style>
        body {
            color: blue;
            /* Inherited by all elements */
        }

        p {
            color: green;
            /* More specific than body */
        }

        .my-class {
            color: red;
            /* More specific than p */
        }

        #my-id {
            color: orange;
            /* More specific than .my-class */
        }
    </style>
</head>

<body>
    <p class="my-class" id="my-id" style="color: yellow;"> This is a paragraph. </p>
</body>

</html>

In this example, the paragraph will be yellow because inline styles have the highest specificity.

1.6 CSS Box Model

Explanation: The CSS box model is a fundamental concept that describes how HTML elements are rendered on a web page. Each element is treated as a rectangular box with the following components:

Content: The actual content of the element (e.g., text, images).
Padding: The space between the content and the border.
Border: A line that surrounds the padding and content.
Margin: The space between the border and the outside of the element.
Box Model Properties:
width: Specifies the width of the content area.
height: Specifies the height of the content area.
padding: Specifies the amount of padding on all four sides of the element (e.g., padding: 10px;). You can also set padding for individual sides: padding-top, padding-right, padding-bottom, padding-left.
border: Specifies the style, width, and color of the border (e.g., border: 1px solid black;). You can also set border properties for individual sides: border-top, border-right, border-bottom, border-left.
margin: Specifies the amount of margin on all four sides of the element (e.g., margin: 20px;). You can also set margin for individual sides: margin-top, margin-right, margin-bottom, margin-left.

Visual Representation:

Important Note: The width and height properties, by default, only apply to the content area of the element. The total width and height of the element are calculated as follows:
Total Width: width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
Total Height: height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
This can sometimes be confusing, especially when working with responsive layouts. The box-sizing property (covered in Chapter 5) provides a way to change this behavior.

Chapter 2: CSS Selectors

2.1 Basic Selectors: Element, ID, and Class Selectors

Explanation: These are the most commonly used selectors in CSS.

Element Selector: Selects all HTML elements of a specific type.

p {   
  /* Styles for all paragraph elements */   
  font-size: 16px;   
  line-height: 1.5; 
}  
h1 {   
  /* Styles for all h1 heading elements */   
  color: blue; 
}

ID Selector: Selects a single HTML element with a specific id attribute. ID selectors are very specific. Use them sparingly, primarily for unique elements or when you need to override other styles. ID values must be unique within a document.

<!DOCTYPE html>
<html>

<head>
    <title>Specificity and Inheritance Example</title>
    <style>
        #my-paragraph {
            /* Styles for the element with id="my-paragraph" */
            font-weight: bold;
        }
    </style>
</head>

<body>
    <p id="my-paragraph">This is a paragraph with a specific ID.</p>
</body>

</html>

Class Selector: Selects all HTML elements with a specific class attribute. Class selectors are more versatile than ID selectors, as you can apply the same class to multiple elements.

<!DOCTYPE html>
<html>

<head>
    <title>Specificity and Inheritance Example</title>
    <style>
        .highlight {
            /* Styles for all elements with class="highlight" */
            background-color: yellow;
        }
    </style>
</head>

<body>
    <p class="highlight">This paragraph will be highlighted.</p>
    <h2 class="highlight">This heading will also be highlighted.</h2>
</body>

</html>

Combining Selectors: You can combine element and class selectors for more specific targeting.

p.highlight {   
  /* Styles for all paragraph elements with class="highlight" */   
  color: red; 
}

**2.2 Universal Selector (*)**

Explanation: The universal selector (*) selects all HTML elements on the page. It is often used for CSS resets to remove default browser styles.

Example:

* {   
    /* Styles for all elements */   
    margin: 0;   
    padding: 0;   
    box-sizing: border-box; /* Very common reset */ 
}

Caution: Using the universal selector too broadly can impact performance, as it applies styles to every element on the page. It’s generally best to use it for CSS resets or very specific purposes.

2.3 Grouping Selectors

Explanation: Grouping selectors allows you to apply the same styles to multiple elements at once. This reduces code duplication and makes your CSS more efficient.

Syntax: Separate the selectors with commas (,).

Example:

h1, h2, h3 {   
    /* Styles for h1, h2, and h3 elements */   
    font-family: Arial, sans-serif;   
    color: #333; 
}

2.4 Attribute Selectors

Explanation: Attribute selectors allow you to select HTML elements based on the presence or value of their attributes.

Types of Attribute Selectors:

[attribute]: Selects all elements with the specified attribute.

a[href] {   
  /* Styles for all anchor elements with an href attribute */   
  color: blue; 
}

[attribute=value]: Selects all elements with the specified attribute and value.

input[type="text"] {   
    /* Styles for all input elements with type="text" */   
    border: 1px solid #ccc; 
}

[attribute~=value]: Selects all elements with the specified attribute that contains the specified value as a whole word (separated by spaces).

<!DOCTYPE html>
<html>

<head>
    <title>Specificity and Inheritance Example</title>
    <style>
        img[alt~="flower"] {
            /* Styles for all img elements with an alt attribute that contains the word "flower" */
            border: 2px solid green;
        }
    </style>
</head>

<body>
    <img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="red flower image" />
    <img src="https://www.w3schools.com/html/img_girl.jpg" alt="flowerpot" />
</body>

</html>

[attribute|=value]: Selects all elements with the specified attribute that starts with the specified value, or where the value is exactly the specified value followed by a hyphen (-). This is often used for language codes.

<!DOCTYPE html>
<html>

<head>
    <title>Specificity and Inheritance Example</title>
    <style>
        p[lang|="en"] {
            /* Styles for all p elements with a lang attribute that starts with "en" */
            color: green;
        }
    </style>
</head>
<body>
    <p lang="en">English paragraph</p>
    <p lang="en-US">English (US) paragraph</p>
    <p lang="fr">French paragraph</p>
</body>
</html>

[attribute^=value]: Selects all elements with the specified attribute that starts with the specified value.

a[href^="https"] {   
  /* Styles for all anchor elements with an href attribute that starts with "https" */   
  font-weight: bold; 
}

[attribute$=value]: Selects all elements with the specified attribute that ends with the specified value.

a[href$=".pdf"] {   
    /* Styles for all anchor elements with an href attribute that ends with ".pdf" */   
    background-color: #eee; 
}

[attribute*=value]: Selects all elements with the specified attribute that contains the specified value anywhere within the string.

img[src*="logo"] {   
    /* Styles for all img elements with a src attribute that contains the word "logo" */   
    border: 1px solid blue; 
}

2.5 Pseudo-classes

Explanation: Pseudo-classes are used to style elements based on their state or position in the document tree. They allow you to select elements that cannot be selected using simple selectors.

Syntax: selector:pseudo-class

Common Pseudo-classes:

:hover: Styles an element when the mouse pointer is over it.

a:hover {   
  /* Styles for anchor elements when the mouse is over them */   
  color: red; 
}

:active: Styles an element when it is being activated (e.g., when a button is being clicked).

button:active {   
  /* Styles for button elements when they are being clicked */   
  background-color: #ccc; 
}

:focus: Styles an element when it has focus (e.g., when an input field is selected). Important for accessibility.

input:focus {   
  /* Styles for input elements when they have focus */   
  border: 2px solid blue; 
}

:visited: Styles a link that has been visited. Due to security restrictions, only a limited number of properties can be styled with :visited.

a:visited {   
  /* Styles for visited links */   
  color: purple; 
}

:link: Styles a link that has not been visited.

a:link {   
  /* Styles for unvisited links */   
  color: blue; 
}

:first-child: Styles the first child element of another element.

li:first-child {   
  /* Styles for the first li element in a ul or ol */   
  font-weight: bold; 
}

:last-child: Styles the last child element of another element.

li:last-child {   
  /* Styles for the last li element in a ul or ol */   
  border-bottom: none; 
}

:nth-child(n): Styles an element that is the nth child of another element. n can be a number, a keyword (even, odd), or a formula (an + b).

tr:nth-child(even) {   
  /* Styles for every even row in a table */   
  background-color: #f2f2f2; 
}  
li:nth-child(3n+1) {
  /* Styles for every third item in the list, starting with the first item */ 
}

:nth-of-type(n): Similar to :nth-child(n), but only counts elements of the same type.

p:nth-of-type(2) {   
  /* Styles for the second paragraph element within its parent */   
  font-style: italic; 
}

:not(selector): Styles elements that do not match the specified selector.

input:not([type="submit"]) {   
  /* Styles for all input elements that are NOT of type "submit" */   
  border: 1px solid #ccc; 
}

:empty: Selects elements that have no children (including text nodes).

div:empty {   
  display: none; /* Hide empty divs */ 
}

2.6 Pseudo-elements

Explanation: Pseudo-elements are used to style specific parts of an element. They allow you to create styles that cannot be achieved using regular selectors.

Syntax: selector::pseudo-element (Note the double colon ::)

Common Pseudo-elements:

::first-line: Styles the first line of a block-level element.

p::first-line {   
  /* Styles for the first line of all paragraph elements */   
  font-weight: bold; 
}

::first-letter: Styles the first letter of a block-level element.

p::first-letter {   
  /* Styles for the first letter of all paragraph elements */   
  font-size: 2em; 
}

::before: Inserts content before an element. Often used with the content property.

h2::before {   
  /* Inserts content before all h2 elements */   
  content: ">> ";   
  color: red; 
}

::after: Inserts content after an element. Often used with the content property.

a::after {   
  /* Adds an arrow after external links */   
  content: " ↗";   
  color: gray; 
}

::selection: Styles the portion of an element that is selected by the user.

::selection {   
  /* Styles for selected text */   
  background-color: yellow;   
  color: black; 
}

Important Notes:
Pseudo-elements are inserted inside the element.
The content property is required for ::before and ::after.
::before and ::after create inline elements by default. You can change this using the display property (e.g., display: block;).
The single colon (:) syntax was used for both pseudo-classes and pseudo-elements in older versions of CSS. The double colon (::) was introduced in CSS3 to distinguish between them. Browsers generally support both syntaxes for older pseudo-elements (like :before and :after), but it’s best to use the double colon for new pseudo-elements.

Chapter 3: Text and Font Styling

3.1 Font Properties: font-family, font-size, font-weight, font-style, font-variant

Explanation: These properties control the appearance of text by specifying the font family, size, weight (boldness), style (italic), and variant (small caps).

font-family: Specifies the font to be used for the text. You can specify multiple font families as a fallback list. If the first font is not available, the browser will try the second, and so on. It’s important to include a generic font family (e.g., sans-serif, serif, monospace) as the last item in the list.

p {   
  font-family: "Times New Roman", Times, serif; 
}  
h1 {     
  font-family: Arial, Helvetica, sans-serif; 
}

font-size: Specifies the size of the font. Common units:

px (pixels): Absolute size.
em: Relative to the font size of the parent element. 1em is equal to the parent’s font size.
rem: Relative to the font size of the root element (<html>).
%: Relative to the font size of the parent element.
vw (viewport width): Relative to 1% of the viewport’s width.
vh (viewport height): Relative to 1% of the viewport’s height.

body {   
  font-size: 16px; /* Base font size for the entire page */ 
}  
h1 {   
  font-size: 2em; /* 2 times the base font size (32px) */ 
}  
p {   
  font-size: 1rem; /* Same as the base font size (16px) */ 
}

font-weight: Specifies the weight (boldness) of the font. Common values:

normal: Normal font weight (default).
bold: Bold font weight.
bolder: One level bolder than the parent element.
lighter: One level lighter than the parent element.
100–900: Numeric values representing font weights (e.g., 400 is normal, 700 is bold).

h1 {   
  font-weight: bold; 
}  
p {   
  font-weight: 400; /* Normal */ 
}

font-style: Specifies the style of the font. Common values:

normal: Normal font style (default).
italic: Italic font style.
oblique: Similar to italic, but less supported.

em { 
  font-style: italic; 
}

font-variant: Specifies the variant of the font. Common values:

normal: Normal font variant (default).
small-caps: Displays the text in small capital letters.

p {   
  font-variant: small-caps; 
}

font Shorthand Property: You can use the font shorthand property to set multiple font properties at once. The order is important:

/*    
  font: font-style font-variant font-weight font-size/line-height font-family;    
  font-style, font-variant and font-weight are optional    
  font-size and font-family are required */ 
p {   
  font: italic small-caps bold 16px/1.5 Arial, sans-serif; 
}  
/* The line-height is optional but if you use it,    you MUST include the font-size before it. */ 
p {   
  font: italic bold 16px Arial, sans-serif; /* font-style and font-weight are optional. */ 
}

3.2 Text Properties: color, text-align, text-decoration, text-transform, text-indent, letter-spacing, word-spacing, line-height, text-shadow

Explanation: These properties control the appearance and formatting of text.

color: Specifies the color of the text.

h1 {   color: #333; /* Dark gray */ }

text-align: Specifies the horizontal alignment of the text. Common values:

left: Aligns the text to the left (default).
right: Aligns the text to the right.
center: Centers the text.
justify: Justifies the text (stretches the text to fill the line).

p {   text-align: justify; }

text-decoration: Specifies decorations added to the text. Common values:

none: No decoration (default). Often used to remove underlines from links.
underline: Underlines the text.
overline: Adds a line above the text.
line-through: Adds a line through the text.

a {   text-decoration: none; /* Remove underline from links */ }

text-transform: Specifies the capitalization of the text. Common values:

none: No transformation (default).
uppercase: Converts the text to uppercase.
lowercase: Converts the text to lowercase.
capitalize: Capitalizes the first letter of each word.

h2 {   text-transform: uppercase; }

text-indent: Specifies the indentation of the first line of a block-level element.

p {   text-indent: 2em; /* Indent the first line by 2 ems */ }

letter-spacing: Specifies the space between letters.

h3 {   letter-spacing: 0.1em; /* Add 0.1em spacing between letters */ }

word-spacing: Specifies the space between words.

p {   word-spacing: 0.5em; /* Add 0.5em spacing between words */ }

line-height: Specifies the height of a line of text. A unitless value is relative to the element’s font size.

p {   line-height: 1.5; /* Line height is 1.5 times the font size */ }

text-shadow: Adds a shadow to the text. Syntax: text-shadow: h-shadow v-shadow blur-radius color;

h1 {   text-shadow: 2px 2px 4px #000000; /* Black shadow */ }

3.3 Google Fonts

Explanation: Google Fonts is a free library of hundreds of open-source fonts that you can use on your website.

How to Use Google Fonts:

Go to the Google Fonts website: https://fonts.google.com/
Browse and select the fonts you want to use.
Click the “+ Select this style” button for each style you want.
Click the “View selected families” icon.
Copy the <link> tag provided by Google Fonts and paste it into the <head> section of your HTML document.
Use the CSS rules provided by Google Fonts to apply the font to your elements.

<!DOCTYPE html>
<html>
<head>
  <title>Google Fonts Example</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }
  </style>
</head>
<body>
  <h1>This is a heading using Roboto font.</h1>
  <p>This is a paragraph using Roboto font.</p>
</body>
</html>

link rel=”preconnect”: These hints tell the browser to establish early connections to the Google Fonts servers, which can improve loading times.

family=Roboto:wght@400;700: Specifies that you want the Roboto font with weights 400 (regular) and 700 (bold).

3.4 Web Font Optimization

Explanation: Optimizing web fonts is important for improving the performance of your website. Large font files can slow down page loading times, which can negatively impact user experience and SEO.

Optimization Techniques:

Use WOFF2 format: WOFF2 is the most modern and efficient web font format. It provides better compression than other font formats.
Subset fonts: If you only need a small subset of characters from a font (e.g., basic Latin characters), you can subset the font to reduce its file size. Google Fonts allows you to specify the character sets you need in the URL (e.g., &subset=latin,latin-ext).
Use font-display property: The font-display property controls how fonts are displayed while they are loading. Common values:
swap: The text is displayed in a fallback font until the web font is loaded, then the web font is swapped in. This is generally the best option for usability.
fallback: The text is displayed in a fallback font for a short period of time, then the web font is swapped in. If the web font is not loaded within a certain time, the fallback font is used permanently.
optional: The browser decides whether to use the web font based on network conditions.
block: The text is hidden until the web font is loaded. Avoid this, as it can create a flash of invisible text (FOIT).

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

Host fonts locally: While using Google Fonts is convenient, hosting fonts locally gives you more control over caching and performance.
Preload fonts: Use the <link rel=”preload”> tag to tell the browser to download the font files as soon as possible.

<link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin>

Chapter 4: Colors, Backgrounds, and Gradients

4.1 Color Values: Hex, RGB, RGBA, HSL, HSLA, Named Colors

CSS offers several ways to specify colors for text, backgrounds, borders, and more. Here’s a breakdown of the common color value types:

1. Named Colors:

These are predefined color keywords (e.g., red, blue, green, black, white, orange, purple).
CSS recognizes a limited set of these names (around 140 standard names).
They are easy to understand and use for basic colors.
CSS

h1 {
  color: blue;
}

div {
  background-color: lightgreen;
}

2. Hexadecimal (Hex) Colors:

Represent colors using a six-digit hexadecimal number (base-16).
The format is #RRGGBB, where RR (red), GG (green), and BB (blue) are two-digit hexadecimal values (00 to FF).
Hex codes are widely used and concise.
CSS

p {
  color: #FF0000; /* Red */
}

span {
  background-color: #00FF00; /* Green */
}

.special-text {
  color: #336699; /* A shade of blue */
}

3. RGB (Red, Green, Blue):

Specifies colors using the rgb() function.
Takes three integer values (0 to 255) representing the intensity of red, green, and blue components.
CSS

h2 {
  color: rgb(255, 0, 0); /* Red */
}

article {
  background-color: rgb(0, 255, 0); /* Green */
}

.another-text {
  color: rgb(51, 102, 153); /* Same blue as #336699 */
}

4. RGBA (Red, Green, Blue, Alpha):

An extension of RGB that includes an alpha channel to control the color’s transparency.
Uses the rgba() function and takes four values: red, green, blue (0-255), and alpha (0.0 - fully transparent to 1.0 - fully opaque).
CSS

.transparent-red {
  background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
}

.slightly-transparent-green {
  color: rgba(0, 255, 0, 0.8); /* Slightly transparent green text */
}

5. HSL (Hue, Saturation, Lightness):

Represents colors based on the HSL color model.
Uses the hsl() function and takes three values:
Hue: The color’s position on the color wheel (0 to 360 degrees). 0 is red, 120 is green, 240 is blue.
Saturation: The intensity or purity of the color (0% — grayscale to 100% — fully saturated).
Lightness: The brightness of the color (0% — black to 100% — white, 50% is normal).
CSS

.vibrant-blue {
  color: hsl(240, 100%, 50%); /* Pure blue */
}

.light-pink {
  background-color: hsl(300, 70%, 80%); /* Light pink */
}

6. HSLA (Hue, Saturation, Lightness, Alpha):

An extension of HSL that includes an alpha channel for transparency.
Uses the hsla() function and takes four values: hue, saturation, lightness, and alpha (0.0 - transparent to 1.0 - opaque).
CSS

.transparent-yellow {
  background-color: hsla(60, 100%, 50%, 0.3); /* Semi-transparent yellow */
}

.faded-purple-text {
  color: hsla(270, 50%, 60%, 0.7); /* Slightly faded purple text */
}

Choosing the Right Color Value:

Named colors: Good for quick styling and readability for basic colors.
Hex: Widely supported, concise, and often used for precise color matching.
RGB: Useful when you have color values from image editing software or need to perform calculations on color components.
RGBA: Essential for adding transparency to colors.
HSL: More intuitive for understanding color relationships (e.g., creating variations of a color by adjusting lightness or saturation).
HSLA: Combines the benefits of HSL with transparency control.

4.2 Background Properties

CSS provides several properties to control the background of HTML elements:

1. background-color:

Sets the background color of an element.
Accepts any valid CSS color value (hex, RGB, RGBA, HSL, HSLA, named colors).
CSS

body {
  background-color: #f0f0f0; /* Light gray background */
}

.header {
  background-color: rgba(0, 0, 0, 0.9); /* Slightly transparent black background */
  color: white;
}

2. background-image:

Sets one or more background images for an element.
Uses the url() function to specify the path to the image file.
You can specify multiple background images by separating their URLs with commas.
CSS

.hero {
  background-image: url('images/hero-image.jpg');
  color: white;
  padding: 50px;
  text-align: center;
}

.layered-background {
  background-image: url('images/pattern.png'), url('images/overlay.png');
  background-repeat: repeat, no-repeat;
  background-position: top left, center;
}

3. background-repeat:

Controls how a background image is repeated.

Possible values:

repeat (default): Repeats the image both horizontally and vertically.
repeat-x: Repeats the image horizontally.
repeat-y: Repeats the image vertically.
no-repeat: 1 The image is displayed only once.
space: Repeats the image as much as possible without clipping, distributing space evenly between the images.
round: Repeats the image as much as possible without clipping, scaling the images if needed so that no partial images are displayed.
CSS

.pattern-bg {
  background-image: url('images/small-pattern.png');
  background-repeat: repeat;
}

.single-image-bg {
  background-image: url('images/large-image.jpg');
  background-repeat: no-repeat;
}

.repeat-x-bg {
  background-image: url('images/horizontal-line.png');
  background-repeat: repeat-x;
}

4. background-position:

Specifies the initial position of the background image(s).
Can take keyword values (e.g., top, bottom, left, right, center) and/or pixel or percentage values.
For multiple background images, specify the position for each image separated by commas.
CSS

.positioned-bg {
  background-image: url('images/icon.png');
  background-repeat: no-repeat;
  background-position: top right;
  padding: 20px; /* Ensure space for the icon */
}

.complex-position {
  background-image: url('images/image1.png'), url('images/image2.png');
  background-repeat: no-repeat, no-repeat;
  background-position: 10px 20px, center bottom;
  height: 300px; /* Ensure element has height */
}

5. background-size:

Specifies the size of the background image(s).

Possible values:

auto (default): The image is displayed at its original size.
contain: Scales the image to fit within the element while preserving its aspect ratio. The entire image will be visible.
cover: Scales the image to cover the entire element while preserving its aspect ratio. The image might be cropped.
<length>: Sets the width and height of the image explicitly (e.g., 100px 50px). If only one value is provided, the other is set to auto.
<percentage>: Sets the width and height of the image as a percentage of the background positioning area (the element's content box).
CSS

.contain-bg {
  background-image: url('images/large-image.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  height: 300px;
  border: 1px solid black;
}

.cover-bg {
  background-image: url('images/wide-image.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  height: 300px;
  color: white;
  text-align: center;
  padding-top: 100px;
}

.fixed-size-bg {
  background-image: url('images/small-icon.png');
  background-repeat: no-repeat;
  background-size: 50px 50px;
  padding-left: 60px; /* Make space for the icon */
}

6. background-attachment:

Sets whether a background image is fixed with regard to the viewport or scrolls with its containing block.

Possible values:

scroll (default): The background image scrolls with the element.
fixed: The background image is fixed with regard to the viewport. It won't scroll even if the element's content does.
local: The background image scrolls with the element's content. If the element has a scrollbar, the background will scroll within that scrollable area.
CSS

body {
  background-image: url('images/large-background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; /* Fixed background */
  color: white;
  padding-top: 100px;
  min-height: 100vh; /* Ensure scrollable content */
}

.scrollable-div {
  background-image: url('images/small-pattern.png');
  background-repeat: repeat;
  height: 200px;
  overflow-y: scroll;
  border: 1px solid black;
  background-attachment: local; /* Background scrolls within the div */
}

The background Shorthand Property:

It’s often more convenient to use the background shorthand property to set multiple background properties at once.
The order of values doesn’t matter, but it’s recommended to follow a consistent order for readability: background: [color] [image] [repeat] [attachment] [position] / [size]
You can omit any of these values.
CSS

.shorthand-bg {
  background: lightblue url('images/texture.png') repeat fixed top left / cover;
  color: white;
  padding: 50px;
  text-align: center;
}

.another-shorthand {
  background: red; /* Only sets background-color */
}

.image-only-bg {
  background: url('images/logo.png') no-repeat center; /* Sets image, repeat, and position */
  height: 100px; /* Ensure height to see the logo */
}

4.3 CSS Gradients

CSS gradients allow you to display smooth transitions between two or more colors. There are three main types of gradients:

1. Linear Gradients:

Create a gradient that progresses in a straight line.
Use the linear-gradient() function.
You need to specify at least two colors. You can also specify a direction or angle.
CSS

.linear-gradient-top-bottom {
  background-image: linear-gradient(to bottom, red, yellow); /* Starts red at the top, goes to yellow at the bottom */
  height: 100px;
}

.linear-gradient-left-right {
  background-image: linear-gradient(to right, blue, green); /* Starts blue on the left, goes to green on the right */
  height: 100px;
}

.linear-gradient-angle {
  background-image: linear-gradient(45deg, purple, orange); /* Gradient at a 45-degree angle */
  height: 100px;
}

.linear-gradient-stops {
  background-image: linear-gradient(to right, red 20%, yellow 60%, green 80%); /* Color stops at specific percentages */
  height: 100px;
}

Direction: You can specify the direction using keywords (to top, to bottom, to left, to right, to top left, to bottom right, etc.) or an angle in degrees (deg). 0deg is equivalent to to top, 90deg to to right, 180deg to to bottom, and 270deg to to left.
Color Stops: You can define multiple colors and their positions along the gradient line using percentages or lengths.

2. Radial Gradients:

Create a gradient that radiates outwards from a center point.
Use the radial-gradient() function.
You need to specify at least two colors. You can also define the shape, size, and position of the gradient.
CSS

.radial-gradient-circle {
  background-image: radial-gradient(circle, red, yellow); /* Circular gradient, red in the center */
  height: 100px;
}

.radial-gradient-ellipse {
  background-image: radial-gradient(ellipse, blue, green); /* Elliptical gradient */
  height: 100px;
}

.radial-gradient-position {
  background-image: radial-gradient(circle at top left, purple, orange); /* Gradient starting at the top-left corner */
  height: 100px;
}

.radial-gradient-size {
  background-image: radial-gradient(closest-side at center, cyan, magenta); /* Gradient extends to the closest side */
  height: 100px;
}

.radial-gradient-stops {
  background-image: radial-gradient(circle, red 0%, yellow 40%, green 100%); /* Color stops in a radial gradient */
  height: 100px;
}

Shape: Can be circle or ellipse (default).

Size: Determines the extent of the gradient. Possible values include:

closest-side: Extends to the closest side of the element.
farthest-side: Extends to the farthest side of the element.
closest-corner: Extends to the closest corner of the element.
farthest-corner (default): Extends to the farthest corner of the element.
<length> and <percentage>: Explicitly define the radius (for circles) or radii (for ellipses).

Position: Specifies the center point of the gradient using keywords (e.g., center, top left, bottom right) or pixel/percentage values. The syntax is at <x-position> <y-position>.

3. Conic Gradients:

Create a gradient that progresses around a center point, like a color wheel.
Use the conic-gradient() function.
You need to specify at least two colors. You can also define the starting angle and the center position.
CSS

.conic-gradient-basic {
  background-image: conic-gradient(red, yellow, green); /* Basic conic gradient */
  width: 100px;
  height: 100px;
  border-radius: 50%; /* Make it circular */
}

.conic-gradient-angle {
  background-image: conic-gradient(from 90deg, blue, white); /* Starts at 90 degrees */
  width: 100px;
  height: 100px;
  border-radius: 50%;

Chapter 5: The CSS Box Model in Detail

5.1 Understanding the Box Model: Content, Padding, Border, Margin

Concept: The CSS Box Model is a fundamental concept in CSS that treats every HTML element as a rectangular box. This box is composed of several layers: the content itself, padding around the content, a border surrounding the padding, and a margin outside the border. Understanding how these layers interact is crucial for controlling the size and spacing of elements on a webpage.

Explanation and Visual Representation:

Think of each HTML element as being wrapped in a series of boxes, one inside the other:

+-----------------------------------------------------+
|                    Margin (Outside)                  |  (Clear Space)
|  +-------------------------------------------------+  |
|  |                 Border                        |  |  | (Visible Outline)
|  |  +-----------------------------------------+  |  |  |
|  |  |               Padding                   |  |  |  | (Internal Space)
|  |  |  +---------------------------------+  |  |  |  |
|  |  |  |             Content               |  |  |  |  | (Text, Images, etc.)
|  |  |  +---------------------------------+  |  |  |  |
|  |  |               Padding                   |  |  |  |
|  |  +-----------------------------------------+  |  |  |
|  |                 Border                        |  |  |
|  +-------------------------------------------------+  |
|                    Margin                           |
+-----------------------------------------------------+

Content: This is the actual content of the element, such as text, images, videos, or other nested HTML elements. The size of the content area is determined by the width and height properties (or its inherent size if not specified).

Padding: The space between the content and the border. Padding is used to create visual space inside the element. It’s specified using the padding property, and its sub-properties padding-top, padding-right, padding-bottom, and padding-left.

Border: A line that surrounds the padding and content. Borders are styled using the border property and its sub-properties like border-style, border-width, border-color, and border-radius. The border is part of the element’s size.

Margin: The space outside the border. Margins are used to create space between elements. They’re specified using the margin property and its sub-properties margin-top, margin-right, margin-bottom, and margin-left.

Examples:

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 200px;
  height: 100px;
  background-color: #eee;
  padding: 20px;
  border: 5px solid #ccc;
  margin: 30px;
}
</style>
</head>
<body>

<div class="box">
  This is the content of the box.
</div>

</body>
</html>

In this example:

The content area is 200px wide and 100px high.
There’s 20px of padding on all sides of the content.
There’s a 5px solid gray border surrounding the padding.
There’s 30px of margin outside the border.
Therefore, the total width of the element is:
margin-left(30) + border-left(5) + padding-left(20) + width(200) + padding-right(20) + border-right(5) + margin-right(30) = 310px
The total height of the element is:
margin-top(30) + border-top(5) + padding-top(20) + height(100) + padding-bottom(20) + border-bottom(5) + margin-bottom(30) = 210px

5.2 Box Sizing: content-box, border-box

Concept: The box-sizing property controls how the width and height properties are calculated for an element. It determines whether the border and padding are included in the element’s specified width and height.

Explanation:

content-box: This is the default value. The width and height properties only apply to the content area of the element. The padding and border are added on top of the specified width and height, increasing the element’s overall size. This is often the source of confusion when calculating element sizes.

Total width = width + padding-left + padding-right + border-left + border-right
Total height = height + padding-top + padding-bottom + border-top + border-bottom

border-box: The width and height properties now include the content, padding, and border. The specified width and height become the total width and height of the element. The content area shrinks to accommodate the padding and border. This makes it much easier to reason about the size of elements, especially when creating responsive layouts.

Total width = width (which includes content + padding + border)
Total height = height (which includes content + padding + border)
Example:

<!DOCTYPE html>
<html>
<head>
<style>
.content-box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box; /* Default */
}

.border-box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}
</style>
</head>
<body>

<div class="content-box">content-box</div>
<div class="border-box">border-box</div>

</body>
</html>

In this example, both divs have a declared width of 200px and a height of 100px, with 20px padding and a 5px border.
The .content-box div will have a total width of 250px (200 + 20 + 20 + 5 + 5) and a total height of 150px. The content area will remain 200px x 100px.
The .border-box div will have a total width of 200px and a total height of 100px. The content area will shrink to 150px x 50px to accommodate the padding and border.

Best Practice: It’s generally recommended to use box-sizing: border-box; for all elements on your page using the universal selector. This makes layout calculations much more predictable:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

This approach makes border-box the default, but allows individual elements to override if necessary.

5.3 Margin Collapsing

Concept: Margin collapsing is a behavior in CSS where the top and bottom margins of adjacent block-level elements can collapse into a single margin, equal to the larger of the two margins. This behavior can sometimes be unexpected, but it’s important to understand how it works.

Explanation:

Margin collapsing occurs in the following situations:

Adjacent Siblings: When two block-level elements are siblings (i.e., they have the same parent), and there is no border, padding, or content separating them, their top and bottom margins can collapse.

<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
  margin-bottom: 50px;
}

.box2 {
  margin-top: 30px;
}
</style>
</head>
<body>

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

</body>
</html>

In this case, the margin between the two boxes will be 50px (the larger of 50px and 30px), not 80px.

2. Parent and First/Last Child: If a block-level element has no border, padding, inline content, or clearance to separate its top or bottom margin from the top or bottom margin of one or more of its block-level children, then those margins collapse. This is more complex than the adjacent sibling rule.

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  margin-top: 40px;
}

.child {
  margin-top: 60px;
}
</style>
</head>
<body>

<div class="parent">
  <div class="child">Child</div>
</div>

</body>
</html>

Here, the margin-top of the child (60px) collapses with the margin-top of the parent (40px). The resulting visible margin above the parent will be 60px, not 100px.

3. Empty Blocks: If a block-level element has a height of auto, a min-height of 0, no borders, no padding, and contains no inline content, then its top and bottom margins collapse.

Preventing Margin Collapsing:

You can prevent margin collapsing by:
Adding a border or padding to the parent element.
Adding inline content to the parent element.
Setting the parent element’s overflow property to a value other than visible (e.g., auto, hidden). This creates a new formatting context.
Using Flexbox or Grid layout, which have different rules for margin handling.

Why does it exist? Margin collapsing is designed to create more visually pleasing and predictable spacing between text-based elements. It’s less common to want to stack margins in typical document layouts.

5.4 Visual Formatting Model

Concept: The Visual Formatting Model describes how user agents (browsers) process the document tree for display. It’s a complex set of rules that govern how boxes are generated, laid out, and rendered. Understanding the VFM is essential for mastering CSS layout.

Key Concepts:

Document Tree: The tree-like structure of HTML elements in a document.
Formatting Context: A region in which the layout of boxes is governed by a particular set of rules. Examples include block formatting contexts, inline formatting contexts, flex formatting contexts, and grid formatting contexts.
Block-level Elements: Elements that generate a block-level box. They typically start on a new line and take up the full width available. Examples: <div>, <p>, <h1>-<h6>.
Inline-level Elements: Elements that generate an inline-level box. They flow within a line of text and only take up as much width as necessary. Examples: <span>, <a>, <img>.
Positioning Scheme: Determines how an element is positioned on the page. The position property controls the positioning scheme:

normal flow: default
static: Elements are laid out in the normal flow.
relative: Elements are positioned relative to their normal position.
absolute: Elements are positioned relative to their nearest positioned ancestor (an ancestor with position other than static). If there is no positioned ancestor, the element is positioned relative to the initial containing block (the <html> element).
fixed: Elements are positioned relative to the viewport.
sticky: Elements are positioned based on the user’s scroll position

Block Formatting Context (BFC):

A BFC is a region in which the layout of block-level boxes is governed by a particular set of rules. Each element participates in a BFC.

Rules of a BFC:

The left outer edge of each box touches the left edge of the containing block (for left-to-right languages).
Vertical distance between boxes is determined by the margin property. Vertical margins between adjacent block-level boxes in a BFC collapse.
The height of a containing block is calculated based on the height of its children.
Floats participate in the BFC.
Creating a BFC: An element creates a new BFC if any of the following are true:
The value of float is not none.
The value of position is neither static nor relative.
The value of display is inline-block, table-cell, table-caption, flex, inline-flex, grid, or inline-grid.
The overflow property has a value other than visible.
The contain property has a value other than none.

Inline Formatting Context (IFC):

The IFC governs the layout of inline-level boxes.
Inline-level boxes are laid out horizontally, one after the other, within a line box.
When the horizontal space is not sufficient to contain all inline-level boxes within a single line, the boxes are split into several lines.
Vertical alignment of inline-level boxes within a line box is controlled by the vertical-align property.

Understanding the VFM:

The VFM is a complex topic, and fully understanding it requires studying the CSS specifications.
By understanding the basic concepts of the VFM, you can better understand how elements are laid out on a webpage and how to control their positioning and spacing.
The VFM explains why certain CSS properties behave the way they do and why margin collapsing occurs.

Chapter 6: CSS Layouts

6.1 Display Property: block, inline, inline-block, none, etc.

Concept: The display property is one of the most fundamental CSS properties for controlling layout. It determines the type of box an element generates, which affects how it behaves in the visual formatting model.

Explanation and Values:

block:

The element generates a block-level box.
It takes up the full width available to it (unless a specific width is set).
It starts on a new line.
width and height properties are respected.
padding, border, and margin apply on all four sides.
Examples: <div>, <p>, <h1> — <h6>, <form>, <ul>, <ol>, <li>

div {
  display: block;
  width: 300px;
  margin-bottom: 20px;
}

inline:

The element generates an inline-level box.
It flows within a line of text.
It only takes up as much width as its content requires.
width and height properties are ignored.
Only horizontal padding, border, and margin apply. Vertical padding, border, and margin are respected but may overlap other content.
Examples: <span>, <a>, <img>, <em>, <strong>

a {
  display: inline;
  padding: 5px 10px; /* Only horizontal padding will be visually effective */
}

inline-block:

The element generates a block-level box that flows inline, like an inline-level element.
It flows within a line of text, but it respects width and height properties.
padding, border, and margin apply on all four sides.
It’s essentially a hybrid of inline and block.
Commonly used for creating navigation menus or arranging elements side-by-side.

li {
  display: inline-block;
  width: 100px;
  margin-right: 10px;
}

none:

The element is completely removed from the document flow.
It does not take up any space on the page.
It’s as if the element doesn’t exist in the HTML.
Use this instead of visibility: hidden if you don’t want the element to take up space.

.hidden {
  display: none;
}

flex:

The element becomes a flex container, enabling Flexbox layout.
We’ll cover Flexbox in detail later in this chapter.

.container {
  display: flex;
}

grid:

The element becomes a grid container, enabling CSS Grid layout.
We’ll cover CSS Grid in detail later in this chapter.

.grid-container {
  display: grid;
}

.grid-container { display: grid; }

table, table-row, table-cell, etc.:

These values allow you to format elements like HTML tables, even if they are not actual <table> elements.
Generally discouraged in modern web development; Flexbox and Grid are better alternatives for most layout tasks.

6.2 Positioning: static, relative, absolute, fixed, sticky

Concept: The position property determines how an element is positioned within its containing element or the viewport.

Explanation and Values:

static:

This is the default value.
The element is positioned according to the normal document flow.
top, right, bottom, and left properties have no effect.

p {
  position: static; /* Default */
}

relative:

The element is positioned relative to its normal position in the document flow.
It still takes up space in the normal flow, even though it may be visually offset.
top, right, bottom, and left properties are used to offset the element from its normal position.
Very useful for small adjustments or creating stacking contexts.

.relative {
  position: relative;
  top: 20px;
  left: 30px;
}

This would move the element 20px down and 30px to the right from where it would normally be.

absolute:

The element is removed from the normal document flow.
It does not take up space, and other elements flow as if it weren’t there.
It’s positioned relative to its nearest positioned ancestor (an ancestor with position: relative, absolute, fixed, or sticky).
If there is no positioned ancestor, it’s positioned relative to the initial containing block (the <html> element).
top, right, bottom, and left properties are used to specify the offset from the edges of the containing block.

.container {
  position: relative; /* Needed to position the absolute element */
  width: 400px;
  height: 300px;
}

.absolute {
  position: absolute;
  top: 50px;
  right: 20px;
}

This will position .absolute 50px from the top and 20px from the right inside the .container element.

fixed:

The element is removed from the normal document flow and does not take up space.
It’s positioned relative to the viewport (the browser window).
It remains in the same position even when the page is scrolled.
top, right, bottom, and left properties are used to specify the offset from the edges of the viewport.
Commonly used for creating fixed navigation bars or footers.

.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: white;
}

sticky:

The element is initially positioned according to the normal document flow (static).
When the element scrolls to a certain point (specified by top, right, bottom, or left), it becomes “stuck” and behaves like fixed.
Requires a threshold to be set (e.g., top: 0).
Useful for creating section headings that stick to the top of the viewport as the user scrolls.

h2 {
  position: sticky;
  top: 0;
  background-color: white;
  padding: 10px;
}

z-index Property: The z-index property controls the stacking order of positioned elements that overlap. Elements with a higher z-index value are stacked on top of elements with a lower z-index value. z-index only works on positioned elements (position: relative, absolute, fixed, or sticky).

.box1 {
  position: relative;
  z-index: 1;
}

.box2 {
  position: relative;
  z-index: 2; /* Box2 will be on top of Box1 */
}

6.3 Floats and Clearfix

Concept: Floats were one of the early methods for creating multi-column layouts in CSS. While they are still used in some cases, Flexbox and Grid are generally preferred for more complex layouts. Floats essentially move an element to the left or right side of its container, allowing other content to wrap around it.

Explanation:

float Property: The float property can have the following values:

left: Floats the element to the left side of its container.
right: Floats the element to the right side of its container.
none: The element does not float (default).

img {
  float: left;
  margin-right: 10px;
}

The “Float Drop” Problem: When an element is floated, it’s taken out of the normal document flow. This can cause the containing element to collapse if it doesn’t have any other content. This is known as the “float drop” or “containing element collapse” problem.

Clearfix Technique: The clearfix technique is used to prevent the float drop problem by forcing the containing element to expand to contain its floated children. There are several ways to implement a clearfix, but the most common method involves using the ::after pseudo-element:

.clearfix::after {
  content: "";
  display: table; /* Or block */
  clear: both;
}

content: “”: Required for the ::after pseudo-element to work.
display: table or display: block: Creates a block-level or table-cell box, which helps to clear the floats.
clear: both: Forces the element to be displayed below any floated elements.
To use the clearfix, you simply add the clearfix class to the containing element:

<div class="container clearfix">
  <img src="image.jpg" alt="Image" style="float: left;">
  <p>This is some text that wraps around the image.</p>
</div>

Why Use Floats?

Historically, floats were a primary method for creating layouts.
They can still be useful for simple layouts where you want text to wrap around an image.

Limitations:

Can be difficult to control complex layouts.
The float drop problem requires the use of clearfix techniques.
Flexbox and Grid are generally better alternatives for most layout tasks.

6.4 Introduction to Flexbox

Concept: Flexbox (Flexible Box Layout Module) is a powerful CSS layout model that provides an efficient way to arrange, align, and distribute items within a container, even when their size is unknown or dynamic. It is designed for one-dimensional layouts (either rows or columns).

Key Concepts:

Flex Container: The parent element that contains the flex items. To make an element a flex container, set its display property to flex or inline-flex.

Flex Items: The children of the flex container. These are the elements that are being laid out using Flexbox.

Basic Example:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: #f0f0f0;
}

.flex-item {
  background-color: #ccc;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

</body>
</html>

Key Flex Container Properties:

flex-direction: Specifies the direction of the flex items.
row (default): Items are arranged horizontally.
column: Items are arranged vertically.
row-reverse: Items are arranged horizontally in reverse order.
column-reverse: Items are arranged vertically in reverse order.
justify-content: Specifies how flex items are aligned along the main axis (horizontal for row, vertical for column).
flex-start (default): Items are aligned to the start of the container.
flex-end: Items are aligned to the end of the container.
center: Items are centered within the container.
space-between: Items are evenly distributed, with the first item at the start and the last item at the end.
space-around: Items are evenly distributed, with equal space around each item.
align-items: Specifies how flex items are aligned along the cross axis (vertical for row, horizontal for column).
stretch (default): Items are stretched to fill the container.
flex-start: Items are aligned to the start of the container.
flex-end: Items are aligned to the end of the container.
center: Items are centered within the container.
baseline: Items are aligned to their baselines.
flex-wrap: Specifies whether flex items should wrap to multiple lines if they don’t fit on one line.
nowrap (default): Items do not wrap.
wrap: Items wrap to multiple lines.
wrap-reverse: Items wrap to multiple lines in reverse order.

Flex Item Properties: We’ll delve into more details in the Flexbox Chapter

order: determines the order the flex items will be display
flex-grow: determines how much the item will grow relative to the other flexible items
flex-shrink: specifies how the item will shrink relative to the others
flex-basis: specifies the initial length of a flexible item.

6.5 Introduction to CSS Grid

Concept: CSS Grid Layout Module is a powerful layout system that allows you to create complex two-dimensional layouts (both rows and columns) with precise control over the positioning and sizing of elements.

Key Concepts:

Grid Container: The parent element that contains the grid items. To make an element a grid container, set its display property to grid or inline-grid.

Grid Items: The children of the grid container. These are the elements that are being laid out using CSS Grid.

Grid Lines: The horizontal and vertical lines that define the structure of the grid.

Grid Tracks: The spaces between grid lines (rows and columns).

Grid Cells: The individual rectangular areas within the grid.

Grid Areas: One or more contiguous grid cells.

Basic Example:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto; /* Three columns, each with auto width */
  background-color: #f0f0f0;
  padding: 10px;
}

.grid-item {
  background-color: #ccc;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

</body>
</html>

Key Grid Container Properties:

grid-template-columns: Defines the number and width of the columns in the grid. You can use fixed sizes (e.g., 100px), percentages, or the fr unit (fractional unit, distributes available space).
grid-template-rows: Defines the number and height of the rows in the grid.
grid-gap: Specifies the gap between grid items (shorthand for grid-row-gap and grid-column-gap).
justify-items: Aligns items along the inline (row) axis (similar to align-items in Flexbox).
align-items: Aligns items along the block (column) axis (similar to justify-content in Flexbox).

Grid Item Properties: We’ll cover this properties in detail in the Grid chapter

grid-column-start, grid-column-end, grid-row-start and grid-row-end: determine where the item will start and end

6.6 Multicolumn Layout

Concept: The CSS Multicolumn Layout Module provides a way to easily create newspaper-style layouts with content flowing into multiple columns. It is a simpler alternative to Flexbox or Grid for creating basic multi-column layouts.

Properties:

column-count: Specifies the number of columns an element should be divided into.
column-width: Specifies the ideal width of each column. The actual number of columns may vary depending on the available space.
column-gap: Specifies the gap between columns.
column-rule-style, column-rule-width, column-rule-color: Specifies the style, width, and color of the rule (line) between columns (shorthand: column-rule).
column-span: Specifies how many columns an element should span across (only applies to elements within a multicolumn container).
1 (default): The element spans one column.
all: The element spans across all columns.
column-fill: Specifies how the content should be distributed across columns.
balance (default): Attempts to balance the content evenly across all columns.
auto: Columns are filled sequentially.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.multicolumn {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #ccc;
}

.full-width {
  column-span: all;
  text-align: center;
  font-size: 1.2em;
  margin-bottom: 20px;
}
</style>
</head>
<body>

<div class="multicolumn">
  <p class="full-width">This heading spans all columns.</p>
  <p>This is some text that will flow into multiple columns.</p>
  <p>This is some more text that will flow into multiple columns.</p>
  <p>This is even more text that will flow into multiple columns.</p>
  <p>And some more text to fill out the columns.</p>
  <p>The content will automatically balance between the columns.</p>
</div>

</body>
</html>

Use Cases:

Creating newspaper-style layouts for articles or long blocks of text.

Limitations:

Less flexible than Flexbox or Grid for complex layouts.

Chapter 7: Flexbox in detailed

7.1 Flex Container Properties: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

Concept: These properties are applied to the flex container (the parent element with display: flex or display: inline-flex) to control the overall layout and alignment of its flex items.

Explanation and Examples:

flex-direction: Defines the direction in which the flex items are placed within the container.
row (default): Items are placed horizontally, from left to right (in LTR languages). The main axis is horizontal.
row-reverse: Items are placed horizontally, from right to left (in LTR languages). The main axis is horizontal.
column: Items are placed vertically, from top to bottom. The main axis is vertical.
column-reverse: Items are placed vertically, from bottom to top. The main axis is vertical.

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: row; /* Try other values: row-reverse, column, column-reverse */
  background-color: #f0f0f0;
}

.flex-item {
  background-color: #ccc;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

</body>
</html>

flex-wrap: Specifies whether the flex items should wrap onto multiple lines if they don’t fit on a single line.
nowrap (default): Items are placed on a single line, which may cause them to overflow the container or shrink.
wrap: Items wrap onto multiple lines. The direction of the new lines is determined by flex-direction.
wrap-reverse: Items wrap onto multiple lines, but the order of the lines is reversed.

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap; /* Try other values: nowrap, wrap-reverse */
  background-color: #f0f0f0;
  width: 350px; /* Limit the width to force wrapping */
}

.flex-item {
  background-color: #ccc;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
</div>

</body>
</html>

flex-flow: A shorthand property for setting both flex-direction and flex-wrap in a single declaration. The order is flex-direction flex-wrap.

.flex-container {
  display: flex;
  flex-flow: row wrap; /* Equivalent to flex-direction: row; flex-wrap: wrap; */
}

justify-content: Aligns flex items along the main axis of the flex container. The main axis depends on the flex-direction.

flex-start: Items are packed towards the start line (left for row, top for column).
flex-end: Items are packed towards the end line (right for row, bottom for column).
center: Items are centered along the line.
space-between: Items are evenly distributed along the line. The first item is at the start, and the last item is at the end.
space-around: Items are evenly distributed along the line, with equal space around each item.
space-evenly: Items are evenly distributed, with equal space around them.

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: center; /* Try other values: flex-start, flex-end, space-between, space-around, space-evenly */
  background-color: #f0f0f0;
  height: 200px; /* Set a height to see vertical alignment */
}

.flex-item {
  background-color: #ccc;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

</body>
</html>

align-items: Aligns flex items along the cross axis of the flex container. The cross axis is perpendicular to the main axis.

stretch (default): Items are stretched to fill the container’s height (or width, if flex-direction is column).
flex-start: Items are aligned to the start of the container.
flex-end: Items are aligned to the end of the container.
center: Items are centered within the container.
baseline: Items are aligned so their baselines are aligned.

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: center; /* Try other values: flex-start, flex-end, stretch, baseline */
  background-color: #f0f0f0;
  height: 200px; /* Set a height to see vertical alignment */
}

.flex-item {
  background-color: #ccc;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

</body>
</html>

align-content: Controls the alignment of the flex lines when there is extra space in the cross axis. This property only has an effect when the flex container has multiple lines of items (i.e., when flex-wrap: wrap or flex-wrap: wrap-reverse is used).

stretch (default): The flex lines are stretched to fill the container.
flex-start: Lines are packed at the start of the container.
flex-end: Lines are packed at the end of the container.
center: Lines are packed in the center of the container.
space-between: Lines are evenly distributed, with the first line at the start and the last line at the end.
space-around: Lines are evenly distributed, with equal space around each line.
space-evenly: Lines are evenly distributed with equal space around them.

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around; /* Try other values: flex-start, flex-end, center, stretch, space-between, space-evenly */
  background-color: #f0f0f0;
  height: 400px; /* Set a height to see the effect */
  width: 350px; /* Limit width */
}

.flex-item {
  background-color: #ccc;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
</div>

</body>
</html>

Important Note: It’s crucial to remember that justify-content aligns items along the main axis, while align-items aligns items along the cross axis. The main and cross axes depend on the flex-direction. align-content only comes into play with multi-line flex containers (i.e., when flex-wrap is used).

7.2 Flex Item Properties: flex-grow, flex-shrink, flex-basis, flex, align-self, order

Concept: These properties are applied to the flex items (the children of the flex container) to control how they grow, shrink, and align within the container.

Explanation and Examples:

flex-grow: Specifies how much a flex item will grow relative to the other flex items in the container if there is extra space available along the main axis. The default value is 0 (items do not grow).

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: #f0f0f0;
  width: 500px; /* Set a width to see the effect */
}

.flex-item {
  background-color: #ccc;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

.flex-item-grow-1 {
  flex-grow: 1;
}

.flex-item-grow-2 {
  flex-grow: 2;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item flex-item-grow-1">1</div>
  <div class="flex-item flex-item-grow-2">2</div>
  <div class="flex-item">3</div>
</div>

</body>
</html>

In this example:

Item 1 has flex-grow: 1, Item 2 has flex-grow: 2, and Item 3 has the default flex-grow: 0.
The available space will be distributed proportionally. Item 2 will take up twice as much space as Item 1.

flex-shrink: Specifies how much a flex item will shrink relative to the other flex items in the container if there is not enough space available along the main axis. The default value is 1 (items can shrink). Set to 0 to prevent an item from shrinking.

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: #f0f0f0;
  width: 300px; /* Small width to force shrinking */
}

.flex-item {
  background-color: #ccc;
  width: 150px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

.flex-item-shrink-0 {
  flex-shrink: 0; /* Prevent this item from shrinking */
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item flex-item-shrink-0">2</div>
  <div class="flex-item">3</div>
</div>

</body>
</html>

In this example, item 2 will maintain its width of 150px, while item 1 and item 3 will shrink to fit the container.

flex-basis: Specifies the initial size of a flex item before any available space is distributed according to the flex-grow and flex-shrink properties. It can be specified as a length (e.g., 100px, 20%) or as the keyword auto. If set to auto, the item’s size is based on its content.

.flex-item {
  flex-basis: 100px; /* Initial size of the flex item */
}

flex: A shorthand property for setting flex-grow, flex-shrink, and flex-basis in a single declaration. The default value is 0 1 auto. Common values:

flex: none; (equivalent to flex: 0 0 auto;) — The item will not grow or shrink.
flex: auto; (equivalent to flex: 1 1 auto;) — The item will grow and shrink.
flex: <positive-number>; (e.g., flex: 1;) — The item will grow, but not shrink, with a flex-basis of 0.

.flex-item {
  flex: 1 0 100px; /* grow, shrink, basis */
}

align-self: Overrides the align-items property for a specific flex item. It controls the alignment of the item along the cross axis. Values are the same as align-items:

auto (default): Inherits the align-items value from the parent.
stretch
flex-start
flex-end
center
baseline

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: center; /* All items are centered by default */
  background-color: #f0f0f0;
  height: 200px; /* Set a height to see the effect */
}

.flex-item {
  background-color: #ccc;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

.align-self-flex-start {
  align-self: flex-start; /* Override and align this item to the top */
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item align-self-flex-start">2</div>
  <div class="flex-item">3</div>
</div>

</body>
</html>

order: Specifies the order in which flex items are displayed. By default, items are displayed in the order they appear in the HTML source code. The order property allows you to change this order without modifying the HTML. It accepts integer values.

.flex-item {
  order: 2; /* Display this item last */
}

.flex-item-first {
  order: -1; /* Display this item first */
}

7.3 Common Flexbox Layout Patterns

Explanation: Flexbox is incredibly versatile and can be used to create a wide range of layout patterns. Here are some common examples:

Horizontal Navigation Menu:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<style>
nav ul {
  display: flex;
  justify-content: space-around; /* Evenly distribute items */
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}
</style>

Vertically Centered Content:

<div class="container">
  <p>This content is vertically centered.</p>
</div>

<style>
.container {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 300px; /* Set a height for the container */
}
</style>

Sticky Footer:

<body>
  <div class="page-container">
    <header>Header</header>
    <main>Main Content</main>
    <footer>Footer</footer>
  </div>
</body>

<style>
body {
  margin: 0;
}

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensure the container takes up at least the full viewport height */
}

main {
  flex: 1; /* Allow the main content to grow and take up available space */
}

footer {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}
</style>

Equal Height Columns:

<div class="container">
  <div class="column">
    <h2>Column 1</h2>
    <p>Some content.</p>
  </div>
  <div class="column">
    <h2>Column 2</h2>
    <p>A bit more content so they don't have to be equal.</p>
  </div>
  <div class="column">
    <h2>Column 3</h2>
    <p>even more content than the second one!</p>
  </div>
</div>

<style>
.container {
    display: flex;
}

.column {
    border: 1px solid black;
    padding: 10px;
}
</style>

Sidebar Layout:

<div class="layout">
  <aside>Sidebar</aside>
  <main>Main Content</main>
</div>

<style>
.layout {
  display: flex;
}

aside {
  width: 200px;
  background-color: #eee;
  padding: 10px;
}

main {
  flex: 1; /* Take up remaining space */
  padding: 10px;
}
</style>

Chapter 8: CSS Grid in detailed

8.1 Grid Container Properties: grid-template-rows, grid-template-columns, grid-template-areas, grid-gap, justify-items, align-items, justify-content, align-content, grid-auto-rows, grid-auto-columns, grid-auto-flow

Concept: These properties are applied to the grid container (the parent element with display: grid or display: inline-grid) to define the structure and behavior of the grid.

Explanation and Examples:

grid-template-rows: Defines the number and height of the rows in the grid. You can specify fixed sizes (e.g., 100px), percentages, fractions of available space (fr unit), or the auto keyword.

.grid-container {
  display: grid;
  grid-template-rows: 100px 200px auto; /* Three rows: 100px, 200px, and the remaining space */
}

grid-template-columns: Defines the number and width of the columns in the grid. Similar to grid-template-rows, you can use fixed sizes, percentages, fr units, or auto.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Three columns: the second column is twice as wide as the first and third */
}

grid-template-areas: Defines grid areas by referencing the names of the grid items. This provides a visual way to define the structure of the grid. You must define names for each row and column area you have.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "header header header"
    "sidebar main content"
    "footer footer footer";
}

header { grid-area: header; }
sidebar { grid-area: sidebar; }
main { grid-area: main; }
content { grid-area: content; }
footer { grid-area: footer; }

grid-gap: A shorthand property for setting both grid-row-gap and grid-column-gap in a single declaration. It specifies the size of the gap between grid items (rows and columns).

.grid-container {
  display: grid;
  grid-gap: 20px; /* 20px gap between rows and columns */
}

You can set the row and column gaps separately with:

grid-row-gap
grid-column-gap

justify-items: Aligns grid items along the inline (row) axis within their grid cells.

stretch (default): Items are stretched to fill the grid cell.
start: Items are aligned to the start of the grid cell.
end: Items are aligned to the end of the grid cell.
center: Items are centered within the grid cell.

.grid-container {
  display: grid;
  justify-items: center; /* Centers items horizontally within their cells */
}

align-items: Aligns grid items along the block (column) axis within their grid cells.

stretch (default): Items are stretched to fill the grid cell.
start: Items are aligned to the top of the grid cell.
end: Items are aligned to the bottom of the grid cell.
center: Items are centered vertically within the grid cell.

.grid-container {
  display: grid;
  align-items: center; /* Centers items vertically within their cells */
}

justify-content: Distributes grid tracks (rows or columns) along the inline (row) axis when the grid’s total size is less than the size of its containing block. This applies to the whole grid.

start: Tracks are packed to the start of the container.
end: Tracks are packed to the end of the container.
center: Tracks are centered within the container.
space-between: Tracks are evenly distributed, with the first track at the start and the last track at the end.
space-around: Tracks are evenly distributed, with equal space around each track.
space-evenly: Tracks are evenly distributed, with equal space around them.

.grid-container {
  display: grid;
  justify-content: space-around; /* Evenly distributes tracks horizontally */
}

align-content: Distributes grid tracks (rows or columns) along the block (column) axis when the grid’s total size is less than the size of its containing block.

stretch (default): The grid tracks are stretched to fill the container.
start: Tracks are packed at the start of the container.
end: Tracks are packed at the end of the container.
center: Tracks are packed in the center of the container.
space-between: Tracks are evenly distributed, with the first track at the start and the last track at the end.
space-around: Tracks are evenly distributed, with equal space around each track.
space-evenly: Tracks are evenly distributed with equal space around them.

.grid-container {
  display: grid;
  align-content: space-around; /* Evenly distributes tracks vertically */
}

grid-auto-rows: Specifies the height of implicitly created rows (rows that are not explicitly defined using grid-template-rows). This is helpful when you have more grid items than rows defined in grid-template-rows.

.grid-container { display: grid; grid-template-rows: 100px 200px; /* Explicit rows */ grid-auto-rows: 150px; /* Implicit rows will be 150px high */ }

.grid-container {
  display: grid;
  grid-template-rows: 100px 200px; /* Explicit rows */
  grid-auto-rows: 150px; /* Implicit rows will be 150px high */
}

grid-auto-columns: Specifies the width of implicitly created columns (columns that are not explicitly defined using grid-template-columns).

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Explicit columns */
  grid-auto-columns: 200px; /* Implicit columns will be 200px wide */
}

grid-auto-flow: Controls how auto-placed items (items that are not explicitly positioned) are inserted into the grid.

row (default): Items are placed row by row.
column: Items are placed column by column.
dense: Attempts to fill in holes in the grid, which can result in items appearing out of order. Use with caution.
row dense: row with dense packing
column dense: column with dense packing

.grid-container {
  display: grid;
  grid-auto-flow: row dense; /* Try different values */
}

8.2 Grid Item Properties: grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-column, grid-row, grid-area, justify-self, align-self

Concept: These properties are applied to the grid items (the children of the grid container) to control their placement and alignment within the grid.

Explanation and Examples:

grid-column-start: Specifies the starting column line of a grid item. Grid lines are numbered starting from 1.

grid-column-end: Specifies the ending column line of a grid item.

grid-row-start: Specifies the starting row line of a grid item.

grid-row-end: Specifies the ending row line of a grid item.

.grid-item {
  grid-column-start: 1;
  grid-column-end: 3; /* Span two columns */
  grid-row-start: 2;
  grid-row-end: 3;
}

grid-column: A shorthand property for setting both grid-column-start and grid-column-end. The syntax is grid-column: start / end;.

grid-row: A shorthand property for setting both grid-row-start and grid-row-end. The syntax is grid-row: start / end;.

.grid-item {
  grid-column: 1 / 3; /* Start at column 1, end at column 3 */
  grid-row: 2 / 3; /* Start at row 2, end at row 3 */
}

grid-area: A shorthand property for setting grid-row-start, grid-column-start, grid-row-end, and grid-column-end in a single declaration. The syntax is grid-area: row-start / column-start / row-end / column-end;.

You can also use grid-area to assign a name to a grid item that will be used by grid-template-areas:

.grid-item {
  grid-area: myArea; /* Assign the name "myArea" to the item */
}

.grid-container {
  grid-template-areas:
    "header header header"
    "sidebar main content"
    "footer footer footer";
}

.grid-item {
  grid-area: 2 / 1 / 4 / 3; /* Shorthand for all four lines */
}

justify-self: Aligns a grid item along the inline (row) axis within its grid cell, overriding the justify-items property set on the grid container.

auto (default): Inherits the justify-items value from the grid container.
start: Item is aligned to the start of the grid cell.
end: Item is aligned to the end of the grid cell.
center: Item is centered within the grid cell.
stretch: Item is stretched to fill the grid cell.

.grid-item {
  justify-self: end; /* Align this item to the right */
}

align-self: Aligns a grid item along the block (column) axis within its grid cell, overriding the align-items property set on the grid container.

auto (default): Inherits the align-items value from the grid container.
start: Item is aligned to the top of the grid cell.
end: Item is aligned to the bottom of the grid cell.
center: Item is centered within the grid cell.
stretch: Item is stretched to fill the grid cell.

.grid-item {
  align-self: start; /* Align this item to the top */
}

8.3 Responsive Grid Layouts

Concept: Creating responsive grid layouts that adapt to different screen sizes is essential for modern web design. CSS Grid provides several features that make it easy to create responsive grids.

Techniques:

fr Unit: The fr unit distributes available space among grid tracks. It’s ideal for creating flexible columns and rows that adapt to the screen size. Use the minmax() property to set the minimum and maximum size

.grid-container {
  grid-template-columns: minmax(200px, 1fr) 2fr; /* First col min size is 200 px*/
}

repeat() Function: The repeat() function allows you to repeat a set of values for grid-template-columns or grid-template-rows. This is useful for creating grids with a large number of equally sized columns or rows. Set the repeat to auto-fit or auto-fill to fill the container

.grid-container {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Create as many columns as fit */
}

Media Queries: Use media queries to change the grid structure based on the screen size.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns on larger screens */
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller screens */
  }
}

@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr; /* 1 column on very small screens */
  }
}

grid-template-areas and Media Queries: Change the grid layout completely by redefining grid-template-areas within media queries.

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main content"
    "footer footer footer";
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "content"
      "footer";
  }
}

minmax() Function: Allows you to set a minimum and maximum size for grid tracks. This is useful for preventing columns from becoming too narrow or too wide.

.grid-container {
  grid-template-columns: minmax(200px, 1fr) 2fr; /* First column is at least 200px wide */
}

Best Practices:

Start with a mobile-first approach and design for the smallest screen size first.
Use relative units (percentages, fr units) for column and row sizes to create flexible layouts.
Test your grid layout on different devices and screen sizes to ensure it looks good on all devices.

Chapter 9: Responsive Web Design

9.1 What is Responsive Web Design?

Concept: Responsive Web Design (RWD) is an approach to web development that aims to create web pages that adapt seamlessly to different screen sizes and devices. Instead of creating separate websites for desktops, tablets, and mobile phones, a responsive website uses flexible layouts, flexible images, and CSS media queries to provide an optimal viewing experience across a wide range of devices.

Key Principles:

Fluid Grids: Using relative units (percentages, fr units) instead of fixed units (pixels) for column widths and other layout elements.
Flexible Images and Media: Scaling images and other media to fit the container they are in, preventing them from overflowing on smaller screens.
CSS Media Queries: Using CSS media queries to apply different styles based on the characteristics of the device (e.g., screen width, orientation, resolution).

Benefits of Responsive Web Design:

Improved User Experience: Provides an optimal viewing experience on all devices.
Cost-Effective: Only one website to maintain instead of multiple versions.
SEO Benefits: Google prefers responsive websites and ranks them higher in search results.
Increased Reach: Reaches a wider audience across different devices.
Easy to Manage: Easier to update and maintain a single codebase.

9.2 Viewport Meta Tag

Concept: The viewport meta tag is used to control how the browser scales and displays the content of a webpage on different devices, especially mobile devices. It’s a crucial element for responsive web design.

Explanation:

The viewport is the visible area of a webpage on a device’s screen.
On mobile devices, the browser often initially renders the page at a wider virtual viewport (e.g., 980px) and then scales it down to fit the screen. This can result in a zoomed-out view that is difficult to read.
The viewport meta tag tells the browser how to handle the viewport and prevent this initial scaling.

Common Viewport Meta Tag Configuration:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width: Sets the width of the viewport to the width of the device’s screen in device-independent pixels.
initial-scale=1.0: Sets the initial zoom level to 100% when the page is first loaded. This prevents the browser from initially zooming out the page.

Additional Viewport Settings (Less Common):

maximum-scale: Specifies the maximum zoom level that the user can apply.
minimum-scale: Specifies the minimum zoom level.
user-scalable: Specifies whether the user is allowed to zoom in or out.
It’s generally recommended to avoid setting maximum-scale, minimum-scale, and user-scalable as they can negatively impact accessibility.
Importance: The viewport meta tag is essential for ensuring that your website is displayed correctly on mobile devices. Without it, your website may be zoomed out and difficult to use.

9.3 Media Queries: min-width, max-width, orientation, etc.

Concept: CSS media queries are a powerful feature that allows you to apply different styles based on the characteristics of the device or screen being used to view the webpage. They are the foundation of responsive web design.

Explanation:

Media queries allow you to define different CSS rules for different media types or features.
They consist of a media type (e.g., screen, print) and one or more media features (e.g., width, orientation).
The CSS rules within a media query are only applied if the media type and all media features are true.

Syntax:

@media media-type and (media-feature) {   /* CSS rules to apply when the media query is true */ }

Common Media Features:

width: Specifies the width of the viewport.

min-width: Applies styles for viewports that are at least a certain width.
max-width: Applies styles for viewports that are at most a certain width.

@media (max-width: 768px) {
  /* Styles for screens that are 768px wide or less (tablets) */
  body {
    font-size: 14px;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
    /* Styles for screens that are between 769px wide and 1200 px */
}

height: Specifies the height of the viewport. min-height and max-height are also available.

orientation: Specifies the orientation of the device.

portrait: The device is in portrait mode (height is greater than or equal to width).
landscape: The device is in landscape mode (width is greater than height).

@media (orientation: portrait) {
  /* Styles for devices in portrait mode */
  .sidebar {
    display: none; /* Hide sidebar on portrait mode */
  }
}

resolution: Specifies the pixel density of the screen.

min-resolution: Applies styles for screens with a resolution at least a certain value.
max-resolution: Applies styles for screens with a resolution at most a certain value.

@media (min-resolution: 192dpi) {
  /* Styles for high-resolution screens (Retina displays) */
  img {
    /* Use higher-resolution images */
    src: "image@2x.png";
  }
}

aspect-ratio: Specifies the aspect ratio of the viewport (width / height).

hover: Determines whether the device supports hovering

Common Media Types (Less Commonly Used):

all: Applies to all media types (default).
screen: Applies to computer screens, tablets, and smartphones.
print: Applies when printing the page.
speech: Applies to screen readers and other speech-based user agents.

Linking Media Queries in HTML: You can also link to separate stylesheets for different media queries using the media attribute of the <link> tag:

<link rel="stylesheet" href="style.css"> <!-- Default styles --> 
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">

However, it’s generally better to include all your CSS in a single file and use media queries within the file for better organization and performance.

Importance: Media queries are the cornerstone of responsive web design, allowing you to tailor the layout and appearance of your website to different devices and screen sizes.

9.4 Mobile-First Approach

Concept: The mobile-first approach is a design and development strategy that prioritizes the mobile experience. You start by designing and building the website for the smallest screen size first, and then progressively enhance it for larger screens using media queries.

Benefits of Mobile-First:

Improved Performance: By starting with the mobile version, you ensure that the core content and functionality are delivered quickly to mobile users.
Simplified Development: It’s often easier to add features and styles for larger screens than to remove them for smaller screens.
Better User Experience: Mobile users are often on slower connections, so a mobile-first approach ensures that they have a good experience.
Progressive Enhancement: Follows the principle of progressive enhancement, which focuses on providing a baseline level of functionality and content to all users and then progressively enhancing the experience for users with more capable devices.

How to Implement a Mobile-First Approach:

Start with a Basic HTML Structure: Create a basic HTML structure that includes the core content and functionality of your website.
Add the Viewport Meta Tag: Include the viewport meta tag in the <head> section of your HTML document.
Write CSS for Mobile Devices: Write CSS rules that are applied to all devices by default. This is your base CSS.
Use Media Queries to Enhance for Larger Screens: Use media queries to add additional styles and features for larger screens.

/* Base CSS (Styles for mobile devices) */
body {
  font-size: 16px;
}

.container {
  width: 100%;
}

/* Styles for tablets (768px and up) */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }

  .container {
    width: 750px;
  }
}

/* Styles for desktops (992px and up) */
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

/* Styles for large desktops (1200px and up) */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

9.5 Flexible Images and Videos

Concept: Flexible images and videos are those that scale to fit their container, preventing them from overflowing on smaller screens. This is crucial for creating responsive layouts.

Techniques:

max-width: 100% and height: auto: Apply these styles to images to ensure that they never exceed the width of their container. The height: auto property maintains the aspect ratio of the image.

img {
  max-width: 100%;
  height: auto;
}

srcset Attribute: The srcset attribute allows you to specify multiple image sources for different screen resolutions. The browser will then choose the most appropriate image based on the device’s pixel density.

<img src="image.jpg" alt="Description"
     srcset="image-small.jpg 480w,
             image-medium.jpg 800w,
             image-large.jpg 1200w">

The browser will pick the image that best fits the current layout.

<picture> Element: The <picture> element provides even more control over image selection. You can use it to specify different images for different media queries or image formats.

<picture>
  <source media="(max-width: 480px)" srcset="image-small.jpg">
  <source media="(max-width: 800px)" srcset="image-medium.jpg">
  <img src="image-large.jpg" alt="Description">
</picture>

Responsive Videos: Use CSS to make videos responsive by setting their max-width to 100%.

video {
  max-width: 100%;
  height: auto;
}

For embedded videos (e.g., from YouTube or Vimeo), use a container element with a relative padding-bottom to maintain the aspect ratio:

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>

<style>
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio (height/width * 100) */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

9.6 Common Responsive Layout Patterns

Explanation: Responsive design patterns are reusable solutions to common layout challenges. Here are a few examples:

Off-Canvas Navigation: A navigation menu that is hidden by default on mobile devices and can be toggled into view (often from the left or right side of the screen).

Stacking Content: Stacking columns of content vertically on small screens and displaying them side-by-side on larger screens. This is often achieved using media queries to change the display property or grid-template-columns.

Hero Image Adaptation: Adjusting the size, positioning, or content of a hero image based on the screen size.

Card Layouts: Arranging content in cards or tiles that adapt to different screen sizes. Flexbox or Grid can be used to create flexible card layouts.

Footer Variations: Changing the layout of the footer based on the screen size (e.g., stacking columns on mobile devices).

This post is based on interaction with https://aistudio.corp.google.com/.

Happy learning!!!

CSS Learning Roadmap

Chapter 1: Introduction to CSS

1.1 What is CSS? (Cascading Style Sheets)

1.2 History of CSS

1.3 CSS Syntax: Selectors, Properties, and Values

1.4 Ways to Add CSS: Inline, Internal, and External

1.5 CSS Specificity and Inheritance

1.6 CSS Box Model

Chapter 2: CSS Selectors

2.1 Basic Selectors: Element, ID, and Class Selectors

2.2 Universal Selector (*)

2.3 Grouping Selectors

2.5 Pseudo-classes

2.6 Pseudo-elements

Chapter 3: Text and Font Styling

3.1 Font Properties: font-family, font-size, font-weight, font-style, font-variant

3.2 Text Properties: color, text-align, text-decoration, text-transform, text-indent, letter-spacing, word-spacing, line-height, text-shadow

3.3 Google Fonts

3.4 Web Font Optimization

Chapter 4: Colors, Backgrounds, and Gradients

4.1 Color Values: Hex, RGB, RGBA, HSL, HSLA, Named Colors

4.2 Background Properties

4.3 CSS Gradients

Chapter 5: The CSS Box Model in Detail

5.1 Understanding the Box Model: Content, Padding, Border, Margin

5.2 Box Sizing: content-box, border-box

5.3 Margin Collapsing

5.4 Visual Formatting Model

Chapter 6: CSS Layouts

6.1 Display Property: block, inline, inline-block, none, etc.

6.2 Positioning: static, relative, absolute, fixed, sticky

6.3 Floats and Clearfix

6.4 Introduction to Flexbox

6.5 Introduction to CSS Grid

6.6 Multicolumn Layout

Chapter 7: Flexbox in detailed

7.1 Flex Container Properties: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

7.2 Flex Item Properties: flex-grow, flex-shrink, flex-basis, flex, align-self, order

7.3 Common Flexbox Layout Patterns

Chapter 8: CSS Grid in detailed

8.1 Grid Container Properties: grid-template-rows, grid-template-columns, grid-template-areas, grid-gap, justify-items, align-items, justify-content, align-content, grid-auto-rows, grid-auto-columns, grid-auto-flow

8.2 Grid Item Properties: grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-column, grid-row, grid-area, justify-self, align-self

8.3 Responsive Grid Layouts

Chapter 9: Responsive Web Design

9.1 What is Responsive Web Design?

9.2 Viewport Meta Tag

9.3 Media Queries: min-width, max-width, orientation, etc.

9.4 Mobile-First Approach

9.5 Flexible Images and Videos

9.6 Common Responsive Layout Patterns

Written by Dilip Kumar

No responses yet

**2.2 Universal Selector (*)**