Member

Home

Public Education

Schools

Community

Notifications

Announcement & Updates

Features

We published our Copyright, Terms of Services and Privacy Policy in our website to secure our rights. Please access them and read them from the footer.

Bugs & Fixes

WhatsApp Community

Features

Make sure to enter our WhatsApp community for unpublished resources and updates!

Bugs & Fixes

CSS

Chapter 1: What is CSS?Chapter 2: Customizing Elements with CSS Chapter 3: ID Selectors in CSS Chapter 4: CSS Box Model Chapter 5: CSS Flexbox Chapter 6: Using CSS Grid for Layouts Chapter 7: Responsive Design with Media Queries Chapter 8: Pseudo-Classes and Pseudo-Elements Chapter 9: Extra CSS Styling Techniques

Chapter 1: What is CSS?

The best way to manage CSS for larger projects is by using an external CSS file. This keeps your HTML and CSS separate, making it easier to organize and maintain your code.

How to Link a CSS File to HTML

Create a CSS File:
- Create a file called style.css.
- In this file, you'll write all your CSS code.
Link the CSS File to Your HTML:
- In the <head> section of your HTML file, add this link to connect your external CSS file:

1<head>
2    <link rel="stylesheet" href="style.css">
3</head>

rel="stylesheet" tells the browser this is a CSS file.
href="style.css" specifies the location of your CSS file. Make sure both the HTML and CSS files are in the same folder, or adjust the path accordingly.

Example of Linked CSS

Here’s how your HTML and file might look like:

HTML (index.html):

1<!DOCTYPE html>
2<html>
3<head>
4    <link rel="stylesheet" href="style.css">
5</head>
6<body>
7    <div>
8        <h1>Welcome to My Website</h1>
9        <p>This is a paragraph styled using CSS.</p>
10    </div>
11</body>
12</html>

Chapter 2: Customizing Elements with CSS

CSS allows you to apply specific styles to individual elements or groups of elements. One of the most powerful features of CSS is the ability to assign classes to HTML elements.

Creating Classes

To style specific elements, you create a class in your CSS file and then assign that class to an element in your HTML.

Example:

HTML:

1<div class="container">
2    <h1>Website Title</h1>
3    <p>Welcome to my website!</p>
4</div>

CSS (style.css):

1.container {
2    background-color: #f0f0f0;
3    padding: 20px;
4    border-radius: 5px;
5}

In this example, the class container applies a background color, padding, and rounded corners to the <div> and its contents.

Adding More Customization

You can also create multiple classes to style different types of content.

Example:

HTML:

1<div class="header">
2    <h2>My Header</h2>
3</div>
4
5<div class="footer">
6    <p>Contact us for more info</p>
7</div>

CSS (style.css):

1.header {
2    background-color: navy;
3    color: white;
4    text-align: center;
5}
6
7.footer {
8    background-color: black;
9    color: white;
10    padding: 10px;
11    text-align: center;
12}

This allows you to customize sections like headers and footers individually.

Chapter 3: ID Selectors in CSS

While classes are useful for styling multiple elements, sometimes you need to style a single, unique element. That’s where ID selectors come in.

What is an ID?

An ID is a unique identifier for a specific element. Unlike classes, an ID can only be used once on a page. IDs are often used for unique sections or elements that need distinct styling.

How to Use an ID Selector

To assign an ID to an element in HTML, use the id attribute. In your CSS file, you target the ID using the # symbol.

Example:

HTML:

1<div id="main-content">
2    <h1>Main Heading</h1>
3    <p>This is the main content of the page.</p>
4</div>

CSS (style.css):

1#main-content {
2    background-color: lightgreen;
3    padding: 20px;
4    border: 2px solid green;
5}

Here, the #main-content selector targets the <div> with the id="main-content" and applies styles only to that section.

IDs vs. Classes

Classes: Can be used multiple times for different elements.
IDs: Should only be used once per page and are more specific.

You’ll usually use IDs for key sections like headers, footers, or specific elements that need unique styling.

Chapter 4: CSS Box Model

The CSS Box Model is a fundamental concept for understanding how elements are structured and spaced on a webpage. Every HTML element can be thought of as a box that has content, padding, a border, and margin.

What is the Box Model?

Here’s how the box model is structured:

Content: The actual text, image, or other content inside the element.
Padding: Space between the content and the border. Padding is inside the element's border.
Border: The line that wraps around the padding and content.
Margin: The space outside the border, separating the element from other elements.

