What is CSS? A Comprehensive Guide with Examples

Example 1: Styling Text

One of the most common uses of CSS is styling text. You can change the colour, font size, font family, and more.

p {
color: #333;
font-family: Arial, sans-serif;
line-height: 1.5;
}

In this example, the CSS targets all <p> elements and applies the following styles:

• The text color is set to a dark gray (#333).
• The font family is set to Arial, with a fallback to sans-serif.
• The line-height is set to 1.5 to improve readability.

Example 2: Adding a Background Image

CSS can also be used to add background images to elements. For example, to add a background image to a webpage:

body {
background-image: url(‘background.jpg’);
background-size: cover;
background-position: center;
}

This CSS rule sets a background image for the entire page (body element). The background-size: cover; ensures the image covers the entire page, while background-position: center; centers the image.

Example 3: Styling Links

CSS can be used to style links, such as changing their color when hovered over.

a {
color: blue;
text-decoration: none;
}

a:hover {
color: red;
text-decoration: underline;
}

In this example:

• All <a> (anchor) elements are styled with a blue color and no underline.
• When the user hovers over a link, the colour changes to red, and an underline appears.

Example 4: Creating a Simple Layout

CSS allows you to create responsive layouts using techniques like Flexbox or Grid. Here’s an example using Flexbox to create a simple two-column layout:

.container {
display: flex;
flex-direction: row;
}

.left {
flex: 1;
background-color: #f4f4f4;
padding: 20px;
}

.right {
flex: 2;
background-color: #e2e2e2;
padding: 20px;
}

In this example:

• The .container class uses display: flex; to create a flexible container.
• The .left and .right classes define two columns with different background colours and padding. The .right column takes up twice the space of the .left column.

Advanced CSS Features

1. Media Queries

Media queries are used to apply different styles depending on the screen size or device. This is essential for responsive design, ensuring that your website looks good on desktops, tablets, and smartphones.

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

In this example, the background colour will change to light gray when the screen width is 768 pixels or less.

2. CSS Animations

CSS can also be used to create simple animations. For example, you can animate the movement of an element:

@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}

.box {
animation: slide 2s infinite;
}

n this example, the .box element will slide horizontally by 100 pixels over 2 seconds and repeat the animation infinitely.