Programming

CSS Tutorial for Beginners

Markus

Jan 8, 2024 — 14 min read

CSS stands for Cascading Style Sheets. It is the language that defines the style and layout of HTML elements, such as colors, fonts, borders, backgrounds, etc. CSS can make your web pages more attractive and interactive, as well as adapt to different devices and screen sizes.

Related prerequsites (optional, but recommended):

CSS Syntax

A CSS document consists of one or more rules. Each rule has two main parts: a selector and a declaration block. A selector is a pattern that matches one or more HTML elements. A declaration block is a set of declarations that apply to the selected elements. Each declaration has a property and a value, separated by a colon. A property is a specific aspect of an element that can be styled, such as color, font-size, margin, etc. A value is the desired setting for the property, such as red, 20px, 10%, etc.

Here is an example of a CSS rule:

p {
  color: blue;
  font-size: 16px;
}

This rule selects all <p> elements in the HTML document and applies two declarations to them: color: blue; and font-size: 16px;. This means that all paragraphs will have blue text and 16 pixels font size.

A CSS document can have multiple rules, separated by semicolons. Each declaration in a declaration block can also be separated by semicolons. You can also use whitespace and indentation to make your CSS code more readable and organized.

Here is an example of a CSS document with multiple rules:

h1 {
  color: red;
  text-align: center;
}

p {
  color: blue;
  font-size: 16px;
}

img {
  border: 5px solid black;
}

This document has three rules: one for <h1> elements, one for <p> elements, and one for <img> elements. Each rule has different declarations that style the selected elements in different ways.

CSS Linking

To use CSS in your HTML document, you need to link the CSS document to the HTML document. There are three different ways to do that, but the most common and recommended way is to use an external stylesheet. An external stylesheet is a separate CSS file that can be linked to one or more HTML files. This way, you can keep your HTML and CSS code separate and organized, as well as reuse the same CSS file for multiple web pages.

To link an external stylesheet to your HTML document, you need to use the <link> element in the <head> section of your HTML document. The <link> element has two attributes: rel and href. The rel attribute specifies the relationship between the HTML document and the linked file. The value of this attribute should be stylesheet for CSS files. The href attribute specifies the location or URL of the linked file. The value of this attribute should be the name or path of your CSS file.

Here is an example of linking an external stylesheet to an HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>My First Web Page</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <!-- Your HTML content goes here -->
</body>
</html>

This HTML document links to a CSS file named styles.css in the same folder. You can also use relative or absolute paths to link to CSS files in different folders or locations.

CSS Examples

To see how CSS works in action, let’s look at some examples of using CSS to style HTML elements. You can use our online editor below to edit the CSS code and see the result in the browser.

Example 1: Changing colors

One of the most basic things you can do with CSS is to change the colors of HTML elements. You can use the color property to change the text color, and the background-color property to change the background color. You can use different types of values for colors, such as names, hexadecimal codes, RGB values, HSL values, etc.

Here is an example of changing the colors of some HTML elements:

h1 {
  color: white;
  background-color: green;
}

p {
  color: #ff0000; /* hexadecimal code for red */
}

span {
  color: rgb(0, 0, 255); /* RGB value for blue */
}

This CSS code changes the color of the <h1> element to white and the background color to green. It also changes the color of the <p> element to red using a hexadecimal code, and the color of the <span> element to blue using an RGB value.

Example 2: Changing fonts

Another thing you can do with CSS is to change the fonts of HTML elements. You can use the font-family property to specify the font name or family, and the font-size property to specify the font size. You can also use other properties, such as font-weight, font-style, text-align, text-decoration, etc. to modify the appearance or alignment of the text.

Here is an example of changing the fonts of some HTML elements:

h1 {
  font-family: Arial, sans-serif;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
}

p {
  font-family: "Times New Roman", serif;
  font-size: 18px;
  font-style: italic;
  text-decoration: underline;
}

This CSS code changes the font family of the <h1> element to Arial, a sans-serif font, and the font size to 36 pixels. It also makes the text bold and centered. It also changes the font family of the <p> element to Times New Roman, a serif font, and the font size to 18 pixels. It also makes the text italic and underlined.

Example 3: Changing margins and padding

Another thing you can do with CSS is to change the margins and padding of HTML elements. Margins and padding are the spaces around and inside the elements, respectively. You can use the margin and padding properties to specify the amount of space in pixels, percentages, or other units. You can also use the margin-top, margin-right, margin-bottom, and margin-left properties to specify the margin for each side of the element. Similarly, you can use the padding-top, padding-right, padding-bottom, and padding-left properties to specify the padding for each side of the element.

Here is an example of changing the margins and padding of some HTML elements:

h1 {
  margin: 20px; /* same margin for all sides */
  padding: 10px; /* same padding for all sides */
}

p {
  margin-top: 10px; /* margin only for the top side */
  margin-bottom: 10px; /* margin only for the bottom side */
  padding-left: 20px; /* padding only for the left side */
  padding-right: 20px; /* padding only for the right side */
}