Visualizing the Box Model

Each part of the box model can be styled using CSS. For example:

HTML:

1<div class="box">
2    <p>This is a box model example.</p>
3</div>

CSS (style.css):

1.box {
2    width: 200px;
3    padding: 20px;       /* Space inside the box */
4    border: 5px solid red;  /* Border around the box */
5    margin: 30px;        /* Space outside the box */
6}

In this example:

The width sets the width of the content.
The padding adds space inside the box, between the content and the border.
The border is a solid red line.
The margin adds space outside the box, separating it from other elements.

Box Model Breakdown

Here’s how these values interact:

Content: 200px
Padding: 20px (on all sides)
Border: 5px (on all sides)
Margin: 30px (on all sides)

The total width of the element becomes the sum of content, padding, and border:
Total width = 200px (content) + 40px (padding, 20px on each side) + 10px (border, 5px on each side) = 250px.

Chapter 5: CSS Flexbox

The Flexbox layout system in CSS is a flexible way to arrange elements on a page. It makes it easy to position and align items, even when the screen size or container dimensions change.

What is Flexbox?

Flexbox is used for one-dimensional layouts, meaning it helps you align and distribute items along a single axis—either horizontally (row) or vertically (column).

To use Flexbox, you need two components:

A container (the parent element) with display: flex;.
Items (child elements) inside the container that you want to align.

Basic Flexbox Example

HTML:

1<div class="flex-container">
2    <div class="box">Box 1</div>
3    <div class="box">Box 2</div>
4    <div class="box">Box 3</div>
5</div>

CSS (style.css):

1.flex-container {
2    display: flex;
3    justify-content: space-between;
4    background-color: lightgray;
5    padding: 20px;
6}
7
8.box {
9    background-color: teal;
10    color: white;
11    padding: 10px;
12    border-radius: 5px;
13}

display: flex; enables Flexbox on the container.
justify-content: space-between; evenly distributes the boxes, with space between them.

Flexbox Properties

Here are some key Flexbox properties to understand:

justify-content: Controls how items are aligned horizontally.
- flex-start: Items are aligned at the start.
- center: Items are centered.
- space-between: Space is added between items.
align-items: Controls vertical alignment of the items within the container.
- stretch: Items stretch to fill the container.
- center: Items are vertically centered.

Example of Vertical Centering

HTML:

1<div class="flex-container-vertical">
2    <div class="box">Centered Box</div>
3</div>

CSS (style.css):

1.flex-container-vertical {
2    display: flex;
3    justify-content: center;
4    align-items: center;
5    height: 200px;
6    background-color: lightblue;
7}
8
9.box {
10    background-color: darkblue;
11    color: white;
12    padding: 20px;
13}

Here, both justify-content: center; and align-items: center; ensure that the box is centered both horizontally and vertically within the container.

Chapter 6: Using CSS Grid for Layouts

While Flexbox works well for one-dimensional layouts, CSS Grid is a powerful tool for creating two-dimensional layouts, where both rows and columns need to be managed. Grid allows for more complex and structured layouts compared to Flexbox.

What is CSS Grid?

CSS Grid is a layout system where you can define grid containers and specify how many rows and columns you want. The items inside the grid can then be placed in specific areas of the grid.

Basic CSS Grid Example

HTML:

1<div class="grid-container">
2    <div class="item1">Header</div>
3    <div class="item2">Menu</div>
4    <div class="item3">Main Content</div>
5    <div class="item4">Sidebar</div>
6    <div class="item5">Footer</div>
7</div>

CSS (style.css):

1.grid-container {
2    display: grid;
3    grid-template-columns: 200px 1fr 200px;
4    grid-template-rows: auto 1fr auto;
5    gap: 10px;
6}
7
8.item1 {
9    grid-column: 1 / 4;
10    background-color: lightblue;
11}
12
13.item2 {
14    background-color: lightgreen;
15}
16
17.item3 {
18    background-color: lightcoral;
19}
20
21.item4 {
22    background-color: lightgoldenrodyellow;
23}
24
25.item5 {
26    grid-column: 1 / 4;
27    background-color: lightgray;
28}

display: grid; turns the container into a grid layout.
grid-template-columns: 200px 1fr 200px; defines three columns, with the middle one being flexible (1fr stands for one fraction of the remaining space).
grid-template-rows: auto 1fr auto; defines three rows: one for the header, one for the main content, and one for the footer.
grid-column: 1 / 4; spans the element across multiple columns.

