CSS

Beginners To Experts

The site is under development.

CSS

1.1 What is CSS?

CSS (Cascading Style Sheets) is used to style HTML elements. It defines how HTML elements should be displayed, including layout, colors, fonts, spacing, and more.

1.2 Adding CSS to HTML

You can add CSS in three ways: Inline, Internal, and External.

Example: All 3 CSS Types

<!DOCTYPE html>

<html>

<head>

  <style>

    /* Internal CSS */

    h1 {

      color: blue;

    }

  </style>

  <link rel="stylesheet" href="styles.css"> <!-- External CSS -->

</head>

<body>


  <h1>This is a heading</h1>

  <p style="color: green;">This is a paragraph</p> <!-- Inline CSS -->


</body>

</html>

1.3 Output:

This is a heading (in blue)
This is a paragraph (in green)

Chapter 2: CSS Selectors

2.1 What Are Selectors?

Selectors in CSS target HTML elements to apply styles. Common selectors include element, class, id, and universal selectors.

2.2 Example: Using Element, Class, and ID

<style>

  p {

    color: red;

  }

  .highlight {

    background-color: yellow;

  }

  #special {

    font-weight: bold;

  }

</style>


<p>Normal paragraph</p>

<p class="highlight">Highlighted paragraph</p>

<p id="special">Special paragraph</p>

2.3 Output:

Normal paragraph

Highlighted paragraph

Special paragraph

Chapter 3: Colors and Backgrounds

3.1 CSS Colors

Colors can be specified in different formats like named colors, HEX, RGB, RGBA, HSL, and HSLA.

3.2 Example: Color Formats

