CSS Course for Beginners
What is CSS?
CSS stands for Cascading Style Sheets. It is the language used to describe how HTML elements
should appear on the screen. While HTML is used to create the structure of a web page, CSS is
used to style and lay it out.
Why use CSS?
To make your website look attractive.
To apply consistent styles across multiple web pages.
To control layout and appearance for different screen sizes.
"Cascading" means that if more than one style rule applies to an element, the browser decides
which one to use based on specificity and order.
How to Apply CSS
There are three main ways to apply CSS to HTML:
a) Inline CSS
CSS rules written directly inside an HTML tag using the style attribute.
<p style="color: red; font-size: 16px;">This text is red and 16px.</p>
Use: Good for testing or quick styling.
b) Internal CSS
CSS rules written inside a <style> tag in the <head> section of the HTML file.
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is blue and 18px text.</p>
</body>
</html>
Use: Best for small projects or single HTML files.
c) External CSS
CSS rules are stored in a separate .css file and linked to the HTML using <link> tag.
HTML (index.html):
<head>
<link rel="stylesheet" href="style.css">
</head>
CSS (style.css):
body {
background-color: #f4f4f4;
color: #333;
}
Use: Best practice for real websites. Keeps styling separate and organized.
CSS Syntax
CSS consists of selectors and declarations.
selector {
property: value;
}
Example:
h1 {
color: green;
font-size: 24px;
}
h1 is the selector (targets all <h1> elements).
color and font-size are properties.
green and 24px are values.
Multiple declarations are enclosed in {} and separated by ;.
CSS Selectors Explained
CSS selectors are used to "select" the HTML elements you want to style.
Types of selectors:
a) Universal Selector:
*{
margin: 0;
padding: 0;
}
Selects all elements.
b) Type Selector:
p{
color: red;
}
Selects all <p> elements.
c) Class Selector:
.title {
font-weight: bold;
}
Selects elements with class="title".
d) ID Selector:
#header {
background-color: gray;
}
Selects element with id="header".
e) Descendant Selector:
div p {
color: green;
}
Selects all <p> inside <div>.
f) Grouping Selectors:
h1, h2, h3 {
font-family: Arial;
}
Applies style to all listed tags.
Text Styling in CSS
Example:
p{
color: #333;
font-size: 18px;
font-family: 'Verdana', sans-serif;
font-weight: bold;
font-style: italic;
text-align: center;
text-decoration: underline;
letter-spacing: 2px;
}
Explanation:
color: Text color
font-size: Size of the text
font-family: Font type
font-weight: Normal, bold
font-style: Normal, italic
text-align: left, center, right
text-decoration: underline, line-through, none
letter-spacing: space between letters
Background Styling
Example:
body {
background-color: lightblue;
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
background-color: sets background color
background-image: sets image
background-repeat: repeat or no-repeat
background-size: contain, cover, etc.
background-position: top, center, etc.
Box Model in CSS
Every HTML element is a box made of:
1. Content
2. Padding
3. Border
4. Margin
Example:
div {
width: 300px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}
Display Property
Common values:
block: Takes full width (e.g., <div>, <p>)
inline: Takes only the needed width (e.g., <span>, <a>)
inline-block: Like inline, but allows setting width/height
none: Hides the element
span {
display: inline-block;
width: 100px;
height: 50px;
}
Position Property
Used to place elements precisely.
Types:
static (default)
relative (relative to itself)
absolute (relative to parent)
fixed (relative to browser window)
div {
position: absolute;
top: 20px;
left: 50px;
}
10. Responsive Design with Media Queries
@media screen and (max-width: 600px) {
body {
background-color: yellow;
}
}
Changes styles when screen is smaller than 600px.
Sample Project — Styled Personal Bio Page
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>My Bio</title>
</head>
<body>
<h1 class="title">Tafadzwa's Page</h1>
<p class="desc">I love web development and teaching.</p>
<img src="me.jpg" alt="My Photo" class="photo">
</body>
</html>
style.css
body {
background-color: #fefefe;
font-family: Arial;
padding: 20px;
text-align: center;
}
.title {
color: darkblue;
font-size: 32px;
}
.desc {
font-size: 18px;
color: #555;
}
.photo {
width: 200px;
border-radius: 50%;
border: 3px solid navy;
}
Practice Tasks
Task 1:
Create a web page with:
Pink background
Heading in green, 36px
Paragraphs in italic and centered
Image with a border
Task 2:
Use media queries to:
Change background to lightgray on small screens
Increase font size of heading on large screens