This CSS code changes the margin of the <h1> element to 20 pixels for all sides, and the padding to 10 pixels for all sides. It also changes the margin of the <p> element to 10 pixels for the top and bottom sides, and the padding to 20 pixels for the left and right sides.

CSS Tips and Tricks

Here are some tips and tricks that can help you create better web pages with CSS:

Use comments to add notes or explanations to your CSS code. Comments are ignored by the browser and do not affect the output of your web page. You can create a comment by using the syntax /* comment */.
Use classes and ids to target specific HTML elements with CSS. Classes and ids are attributes that you can add to HTML elements to give them unique names or identifiers. You can then use the dot (.) notation to select elements by class, or the hash (#) notation to select elements by id. For example, <p class="intro">This is an introduction.</p> can be selected by using .intro in CSS, and <p id="main">This is the main content.</p> can be selected by using #main in CSS.
Use media queries to create responsive web pages that adapt to different devices and screen sizes. Media queries are expressions that allow you to apply different CSS rules based on certain conditions, such as the width, height, orientation, resolution, etc. of the device or viewport. You can use the @media rule to define media queries in CSS. For example, @media (max-width: 600px) { /* CSS rules for small screens */ } applies the CSS rules inside the curly braces only when the screen width is less than or equal to 600 pixels.

Use CSS variables to store and reuse values in your CSS code.

CSS variables are custom properties that you can define and use in your CSS code. You can use the -- notation to create a variable, and the var() function to use a variable. For example, :root { --main-color: green; } creates a variable named --main-color with the value of green, and h1 { color: var(--main-color); } uses the variable to set the color of the <h1> element.

CSS variables have many advantages, such as:

They make your code more readable and maintainable, as you can use meaningful names for your values instead of hard-coded ones.
They make your code more flexible and dynamic, as you can change the value of a variable in one place and affect all the elements that use it.
They make your code more responsive and adaptable, as you can use media queries or JavaScript to change the value of a variable based on certain conditions.

Here is an example of using CSS variables to create a simple color theme for a web page:

:root {
  --primary-color: #1e90ff;
  --secondary-color: #ffffff;
  --accent-color: #ff4500;
}

body {
  background-color: var(--primary-color);
}

h1 {
  color: var(--secondary-color);
  text-align: center;
}

p {
  color: var(--secondary-color);
  font-size: 18px;
}

button {
  background-color: var(--accent-color);
  color: var(--secondary-color);
  border: none;
  padding: 10px;
  cursor: pointer;
}

This CSS code defines three variables for the main colors of the web page: --primary-color, --secondary-color, and --accent-color. It then uses these variables to style the <body>, <h1>, <p>, and <button> elements.

CSS Selectors

CSS selectors are patterns that match one or more HTML elements. You can use CSS selectors to apply different styles to different elements in your web page. CSS selectors are very powerful and flexible, as they allow you to select elements based on their attributes, position, relationship, state, etc.

There are many types of CSS selectors, but the most basic ones are:

Element selector: This selector matches all elements of a given type. For example, p selects all <p> elements in the HTML document.
Class selector: This selector matches all elements that have a specific class attribute. For example, .intro selects all elements that have class="intro" in the HTML document.
Id selector: This selector matches the element that has a specific id attribute. For example, #main selects the element that has id="main" in the HTML document.

Here is an example of using these selectors to style some HTML elements:

/* Element selector */
p {
  color: blue;
}

/* Class selector */
.intro {
  font-weight: bold;
}

/* Id selector */
#main {
  background-color: yellow;
}

This CSS code selects and styles the <p> elements, the elements with class="intro", and the element with id="main" in different ways.

Flexbox

CSS flexbox is a layout mode that allows you to create flexible and responsive layouts with ease. You can use CSS flexbox to align, distribute, and reorder HTML elements in different directions and sizes, without using floats, margins, or positioning.

To use CSS flexbox, you need to define a flex container and flex items. A flex container is an element that contains one or more flex items. A flex item is an element that is a direct child of a flex container. You can use the display property to set an element as a flex container, with the value of flex or inline-flex. For example, <div style="display: flex;"> creates a flex container with a block-level display.

A flex container has two main axes: the main axis and the cross axis. The main axis is the primary direction in which the flex items are laid out. The cross axis is the perpendicular direction to the main axis. The main axis and the cross axis depend on the flex direction, which is the direction in which the flex items are placed in the flex container. You can use the flex-direction property to set the flex direction, with the values of row, row-reverse, column, or column-reverse. For example, flex-direction: row; sets the main axis as horizontal and the cross axis as vertical, and places the flex items from left to right.

A flex container also has two main properties that control how the flex items are aligned and distributed along the main axis and the cross axis: the justify-content and the align-items properties. The justify-content property defines how the flex items are spaced along the main axis, with the values of flex-start, flex-end, center, space-between, space-around, or space-evenly. For example, justify-content: center; centers the flex items along the main axis. The align-items property defines how the flex items are aligned along the cross axis, with the values of stretch, flex-start, flex-end, center, or baseline. For example, align-items: stretch; stretches the flex items to fill the flex container along the cross axis.

