Introduction to CSS - Enhanced Notes
1. What is CSS?
CSS (Cascading Style Sheets) is a language used to style HTML documents. It allows developers to
separate content (HTML) from design (CSS). With CSS, you can control the layout, colors, fonts, and overall
appearance of a website, making it more engaging and user-friendly.
2. Types of CSS
There are three main types of CSS:
- Inline CSS: Applied directly within an HTML element using the 'style' attribute. Best for quick fixes.
- Internal CSS: Defined within a <style> tag inside the <head> section of the HTML file. Useful for single-page
styles.
- External CSS: Stored in a separate .css file and linked to HTML. Ideal for larger websites for better
organization and reuse.
<p style="color: red;">This is inline CSS.</p>
<head>
<style>
p { color: blue; }
</style>
</head>
<link rel="stylesheet" href="styles.css">
3. CSS Syntax
CSS syntax consists of a selector and a declaration block. The selector points to the HTML element, and the
declaration block contains property-value pairs.
selector {
property: value;
}
p {
color: green;
font-size: 16px;
}
Introduction to CSS - Enhanced Notes
4. CSS Selectors
Selectors are patterns used to select and style HTML elements. Common selectors include:
- Element selector: targets elements by tag name (e.g., p, h1)
- Class selector: starts with a dot (.) (e.g., .box)
- ID selector: starts with a hash (#) (e.g., #header)
- Grouping selector: combines multiple selectors
- Descendant selector: targets elements inside another
p {
color: blue;
}
.box {
border: 1px solid black;
}
#header {
background-color: gray;
}
h1, h2 {
text-align: center;
}
div p {
font-style: italic;
}
5. CSS Colors
CSS allows you to use various formats to specify colors:
- Color names (e.g., red, green)
- Hex codes (e.g., #ff0000)
- RGB values (e.g., rgb(255,0,0))
- HSL values (e.g., hsl(0, 100%, 50%))
body {
background-color: #f0f0f0;
Introduction to CSS - Enhanced Notes
color: rgb(50, 50, 50);
}
6. CSS Backgrounds
Background properties allow you to style the background of elements. You can use colors, images, gradients,
and more.
body {
background-color: lightblue;
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-size: cover;
}
7. CSS Fonts
Fonts in CSS are managed using properties such as font-family, font-size, font-weight, and font-style. Google
Fonts is also a popular option.
p {
font-family: 'Arial', sans-serif;
font-size: 14px;
font-weight: bold;
}
8. CSS Text Formatting
CSS provides various text properties like text-align, text-decoration, text-transform, and letter-spacing to style
text appearance.
h1 {
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
}
9. CSS Box Model
The CSS box model describes how elements are displayed as rectangular boxes. It includes:
Introduction to CSS - Enhanced Notes
- Content: The actual content of the box
- Padding: Space around the content
- Border: A border surrounding the padding
- Margin: Space outside the border
div {
margin: 10px;
padding: 20px;
border: 1px solid black;
}
10. Exercises
Try the following:
1. Create a simple HTML page with a heading and a paragraph.
2. Apply an external CSS file to change the background color and font style.
3. Use selectors to style specific elements.
4. Apply the box model to create a card layout.
5. Try using Google Fonts in your web page.