Placing Items in the Grid

In this example, the header (item1) and footer (item5) span across all three columns using grid-column: 1 / 4;. The other items take up one column each.

Grid Lines

CSS Grid works by defining rows and columns, which create grid lines. You can place items at specific positions in the grid by referring to these lines.

Example:

HTML:

1<div class="grid-container">
2    <div class="header">Header</div>
3    <div class="main">Main</div>
4    <div class="sidebar">Sidebar</div>
5</div>

CSS (style.css):

1.grid-container {
2    display: grid;
3    grid-template-columns: 1fr 3fr;
4    grid-template-rows: auto;
5}
6
7.header {
8    grid-column: 1 / 3;  /* Header spans across both columns */
9}
10
11.main {
12    grid-column: 2 / 3;  /* Main content takes the second column */
13}
14
15.sidebar {
16    grid-column: 1 / 2;  /* Sidebar takes the first column */
17}

In this example, we have two columns, and the header spans across both, while main and sidebar are placed in the second and first columns, respectively.

Chapter 7: Responsive Design with Media Queries

A crucial aspect of modern web development is ensuring that your website looks good on all devices, from large desktop screens to small mobile phones. Media queries in CSS allow you to create responsive designs that adjust depending on the size of the user’s screen or device.

What are Media Queries?

