Welcome to Day 08 of our HTML learning series! 🎉
Today, we’ll cover CSS (Cascading Style Sheets) and how you can use it to style your HTML pages.
.jpg)
What Is CSS?
CSS is used to format the layout of a webpage. Using CSS, you can customize text color, fonts, and sizes, adjust spacing between elements, control the positioning and layout of elements, set background images or colors, and define different display styles for various devices and screen sizes, among many other possibilities!
Ways to Add CSS to HTML
There are three primary ways to add CSS to an HTML document:
- Inline
- Internal
- External
1. Inline CSS
CSS is added directly to individual HTML elements using the
style attribute.
Example:
<p style="color: blue; font-size: 20px;">This is a blue paragraph with
inline CSS.</p>
2. Internal CSS
CSS is placed within a <style> tag inside the
<head> section of the
HTML document. This method is useful for styling a single page.
<!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 {
background-color: #f0f0f0;
}
h1 {
color: green;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>This is an Internal CSS Example</h1>
<p>This paragraph is styled with internal CSS. The background color, font size, and text color have been customized.</p>
</body>
</html>
3. External CSS
CSS is written in a separate file with the .css extension and
linked to the HTML document using the
<link> tag.
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 an External CSS Example</h1>
<p>This paragraph is styled using external CSS.</p>
</body>
</html>
Example (CSS file: styles.css):
body {
background-color: #f0f8ff;
}
h1 {
color: navy;
text-align: center;
}
p {
font-size: 16px;
color: #333;
}
CSS Syntax
CSS consists of two main parts:
Selector: Defines which HTML elements the styles should be applied to.
Declaration: Specifies the styles for the selected elements. Declarations
are written inside curly brackets {} and include properties and their
values.
Example:
p {
color: red; /* Property: color, Value: red */
font-size: 16px; /* Property: font-size, Value: 16px */
}
CSS Selectors
Selectors are used to target HTML elements for styling. Let’s go over some common selectors.
1. Type Selector
Targets all instances of a specific HTML element.
h1 {
color: blue;
}
<h1> elements blue2. Class Selector
Targets elements with a specific class name. Use the dot (.) before the class name
.intro {
font-size: 18px;
color: green;
}
You can apply this class to multiple elements in your HTML:
<p class="intro">This is an introductory paragraph.</p>
<p class="intro">Another paragraph with the same styling.</p>
3. ID Selector
Targets a specific element with a unique ID. Use the hash (#)
symbol before the ID name.
Example
#main-title {
text-align: center;
font-size: 24px;
}
<h1 id="main-title">Welcome to My Website</h1>4. Group Selector
Apply the same styles to multiple elements by separating selectors with a comma.
h1, h2, p {
font-family: Arial, sans-serif;
}
<h1>,
<h2>, and <p> elements.
.jpg&description=Introduction to CSS in HTML | Day 08 of HTML Learning Series){kind=link}