Introducing Cascading Style Sheets (CSS)

Objective

After completing this lesson, you will be able to describe the significance of Cascading Style Sheets (CSS) in styling web pages

Introduction to CSS

Introduction

Cascading Style Sheets (CSS) is a design language that breathes life into otherwise ordinary HTML documents with beauty, responsiveness, and interactivity.

The following video gives you a short introduction to CSS.

Let's go into the details of why you need CSS.

Separation of content and presentation: CSS allows you to keep the visual design separate from the HTML content. This separation makes it easier to maintain and update the look of your website without affecting the underlying content.
Consistency and reusability: By creating a central CSS file, you can apply consistent styles across multiple pages on your website. This ensures a uniform appearance and makes it easy to update the design without having to modify each individual page.
Responsive design: CSS enables you to create web designs that adapt to different screen sizes and devices. With the help of media queries, you can ensure that your website looks great and functions well on desktops, tablets, and smartphones.
Enhanced aesthetics: CSS provides a wide range of properties to style text, images, backgrounds, and other elements, allowing you to create visually appealing web pages that cater to your target audience's preferences.
Improved user experience: CSS offers various techniques to improve the user experience, such as transitions, animations, and interactive elements. These features can make your website more engaging and enjoyable for users.
Faster page loading: By using CSS efficiently, you can reduce the amount of code required to style your web pages, resulting in faster loading times and improved performance.
Accessibility: CSS allows you to create accessible websites that cater to users with different abilities and preferences. By following best practices, you can ensure that your web content is usable by a wide range of users, including those with visual impairments or assistive technologies.

Basic Steps to Write CSS

Start Writing CSS

To start writing CSS, follow these steps:

Create an HTML file: First, create an HTML file where you want to apply your CSS styles. For example, you can name your file index.html.
Create a CSS file: Next, create a separate CSS file where you'll write your styles. This is known as an external stylesheet. Name it something like styles.css.

Link the CSS file to the HTML file: In the <head> section of your HTML file, add a <link> element to reference your external stylesheet. The href attribute should point to the location of your CSS file.

Refer to the following code snippet.

Code Snippet

123456789101112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Website Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Your HTML content goes here -->
</body>
</html>

Write CSS in the CSS file: Now, you can start writing your CSS rules in the styles.css file. You'll need to use selectors to target specific HTML elements, and then define the styles you want to apply to those elements.
Refer to the following code snippet.
Code Snippet
```
123456789101112131415161718192021
/* styles.css */


/* Set the font family for the entire document */
body {
font-family: Arial, sans-serif;
}


/* Style headings */
h1 {
font-size: 2rem;
color: #007bff;
}


/* Style paragraphs */
p {
font-size: 1rem;
color: #333;
}
```
In this example, we've defined styles for the <body>, <h1>, and <p> elements using element selectors. You can add more styles and selectors based on your design requirements.
Save and preview your work: Save your HTML and CSS files, then open the HTML file in a web browser to see your styles applied. As you make changes to your CSS file, remember to save it and refresh the browser to see the updated styles.

Remember, these are just the basics to get you started. As you become more familiar with CSS, you'll be able to explore more advanced techniques and create more sophisticated designs.

Next lesson