<style>

  .named { color: tomato; }

  .hex { color: #00ff00; }

  .rgb { color: rgb(0, 0, 255); }

  .rgba { color: rgba(255, 0, 0, 0.5); }

</style>


<p class="named">Tomato color</p>

<p class="hex">Hex color</p>

<p class="rgb">RGB color</p>

<p class="rgba">RGBA semi-transparent red</p>

3.3 Output:

Tomato color

Hex color

RGB color

RGBA semi-transparent red

Chapter 4: Fonts and Text

4.1 Changing Font Style

You can control font family, size, weight, and style using CSS properties like font-family, font-size, font-weight, and font-style.

Example:

<style>

  .text-sample {

    font-family: Arial, sans-serif;

    font-size: 20px;

    font-weight: bold;

    font-style: italic;

  }

</style>


<p class="text-sample">Styled text</p>

Output:

Styled text

4.2 Text Alignment & Decoration

You can align text left, center, or right. You can also underline, overline, or strike through using text-decoration.

Example:

<style>

  .center { text-align: center; }

  .underline { text-decoration: underline; }

  .strike { text-decoration: line-through; }

</style>


<p class="center">Centered text</p>

<p class="underline">Underlined text</p>

<p class="strike">Strikethrough text</p>

Output:

Centered text

Underlined text

Strikethrough text

Chapter 5: Box Model

5.1 What is the Box Model?

All HTML elements are treated as boxes. The box model includes content, padding, border, and margin.

5.2 Visualizing the Box Model

<style>

  .box {

    width: 200px;

    padding: 20px;

    border: 5px solid black;

    margin: 10px;

    background-color: lightgray;

  }

</style>


<div class="box">This is a box</div>

5.3 Output:

This is a box

Chapter 6: CSS Display and Visibility

6.1 Display Property

The display property defines how elements are rendered on the page. Common values include block, inline, inline-block, none, and flex.

Example:

<style>

  span {

    display: block;

    background: lightblue;

  }

</style>


<span>Block 1</span>

<span>Block 2</span>

Output:

Block 1 Block 2

6.2 Visibility Property

The visibility property controls if an element is visible or hidden. visibility: hidden hides the element but it still takes up space.

Example:

<style>

  .hide-me { visibility: hidden; }

</style>


<p>Visible text</p>

<p class="hide-me">You can't see me</p>

Output:

Visible text

You can't see me

Chapter 7: Positioning Elements

7.1 CSS Position Property

The position property determines how an element is positioned on the page. Values include static, relative, absolute, fixed, and sticky.

Example: Relative and Absolute

<style>

  .relative-box {

    position: relative;

    width: 200px;

    height: 200px;

    background-color: lightblue;

  }

  .absolute-box {

    position: absolute;

    top: 20px;

    left: 20px;

    width: 100px;

    height: 100px;

    background-color: coral;

  }

</style>


<div class="relative-box">

  <div class="absolute-box">ABS</div>

</div>

Output:

ABS

7.2 Fixed and Sticky

fixed elements stay in place even when scrolling. sticky toggles between relative and fixed depending on scroll position.

Chapter 8: Flexbox Layout

8.1 What is Flexbox?

Flexbox is a layout mode designed to make it easier to align and distribute space among items in a container.

8.2 Flex Container and Items

<style>

  .flex-container {

    display: flex;

    justify-content: space-around;

    background-color: lightgray;

  }

  .flex-item {

    width: 100px;

    height: 100px;

    background-color: teal;

    color: white;

    text-align: center;

    line-height: 100px;

  }

</style>


<div class="flex-container">

  <div class="flex-item">1</div>

  <div class="flex-item">2</div>

  <div class="flex-item">3</div>

</div>

8.3 Output:

1
2
3

Chapter 9: Grid Layout

9.1 What is CSS Grid?

CSS Grid is a powerful layout system for building two-dimensional grid-based designs. You define rows and columns for layout.

9.2 Grid Container and Items

<style>

  .grid-container {

    display: grid;

    grid-template-columns: auto auto auto;

    gap: 10px;

    background-color: #ddd;

    padding: 10px;

  }

  .grid-item {

    background-color: steelblue;

    color: white;

    padding: 20px;

    text-align: center;

  }

</style>


<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>

9.3 Output:

1
2
3
4
5
6

Chapter 10: Media Queries

10.1 Introduction to Media Queries

Media queries let you apply CSS styles based on device characteristics like screen width, height, resolution, and orientation. They make websites responsive and adaptive.

Example: Change background for small screens

<style>

  body {

    background-color: lightgreen;

  }

  @media (max-width: 600px) {

    body {

      background-color: lightcoral;

    }

  }

</style>

Output: Resize the browser to see the background color change below 600px width.

Chapter 11: Responsive Design Techniques

11.1 Flexible Layouts with Percentages

Using percentage widths allows content to adjust based on screen size, instead of fixed pixels.

<style>

  .responsive-box {

    width: 80%;

    background-color: skyblue;

    padding: 20px;

    margin: auto;

  }

</style>


<div class="responsive-box">

  Resize me!

</div>
Resize me!

11.2 Viewport Units

vw (viewport width) and vh (viewport height) adjust based on screen size.

<style>

  .viewport-box {

    width: 50vw;

    height: 20vh;

    background-color: navy;

    color: white;

    text-align: center;

    line-height: 20vh;

  }

</style>


<div class="viewport-box">

  50vw x 20vh box

</div>
50vw x 20vh box

Chapter 12: CSS Transitions

12.1 What are Transitions?

CSS transitions let you animate changes in CSS properties smoothly over time.

Example: Hover transition on background color

<style>

  .transition-box {

    width: 150px;

    height: 150px;

    background-color: crimson;

    transition: background-color 0.5s ease;

  }

  .transition-box:hover {

    background-color: gold;

  }

</style>


<div class="transition-box"></div>

Chapter 13: CSS Animations

13.1 What are CSS Animations?

CSS animations allow you to animate transitions between CSS states using keyframes.

Example: Bouncing box

<style>

  @keyframes bounce {

    0% { transform: translateY(0); }

    50% { transform: translateY(-50px); }

    100% { transform: translateY(0); }

  }

  .animated-box {

    width: 100px;

    height: 100px;

    background-color: tomato;

    animation: bounce 1s infinite;

  }

</style>


<div class="animated-box"></div>

Chapter 14: CSS Variables

14.1 What are CSS Variables?

CSS variables (custom properties) store values that can be reused throughout your CSS. They're defined with -- prefix and accessed with var().

Example: Theming with variables

<style>

  :root {

    --main-bg: #222;

    --main-color: #fff;

  }

  .theme-box {

    background-color: var(--main-bg);

    color: var(--main-color);

    padding: 20px;

    text-align: center;

  }

</style>


<div class="theme-box">

  This uses CSS variables!

</div>
This uses CSS variables!

Declaring and Using Variables

CSS variables (custom properties) allow reuse of values and easy theming.

<style>

  :root {

    --main-color: #4CAF50;

    --padding: 15px;

  }

  .box {

    background-color: var(--main-color);

    padding: var(--padding);

    color: white;

  }

</style>


<div class="box">Variable-powered Box</div>
Variable-powered Box

Chapter 15: CSS Frameworks

15.1 Why Use a CSS Framework?

CSS frameworks provide pre-written styles and components to speed up development. Examples include Bootstrap, Tailwind CSS, and Bulma.

15.2 Example with Bootstrap

<!-- Add Bootstrap CDN -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">


<div class="container text-center mt-5">

  <h1 class="text-primary">Hello from Bootstrap</h1>

  <button class="btn btn-success">Click Me</button>

</div>

Output:

Hello from Bootstrap

Chapter 16: Advanced Selectors

16.1 Attribute Selectors

Attribute selectors target elements with specific attributes or values.

<style>

  input[type="text"] {

    border: 2px solid blue;

  }

</style>


<input type="text" placeholder="Text input">

<input type="password" placeholder="Password input">

16.2 Pseudo-classes

Pseudo-classes define a special state of an element, like :hover, :first-child, etc.

<style>

  p:first-child {

    color: red;

  }

  p:hover {

    background-color: yellow;

  }

</style>


<div>

  <p>First Paragraph</p>

  <p>Second Paragraph</p>

</div>

First Paragraph

Second Paragraph

Chapter 17: Grid Layout

17.1 Introduction to CSS Grid

CSS Grid Layout offers a two-dimensional layout system, ideal for complex designs.

<style>

  .grid-container {

    display: grid;

    grid-template-columns: auto auto auto;

    gap: 10px;

    background-color: #ccc;

    padding: 10px;

  }

  .grid-item {

    background-color: #4CAF50;

    padding: 20px;

    color: white;

    text-align: center;

  }

</style>


<div class="grid-container">

  <div class="grid-item">1</div>

  <div class="grid-item">2</div>

  <div class="grid-item">3</div>

</div>
1
2
3

Chapter 18: Flexbox

18.1 Flexible Box Model

Flexbox is a one-dimensional layout system to align items horizontally or vertically with ease.

<style>

  .flex-container {

    display: flex;

    justify-content: space-around;

    background-color: lightgray;

    padding: 10px;

  }

  .flex-item {

    background-color: royalblue;

    color: white;

    padding: 20px;

  }

</style>


<div class="flex-container">

  <div class="flex-item">Item 1</div>

  <div class="flex-item">Item 2</div>

  <div class="flex-item">Item 3</div>

</div>
Item 1
Item 2
Item 3

Chapter 19: Accessibility with CSS

19.1 Improve Readability and Usability

Use high contrast colors, readable font sizes, and focus styles to help all users.

<style>

  button:focus {

    outline: 3px dashed red;

    background-color: yellow;

  }

</style>


<button>Accessible Button</button>

Chapter 20: Best Practices & Recap

20.1 Best Practices

  • Use semantic HTML with clean, maintainable CSS.
  • Group styles logically and use comments.
  • Use variables and utility classes when appropriate.
  • Prefer relative units like em, rem, % over fixed px.
  • Test across multiple devices and screen sizes.

20.2 Recap

This course covered CSS basics to advanced topics including selectors, box model, layouts with flex/grid, transitions, animations, media queries, accessibility, and frameworks.

You're now ready to build responsive and modern websites with CSS!

21.0 Tools and Resources

To make CSS development easier and more efficient, use these tools:

  • CSS Validators: Help catch errors (e.g., W3C Validator).
  • Preprocessors: Use SCSS/SASS for variables, nesting, mixins.
  • Browser DevTools: Inspect elements and test styles live.
  • CSS Frameworks: Use Bootstrap or Tailwind CSS for fast development.
  • Responsive Testing Tools: Chrome DevTools, Responsively App.

21.1 Practice Projects

  • Build a responsive portfolio site using Flexbox and Grid.
  • Create a dark/light toggle theme using CSS variables.
  • Make a fully styled form with focus states, transitions, and accessibility.

21.2 What’s Next?

To take your skills further:

  • Learn JavaScript to add interactivity.
  • Explore React or Vue for component-based styling.
  • Practice with live projects and contribute to open source.

Chapter 22: CSS Functions

22.1 Common Functions

Functions like calc(), min(), and max() provide dynamic styling.

<style>

  .dynamic-width {

    width: calc(100% - 100px);

    background-color: coral;

    padding: 10px;

  }

</style>


<div class="dynamic-width">Using calc() to adjust width</div>
Using calc() to adjust width

Chapter 23: CSS Clipping and Masking

23.1 clip-path

Clipping allows showing parts of an element in custom shapes.

<style>

  .clipped {

    clip-path: circle(50% at 50% 50%);

    width: 200px;

    height: 200px;

    background-color: purple;

  }

</style>


<div class="clipped"></div>

Chapter 24: CSS Object-fit and Object-position

<style>

  .fit-img {

    width: 300px;

    height: 200px;

    object-fit: cover;

  }

</style>


<img src="https://via.placeholder.com/400" class="fit-img">

Chapter 25: CSS Blend Modes

<style>

  .blend-box {

    background: url('https://via.placeholder.com/300') center/cover;

    background-blend-mode: multiply;

    background-color: yellowgreen;

    width: 300px;

    height: 200px;

  }

</style>


<div class="blend-box"></div>

Chapter 26: Advanced Responsive Design

<style>

  .responsive-text {

    font-size: clamp(1rem, 2vw, 3rem);

  }

</style>


<p class="responsive-text">This text resizes with the viewport!</p>

This text resizes with the viewport!

Chapter 27: CSS Logical Properties

<style>

  .logical-box {

    padding-inline-start: 20px;

    margin-block-end: 20px;

    background: peachpuff;

  }

</style>


<div class="logical-box">Logical padding and margin</div>
Logical padding and margin

Chapter 28: CSS Counters

<style>

  ol.counter {

    counter-reset: item;

  }

  ol.counter li::before {

    counter-increment: item;

    content: "Step " counter(item) ": ";

    font-weight: bold;

  }

</style>


<ol class="counter">

  <li>First step</li>

  <li>Second step</li>

</ol>
  1. Step 1: First step
  2. Step 2: Second step

Chapter 29: CSS Shape Outside

<style>

  .shape-img {

    float: left;

    shape-outside: circle(50%);

    clip-path: circle(50%);

    width: 200px;

    height: 200px;

    margin: 10px;

  }

</style>


<img src="https://via.placeholder.com/200" class="shape-img">

<p>Text wraps around the circle using shape-outside...</p>

Text wraps around the circle using shape-outside. You can create magazine-style layouts with this feature.

Chapter 30: Custom Scrollbars

<style>

  .scroll-area {

    height: 100px;

    overflow-y: scroll;

  }

  .scroll-area::-webkit-scrollbar {

    width: 10px;

  }

  .scroll-area::-webkit-scrollbar-thumb {

    background: green;

    border-radius: 5px;

  }

</style>


<div class="scroll-area">

  <p>Lots of scrollable content here...</p>

  <p>Line 2</p>

  <p>Line 3</p>

  <p>Line 4</p>

  <p>Line 5</p>

  <p>Line 6</p>

  <p>Line 7</p>

</div>

Lots of scrollable content here...

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7