Chapter 5: Introduction To Cascading Style Sheets
Chapter 5: Introduction to Cascading Style Sheets (CSS)
Welcome to Chapter 5! Now that you're familiar with the basics of HTML and the structure of web pages, it's time to learn
about Cascading Style Sheets, commonly known as CSS. CSS is a cornerstone technology of the web, alongside HTML and JavaScript.
It is used to control the layout and appearance of HTML elements on a web page.
5.1 What is CSS?
CSS is a stylesheet language used to describe the presentation of a document written in HTML.
It allows you to create visually engaging web pages by controlling the design aspects like colors, fonts, layout,
and much more. CSS helps in separating the content (HTML) from its presentation (styling).
5.2 How CSS Works
CSS works by selecting HTML elements and applying styles to them. These styles can be specified in three different ways:
Inline Styles: CSS rules are applied directly within an HTML tag using the style attribute.
Internal (Embedded) Styles: CSS rules are placed inside a <style> tag in the <head> section of the HTML document.
External Stylesheets: CSS rules are written in a separate file with a .css extension and linked to the HTML document using a <link> tag.
5.3 Basic Syntax of CSS
A CSS rule consists of a selector and a declaration block:
selector {
property: value;
}
Selector: Specifies the HTML element you want to style.
Declaration Block: Contains one or more declarations separated by semicolons.
Property: The style attribute you want to change (e.g., color, font-size).
Value: The value you are assigning to the property (e.g., red, 12px).
p {
color: red;
font-size: 14px;
}
5.4 CSS Selectors
Selectors are patterns used to select the elements you want to style. There are several types:
Element Selector: Selects HTML elements by name.
Class Selector: Selects elements by the class attribute (prefixed with a .).
ID Selector: Selects a single element by its id attribute (prefixed with a #).
5.5 Combining HTML and CSS
To see CSS in action, let's combine it with HTML. Consider the following example:
HTML File (index.html):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p class="intro">This is a paragraph with an introduction.</p>
</body>
</html>
CSS File (styles.css):
h1 {
color: navy;
}
.intro {
font-size: 18px;
color: green;
}
5.6 The Cascade and Specificity
CSS stands for Cascading Style Sheets for a reason. The cascade is the process of combining different stylesheets and resolving
conflicts between different CSS rules and declarations, when more than one rule applies to a certain element. Specificity and
the order of CSS rules play a key role in this process.
5.7 Basic CSS Properties
Some common CSS properties you'll use include:
color: Defines the color of text.
font-family: Defines the typeface of text.
background-color: Sets the background color of an element.
margin: Controls the space outside an element.
padding: Controls the space inside an element.
border: Defines the border around an element.
Summary
In this chapter, you've been introduced to the basics of CSS, including its syntax, selectors, and how it's used
to style HTML elements. CSS is powerful and essential for creating visually attractive web pages.
Up Next: In the next chapter, we will dive deeper into advanced CSS properties and techniques, including layout
control with Flexbox and Grid, responsive design, and CSS animations. As you continue your journey in web development,
remember that mastering CSS is key to designing professional, modern, and responsive websites.