Here is an example of using CSS flexbox to create a simple layout with three flex items:

/* Flex container */
div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 200px;
  border: 2px solid black;
}

/* Flex items */
p {
  width: 100px;
  height: 100px;
  background-color: green;
  color: white;
  font-size: 24px;
  text-align: center;
  line-height: 100px;
}

This CSS code creates a flex container with a row direction, a space-between justification, and a center alignment. It also creates three flex items with a fixed width and height, a green background color, a white text color, a large font size, a center text alignment, and a vertical center text position.

Grid

CSS grid is another layout mode that allows you to create complex and responsive layouts with ease. You can use CSS grid to divide your web page into rows and columns, and place your HTML elements into different grid cells. You can also use CSS grid to create overlapping, nested, and irregular layouts.

To use CSS grid, you need to define a grid container and grid items. A grid container is an element that contains one or more grid items. A grid item is an element that is a direct child of a grid container. You can use the display property to set an element as a grid container, with the value of grid or inline-grid. For example, <div style="display: grid;"> creates a grid container with a block-level display.

A grid container has two main properties that control how the grid is divided and sized: the grid-template-rows and the grid-template-columns properties. The grid-template-rows property defines the number and size of the grid rows, and the grid-template-columns property defines the number and size of the grid columns. You can use different types of values for these properties, such as pixels, percentages, fractions, etc.

Here is an example of using CSS grid to create a simple layout with four grid items:

/* Grid container */
div {
  display: grid;
  grid-template-rows: 100px 100px; /* two rows of 100 pixels each */
  grid-template-columns: 50% 50%; /* two columns of 50% each */
  gap: 10px; /* space between grid cells */
  border: 2px solid black;
}

/* Grid items */
p {
  background-color: green;
  color: white;
  font-size: 24px;
  text-align: center;
  line-height: 100px;
}

This CSS code creates a grid container with two rows and two columns, each with a fixed size.

It also creates four grid items with a green background color, a white text color, a large font size, a center text alignment, and a vertical center text position.

CSS transitions

CSS transitions and animations are effects that allow you to create smooth and dynamic changes to the style and position of HTML elements. You can use CSS transitions and animations to add interactivity and visual appeal to your web pages.

A CSS transition is a change from one CSS property value to another over a specified duration. You can use CSS transitions to create smooth and gradual effects when an element changes its state, such as when it is hovered over, clicked on, focused on, etc.

To create a CSS transition, you need to specify two things: the property and the duration. The property is the CSS property that you want to transition, such as color, width, transform, etc. The duration is the time it takes for the transition to complete, in seconds or milliseconds. You can use the transition-property and transition-duration properties to specify these values, or use the shorthand transition property to specify them in one line.

Here is an example of creating a CSS transition for the <button> element:

/* Normal state */
button {
  background-color: green;
  color: white;
  width: 100px;
  height: 50px;
  border: none;
  cursor: pointer;
}

/* Hover state */
button:hover {
  background-color: yellow;
  color: black;
  width: 150px;
  height: 75px;
}

/* Transition */
button {
  transition: all 0.5s; /* transition all properties for 0.5 seconds */
}

This CSS code creates a transition for the <button> element that changes its background color, text color, width, and height when it is hovered over. The transition lasts for 0.5 seconds and applies to all properties.

You can also specify other aspects of the transition, such as the timing function and the delay. The timing function is the speed curve of the transition, which determines how the transition progresses over time. You can use the transition-timing-function property to specify the timing function, with the values of linear, ease, ease-in, ease-out, ease-in-out, or a custom cubic-bezier function. For example, transition-timing-function: ease-in; makes the transition start slowly and end fast. The delay is the time before the transition starts, in seconds or milliseconds. You can use the transition-delay property to specify the delay. For example, transition-delay: 0.5s; makes the transition start after 0.5 seconds.

Here is an example of using the timing function and the delay for the <button> element:

/* Normal state */
button {
  background-color: green;
  color: white;
  width: 100px;
  height: 50px;
  border: none;
  cursor: pointer;
}

/* Hover state */
button:hover {
  background-color: yellow;
  color: black;
  width: 150px;
  height: 75px;
}

/* Transition */
button {
  transition: all 0.5s ease-in-out 0.5s; /* transition all properties for 0.5 seconds with ease-in-out timing function and 0.5 seconds delay */
}

Take it a step further

HTML & CSS are all show. For actual functionality - you must learn how to program. Learning JavaScript will combine all of your HTML and CSS knowledge and let you make a real application!

Conclusion

This is the end of the CSS tutorial for beginners. I hope you learned something new and useful about CSS, as it makes all websites shine (if used correctly).

There's a lot more to this topic, such as animations, media-queries, toolkits such as SASS/SCSS or even CSS libraries (Bootstrap, Tailwind). Once you're comfortable, be sure to look those up! 😊