CSS (Cascading Style Sheets): Complete Guide for Beginners

August 06, 2020

Introduction

CSS (Cascading Style Sheets) is a language used to style and design web pages. It controls how HTML elements look — including colors, fonts, layouts, spacing, and animations.

While HTML defines the structure of a webpage, CSS defines its appearance. Together, they form the foundation of modern web design.

💡 Why Learn CSS?

CSS is essential for every web developer because it:

Separates content (HTML) from design.
Makes websites visually appealing.
Enables responsive layouts for all devices.
Simplifies maintenance and updates.
Supports animations and transitions.

How CSS Works

CSS uses selectors to target HTML elements and apply styles using properties and values.

Example

html

<p style="color: blue;">This is a styled paragraph.</p>

or using external CSS:

p {
  color: blue;

Types of CSS

Type	Description	Example
Inline CSS	Styles applied directly inside HTML elements.	`<h1 style="color:red;">Hello</h1>`
Internal CSS	Styles written inside `<style>` tags in the HTML file.	`<style> h1 { color: red; } </style>`
External CSS	Styles stored in a separate `.css` file and linked using `<link>`.	`<link rel="stylesheet" href="style.css">`

🧠 CSS Syntax

A CSS rule consists of:

css

selector {
  property: value;
}

Example

css

h1 {
  color: blue;
  font-size: 24px;
}

Selector: h1 targets all heading 1 elements.
Property: color, font-size.
Value: blue, 24px.

🎯 CSS Selectors

Selectors define which HTML elements to style.

Common Types

Selector	Example	Description
Element Selector	`p { color: red; }`	Targets all `<p>` elements.
ID Selector	`#title { color: blue; }`	Targets element with `id="title"`.
Class Selector	`.highlight { color: yellow; }`	Targets elements with `class="highlight"`.
Universal Selector	`* { margin: 0; }`	Targets all elements.
Group Selector	`h1, h2, h3 { color: green; }`	Styles multiple elements together.

🎨 CSS Colors

You can define colors using:

Names: red, blue, green
Hex codes: #ff0000
RGB: rgb(255, 0, 0)
RGBA: rgba(255, 0, 0, 0.5) (with transparency)

Example:

body {
  background-color: #f0f0f0;
  color: #333;
}

🧱 CSS Box Model

Every HTML element is treated as a box consisting of:

Content
Padding
Border
Margin

div {
  margin: 20px;
  padding: 10px;
  border: 2px solid black;
}

📐 CSS Layout Techniques

1. Float

Used to position elements side by side.

img {
  float: left;
}

2. Flexbox

Modern layout system for flexible designs.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

3. Grid

Used for complex, two‑dimensional layouts.

.grid {

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

🖋️ CSS Fonts and Text

body {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  text-align: center;
  color: #222;
}

🌈 CSS Backgrounds

body {
  background-color: lightblue;
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

🧩 CSS Borders and Shadows

div {
  border: 2px solid #000;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}

🕹️ CSS Transitions and Animations

Transition Example

button {
  background-color: blue;
  transition: background-color 0.3s;
}
button:hover {
  background-color: green;
}

Animation Example

@keyframes move {
  from { left: 0; }
  to { left: 100px; }
}
div {
  position: relative;
  animation: move 2s infinite;
}

📱 Responsive Design with CSS

Responsive design ensures websites look good on all devices.

Example

@media (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

🧩 CSS Units

Unit	Description	Example
px	Pixels	`font-size: 16px;`
%	Percentage	`width: 50%;`
em	Relative to parent font size	`margin: 2em;`
rem	Relative to root font size	`padding: 1rem;`
vh/vw	Viewport height/width	`height: 100vh;`

🧠 CSS Positioning

Property	Description
`static`	Default position
`relative`	Positioned relative to itself
`absolute`	Positioned relative to parent
`fixed`	Stays fixed on screen
`sticky`	Sticks while scrolling

Example:

div {
  position: absolute;
  top: 50px;
  left: 100px;
}

🧩 CSS Z‑Index

Controls stacking order of elements.

div {
  position: absolute;
  z-index: 10;
}

🧠 CSS Variables

Reusable values for consistency.

:root {
  --main-color: #3498db;
}
h1 {
  color: var(--main-color);
}

🧩 CSS Frameworks

Popular frameworks that simplify styling:

Bootstrap
Tailwind CSS
Bulma
Foundation

🧠 Best Practices

Keep CSS organized and readable.
Use external stylesheets for large projects.
Avoid inline styles.
Use comments for clarity.
Test across browsers and devices.

Conclusion

CSS is the backbone of web design. It transforms plain HTML into beautiful, responsive, and interactive websites.

By mastering CSS — selectors, properties, layouts, and animations — you’ll gain the ability to design professional‑grade web pages that look great on any device.

Learn CSS, and you’ll unlock the creative side of web development.

ComputicsPlus

Search This Blog