Introduction
In this chapter, you will learn about CSS (Cascading Style Sheets), which is used to style HTML elements. CSS allows you to control the layout, colors, fonts, and overall appearance of your web pages. By understanding CSS, you can create visually appealing and consistent designs.
What is CSS?
CSS (Cascading Style Sheets) is a language used to describe the presentation of a web page written in HTML or XML. CSS separates the content of the document from its visual presentation, allowing you to apply styles to multiple pages and elements efficiently.
Methods to Apply CSS
Inline CSS
Inline CSS is applied directly within an HTML element’s style attribute. This method is useful for quick styling of specific elements.
Syntax
<element style="property: value;">
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue;">This is a blue heading</h1>
<p style="font-size: 20px; color: red;">This is a red paragraph with larger text.</p>
</body>
</html>
Internal CSS
Internal CSS is defined within a <style> tag in the <head> section of an HTML document. This method is useful for applying styles to a single HTML document.
Syntax
<head>
<style>
selector {
property: value;
}
</style>
</head>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: green;
}
p {
font-size: 18px;
color: purple;
}
</style>
</head>
<body>
<h1>This is a green heading</h1>
<p>This is a purple paragraph with larger text.</p>
</body>
</html>
External CSS
External CSS is defined in a separate CSS file and linked to the HTML document using the <link> tag. This method is ideal for applying styles to multiple HTML documents, ensuring consistency across a website.
Syntax
<head>
<link rel="stylesheet" href="styles.css">
</head>
Example
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS File (styles.css)
body {
font-family: Arial, sans-serif;
}
h1 {
color: orange;
}
p {
font-size: 16px;
color: navy;
}
CSS Selectors
CSS selectors are used to select the HTML elements you want to style.
Types of Selectors
Element Selector
Selects elements by their tag name.
p {
color: blue;
}
Class Selector
Selects elements by their class attribute. Class selectors start with a dot (.).
.intro {
font-size: 18px;
}
ID Selector
Selects elements by their id attribute. ID selectors start with a hash (#).
#main {
background-color: lightgray;
}
Descendant Selector
Selects elements that are descendants of a specified element.
div p {
color: red;
}
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors Example</title>
<style>
/* Element Selector */
p {
color: blue;
}
/* Class Selector */
.intro {
font-size: 18px;
}
/* ID Selector */
#main {
background-color: lightgray;
}
/* Descendant Selector */
div p {
color: red;
}
</style>
</head>
<body>
<h1>CSS Selectors Example</h1>
<div id="main">
<p>This paragraph is inside a div and will be red.</p>
<p class="intro">This is an introduction paragraph and will be blue and 18px.</p>
</div>
</body>
</html>
Conclusion
CSS is used for styling HTML elements and creating visually appealing web pages. By using inline, internal, and external CSS, you can control the layout, colors, fonts, and overall appearance of your web pages. Understanding CSS selectors and how to apply styles effectively is essential for creating consistent and professional web designs.