Media queries apply different styles depending on conditions like the width of the viewport (the user's screen). By using them, you can customize your layout and styling for different screen sizes.

Basic Media Query Example

HTML:

1<div class="container">
2    <h1>Responsive Design Example</h1>
3    <p>This layout changes based on the screen size.</p>
4</div>

CSS (style.css):

1/* Default styles for larger screens */
2.container {
3    width: 80%;
4    margin: 0 auto;
5    background-color: lightblue;
6    padding: 20px;
7    text-align: center;
8}
9
10/* Media query for screens smaller than 600px */
11@media (max-width: 600px) {
12    .container {
13        width: 100%; /* Full width on small screens */
14        background-color: lightcoral; /* Change background color */
15    }
16}

In this example:

By default, the container is set to take 80% of the screen width with a light blue background.
For screens smaller than 600px wide (like phones), the container expands to full width, and the background color changes to light coral.

Media Query Syntax

A typical media query looks like this:

1@media (max-width: 800px) {
2    /* Styles for screens smaller than 800px */
3}

Here are some common conditions you can use:

max-width: Applies styles when the screen width is less than or equal to a certain value.
min-width: Applies styles when the screen width is greater than or equal to a certain value.

Responsive Layout with Flexbox and Grid

Media queries are often combined with Flexbox and Grid to adjust layouts based on screen size.

Example of Responsive Grid:

HTML:

1<div class="grid-container">
2    <div class="item">Item 1</div>
3    <div class="item">Item 2</div>
4    <div class="item">Item 3</div>
5</div>

CSS (style.css):

1/* Default grid for larger screens */
2.grid-container {
3    display: grid;
4    grid-template-columns: repeat(3, 1fr); /* Three equal columns */
5    gap: 20px;
6}
7
8/* Media query for screens smaller than 600px */
9@media (max-width: 600px) {
10    .grid-container {
11        grid-template-columns: 1fr; /* Single column layout */
12    }
13}

In this example, the grid has three columns on larger screens but collapses to a single-column layout on smaller screens.

Using Media Queries for Typography

You can also use media queries to adjust text size for different devices.

Example:

1/* Larger screens */
2body {
3    font-size: 18px;
4}
5
6/* Smaller screens */
7@media (max-width: 600px) {
8    body {
9        font-size: 16px;
10    }
11}

Chapter 8: Pseudo-Classes and Pseudo-Elements

Pseudo-classes and pseudo-elements allow you to style elements based on certain states or target specific parts of an element without needing to add extra HTML. They are incredibly useful for interactive elements like links and buttons.

Pseudo-Classes

A pseudo-class is used to define the special state of an element. Common examples include :hover, :focus, and :active.

Hover Example

HTML:

1<a href="#" class="button">Hover Over Me</a>

CSS (style.css):

1/* Default button style */
2.button {
3    background-color: lightblue;
4    color: white;
5    padding: 10px 20px;
6    text-decoration: none;
7    border-radius: 5px;
8    transition: background-color 0.3s ease;
9}
10
11/* Change background color on hover */
12.button:hover {
13    background-color: darkblue;
14}

:hover applies styles when the user hovers over an element.
The transition property is used to smoothly animate the background color change when hovering.

Active Example

:active applies styles when an element is being clicked or activated.

1.button:active {
2    background-color: darkgreen;
3}

Focus Example

You can use the :focus pseudo-class to style an element when it is focused (e.g., when a user clicks on an input field).

HTML:

1<input type="text" class="input-field" placeholder="Focus on me">

CSS (style.css):

1.input-field {
2    padding: 10px;
3    border: 2px solid gray;
4}
5
6.input-field:focus {
7    border-color: blue; /* Change border color when focused */
8    outline: none; /* Remove default outline */
9}

Pseudo-Elements

Pseudo-elements target specific parts of an element. Common pseudo-elements include ::before, ::after, and ::first-letter.

Before and After Example

The ::before and ::after pseudo-elements allow you to insert content before or after an element without changing the HTML.

HTML:

1<p class="note">This is a note.</p>

CSS (style.css):

1/* Add content before the note */
2.note::before {
3    content: "📌 "; /* Adds a pin icon before the note */
4    font-size: 20px;
5}
6
7/* Add content after the note */
8.note::after {
9    content: " Important!";
10    color: red;
11    font-weight: bold;
12}

In this example:

The ::before pseudo-element adds a pin emoji at the start of the paragraph.
The ::after pseudo-element appends the word "Important!" in red after the paragraph.

First Letter Example

The ::first-letter pseudo-element allows you to style the first letter of a block of text.

HTML:

1<p class="intro">This is the introduction paragraph for a larger text block.</p>

CSS (style.css):

1.intro::first-letter {
2    font-size: 2em;
3    color: darkblue;
4    font-weight: bold;
5}

This styles the first letter of the paragraph, making it larger and bold for emphasis.

Chapter 9: Extra CSS Styling Techniques

In this chapter, we will explore a variety of extra CSS styling techniques, all applied in a single code block. These properties will enhance your elements with effects like borders, transitions, and transformations, in addition to the ones we've already seen.

Here’s an example that combines 10 CSS properties in one block:

Example Code:

1<div class="styled-box">
2    <h2 class="styled-heading">Extra CSS Styling</h2>
3    <p>Here we combine various styling techniques, from shadows and borders to transitions and transformations!</p>
4</div>

CSS (style.css):

1.styled-box {
2    width: 350px;
3    padding: 20px;
4    margin: 50px auto;
5    background-color: rgba(245, 245, 245, 0.9);    /* Light background with transparency */
6    border: 3px solid #4CAF50;                     /* Solid green border */
7    border-radius: 15px;                           /* Smooth rounded corners */
8    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.3);   /* Shadow for depth */
9    filter: brightness(95%) contrast(105%);        /* Adjusted brightness and contrast */
10    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition on hover */
11}
12
13.styled-box:hover {
14    transform: scale(1.05);                        /* Slight zoom effect on hover */
15    box-shadow: 12px 12px 30px rgba(0, 0, 0, 0.5); /* Bigger shadow on hover */
16}
17
18.styled-heading {
19    font-size: 26px;
20    color: #333;                                   /* Dark text color */
21    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);   /* Shadow for emphasis */
22    letter-spacing: 1px;                           /* Slight spacing between letters */
23}

Explanation of Properties:

background-color: A semi-transparent light gray background (rgba(245, 245, 245, 0.9)) gives the element a soft appearance.
border: A solid green border (3px solid #4CAF50) wraps around the box, adding definition.
border-radius: The 15px rounded corners smooth the edges for a polished look.
box-shadow: A shadow (8px 8px 20px) gives depth, making the box appear elevated.
filter: We use both brightness(95%) and contrast(105%) to adjust the overall lightness and contrast for a subtle enhancement.
transition: The transform and box-shadow properties transition smoothly on hover, creating dynamic effects.
transform: When the user hovers over the box, it scales up slightly (scale(1.05)), making the element feel interactive.
text-shadow: A shadow (3px 3px 8px) is applied to the heading, adding depth to the text.
letter-spacing: The letters in the heading are spaced slightly (1px) for a clean, elegant look.
hover effects: Both the scale and shadow change when hovering, adding an interactive, responsive touch.