CSS Fundamentals

Learn how to style your HTML documents with CSS selectors, properties, and layouts.

CSS Selectors

Selectors are patterns used to select the element(s) you want to style. There are many different types of selectors.

Element Selector

Selects all elements of a given type.

/* Selects all p elements */
p {
    color: blue;
}

Class Selector

Selects all elements with a specific class attribute.

/* Selects all elements with class="highlight" */
.highlight {
    background-color: yellow;
}

ID Selector

Selects an element with a specific id attribute.

/* Selects the element with id="header" */
#header {
    font-size: 24px;
}

Attribute Selector

Selects elements based on their attributes.

/* Selects all input elements with type="text" */
input[type="text"] {
    border: 1px solid gray;
}

Pseudo-class Selector

Selects elements in a specific state.

/* Selects links when hovered over */
a:hover {
    color: red;
}

/* Selects the first paragraph in its parent */
p:first-child {
    font-weight: bold;
}

CSS Properties

CSS properties define how to style HTML elements. Here are some of the most commonly used properties.

Color Properties

Control the colors of text and backgrounds.

  • color: Sets the text color
  • background-color: Sets the background color
  • opacity: Sets the transparency level
div {
    color: #333;
    background-color: lightblue;
    opacity: 0.8;
}

Text Properties

Control the appearance of text.

  • font-size: Sets the size of the font
  • font-family: Sets the font family
  • text-align: Aligns the text
  • text-decoration: Adds decoration to text
  • line-height: Sets the height of lines
p {
    font-size: 16px;
    font-family: Arial, sans-serif;
    text-align: center;
    text-decoration: underline;
    line-height: 1.5;
}

Box Model Properties

The box model describes how every HTML element can be seen as a rectangular box with margins, borders, padding, and content.

  • margin: Space outside the border
  • border: Border around the element
  • padding: Space inside the border
  • width/height: Size of the content area
.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

CSS Layout

CSS layout defines how elements are displayed on the page. Different layout techniques serve different purposes.

Display Property

Controls how an element is displayed in the document flow.

/* Display as block */
.block-element {
    display: block;
}

/* Display as inline */
.inline-element {
    display: inline;
}

/* Display as inline-block */
.inline-block-element {
    display: inline-block;
}

/* Hide the element */
.hidden-element {
    display: none;
}

Flexbox

Flexbox is a layout model that allows elements to align and distribute space within a container.

.flex-container {
    display: flex;
    justify-content: center; /* Horizontal alignment */
    align-items: center;     /* Vertical alignment */
    flex-wrap: wrap;         /* Allow wrapping */
}

.flex-item {
    flex: 1;                 /* Distribute space equally */
}

CSS Grid

Grid layout creates a grid-based layout system with rows and columns.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
    grid-gap: 10px;                      /* Gap between items */
}

.grid-item {
    background-color: lightgray;
    padding: 10px;
}

CSS Positioning

CSS positioning allows you to control exactly where and how elements are positioned on the page.

Position Values

  • static: Default positioning
  • relative: Positioned relative to its normal position
  • absolute: Positioned relative to the nearest positioned ancestor
  • fixed: Positioned relative to the viewport
  • sticky: Positioned based on the user's scroll position
/* Relative positioning */
.relative-box {
    position: relative;
    top: 20px;
    left: 30px;
}

/* Absolute positioning */
.absolute-box {
    position: absolute;
    top: 10px;
    right: 15px;
}

/* Fixed positioning */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}