0dfg-bit

0dfg-bit

Back to Programming

CSS

Learn how to style and design web pages with CSS (Cascading Style Sheets), the language that brings the web to life.

CSS Basics

What is CSS?

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

While HTML provides the structure of a web page, CSS provides the visual styling. It allows you to control layout, colors, fonts, spacing, animations, and more.

CSS Syntax

CSS consists of selectors and declarations. The selector points to the HTML element you want to style, and the declaration block contains one or more declarations separated by semicolons.

selector { property: value; property: value; }

For example:

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

This CSS rule sets all <h1> elements to have blue text with a font size of 24 pixels.

CSS Selectors

Element Selectors
p {
  color: red;
}

Selects all <p> elements on the page and applies the style.

Class Selectors
.highlight {
  background-color: yellow;
}

Selects all elements with class="highlight" and applies the style.

ID Selectors
#header {
  background-color: black;
  color: white;
}

Selects the element with id="header" and applies the style.

Combinators
div p {
  margin-left: 20px;
}

Selects all <p> elements inside <div> elements.

Common CSS Properties

Text Styling
p {
  color: #333333;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
Box Model
div {
  width: 300px;
  height: 200px;
  padding: 20px;
  margin: 10px;
  border: 1px solid black;
}
Background
body {
  background-color: #f0f0f0;
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
}
Layout
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

The CSS Box Model

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

Margin
Border
Padding
Content
  • Content: The actual content of the box, where text and images appear.
  • Padding: The space between the content and the border.
  • Border: A border that goes around the padding and content.
  • Margin: The space outside the border, between this element and other elements.

Understanding the box model is crucial for controlling layout and spacing in CSS.

Modern CSS Layout Techniques

CSS has evolved significantly over the years, with powerful layout systems that make complex designs easier to implement:

Flexbox

Flexbox is a one-dimensional layout method designed for laying out items in rows or columns. It's perfect for components of an application and small-scale layouts.

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

CSS Grid

CSS Grid is a two-dimensional layout system designed for laying out items in rows and columns simultaneously. It's ideal for page layouts and complex components.

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

Responsive Design

Responsive design ensures that web pages look good on all devices. Media queries allow you to apply different styles based on device characteristics.

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Learning Resources

Continue your CSS journey with these resources:

Explore More Programming Languages