Scribd
Upload
2 views

CSS Course for Beginners

The document provides an introductory guide to CSS (Cascading Style Sheets), explaining its purpose, application methods (inline, internal, and external), and syntax. It covers various CSS selectors, text and background styling, the box model, display and position properties, and responsive design using media queries. Additionally, it includes a sample project and practice tasks for beginners to reinforce their learning.

Uploaded by

godfrey.svarukat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

CSS Course for Beginners

The document provides an introductory guide to CSS (Cascading Style Sheets), explaining its purpose, application methods (inline, internal, and external), and syntax. It covers various CSS selectors, text and background styling, the box model, display and position properties, and responsive design using media queries. Additionally, it includes a sample project and practice tasks for beginners to reinforce their learning.

Uploaded by

godfrey.svarukat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

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

You might also like