Chapter 12: Introduction to CSS – Styling HTML
CSS (Cascading Style Sheets) is a language used to style and visually enhance HTML content on a webpage. By separating content (HTML) from presentation (CSS), you can create visually appealing designs, control layout, and ensure consistent styling across a website. In this chapter, we’ll explore the basics of CSS, how to include it in HTML, and apply basic styling to elements.
1. What is CSS?
CSS defines the look and feel of a webpage by controlling properties like color, font, layout, and spacing. It enables you to style elements globally, improving consistency and efficiency in web design.
2. Ways to Include CSS in HTML
There are three main ways to apply CSS to HTML:
Inline CSS: Adds CSS directly within an HTML element using the style attribute.
Internal CSS: Adds CSS within a <style> tag inside the <head> section of an HTML document.
External CSS: Links an external .css file to the HTML document using the <link> tag in the <head> section.
Example of Each Method
1. Inline CSS
<p style="color: blue; font-size: 20px;">This is styled with inline CSS.</p>
2. Internal CSS
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is styled with internal CSS.</p>
</body>
</html>
3. External CSS
Create a CSS file (e.g., styles.css) and link it to the HTML document.
HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is styled with external CSS.</p>
</body>
</html>
styles.css:
p {
color: red;
font-size: 16px;
}
3. Basic CSS Selectors
CSS selectors are used to target HTML elements for styling. Here are some basic types:
Element Selector: Selects elements by their tag name.
p {
color: blue;
}
Class Selector: Selects elements by their class attribute, prefixed by a dot (.).
.highlight {
background-color: yellow;
}
ID Selector: Selects an element by its unique id attribute, prefixed by a hash (#).
#main-heading {
font-size: 24px;
}
Universal Selector: Selects all elements.
* {
margin: 0;
padding: 0;
}
4. CSS Properties
CSS properties define the specific styling rules for each selector. Here are some commonly used properties:
Color and Background: Set the text color and background of elements.
body {
color: #333;
background-color: #f4f4f4;
}
Fonts and Text: Define font families, sizes, and other text properties.
h1 {
font-family: Arial, sans-serif;
font-size: 32px;
text-align: center;
}
Spacing: Control padding (inside space) and margin (outside space).
.content {
padding: 20px;
margin: 10px;
}
5. The Box Model
The CSS box model is the foundation of layout and spacing in CSS. Every element is considered a rectangular box with four parts:
1. Content: The actual content within the element.
2. Padding: Space between content and border.
3. Border: Surrounds the padding.
4. Margin: Space outside the border, separating the element from others.
Example:
.box {
width: 200px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}
6. Styling Text and Fonts
CSS offers various properties to customize text appearance.
Font Family: Sets the font style.
p {
font-family: 'Helvetica', sans-serif;
}
Font Size: Sets the size of text.
h1 {
font-size: 24px;
}
Text Color and Alignment: Adjust text color and alignment.
.center-text {
color: #333;
text-align: center;
}
7. Styling Links
Links can be styled using pseudo-classes to give them different styles based on their state:
a:link: Default link state.
a:visited: Link after being clicked.
a:hover: Link when hovered over.
a:active: Link when clicked.
Example:
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: green;
}
8. Backgrounds and Borders
CSS allows you to style backgrounds and borders for creative effects.
Background Color and Image: Set a color or image as the background.
body {
background-color: #e0f7fa;
background-image: url('background.jpg');
}
Borders: Control border style, width, and color.
.bordered {
border: 2px solid black;
border-radius: 10px;
}
Summary
In this chapter, you learned the basics of CSS, including how to add it to HTML, use selectors, style text, control layout with the box model, and more. CSS is a powerful tool for creating visually engaging and consistent web designs. In the next chapter, we’ll dive deeper into advanced CSS layout techniques like Flexbox and Grid.
0 Comments