Scribd
Upload
2 views

CSS Basics Handout

This document provides a comprehensive overview of CSS (Cascading Style Sheets), detailing its role in styling HTML documents, methods for adding CSS to HTML, and various selectors and properties. It covers modern layout techniques like Flexbox and CSS Grid, as well as responsive design using media queries. Best practices for using CSS effectively are also highlighted, along with suggestions for further learning and practice.

Uploaded by

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

CSS Basics Handout

This document provides a comprehensive overview of CSS (Cascading Style Sheets), detailing its role in styling HTML documents, methods for adding CSS to HTML, and various selectors and properties. It covers modern layout techniques like Flexbox and CSS Grid, as well as responsive design using media queries. Best practices for using CSS effectively are also highlighted, along with suggestions for further learning and practice.

Uploaded by

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

CSS Basics Handout

Learn how to style websites with Cascading Style Sheets (CSS)

1. Introduction to CSS
CSS (Cascading Style Sheets) controls the presentation of HTML documents.

Key Features:

 Styles colors, fonts, layouts, animations


 Works with HTML & JavaScript
 Enables responsive design (mobile-friendly sites)

2. Adding CSS to HTML


1. Inline CSS (Inside HTML Tags)
html

Copy
Download
Run
<h1 style="color: blue; font-size: 24px;">Hello!</h1>

❌ Avoid (hard to maintain)

2. Internal CSS (Inside <style> Tag)


html

Copy
Download
Run
<head>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>

✅ Good for small projects

3. External CSS (Best Practice)


html

Copy
Download
Run
<head>
<link rel="stylesheet" href="styles.css">
</head>

📁 styles.css
css

Copy
Download
h1 {
color: blue;
font-size: 24px;
}

✅ Best for large projects

3. CSS Selectors
Selector Example Description

Element p { } Selects all <p> tags


Selector Example Description

Class .intro { } Selects class="intro"

ID #header { } Selects id="header"

Descendant div p { } Selects <p> inside <div>

Grouping h1, h2 { } Styles multiple elements

4. Common CSS Properties


Text & Fonts
css

Copy
Download
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
text-align: center;
line-height: 1.5;
}

Colors & Backgrounds


css

Copy
Download
h1 {
color: white;
background-color: #1e90ff;
background-image: url("bg.jpg");
}

Box Model (Margin, Padding, Border)


css
Copy
Download
.box {
width: 200px;
height: 100px;
margin: 20px; /* Space outside */
padding: 15px; /* Space inside */
border: 2px solid black;
border-radius: 10px;
}

Display & Positioning

Property Values Description

display block, inline, flex, grid Controls layout flow

position static, relative, absolute, fixed Positioning behavior

float left, right Wraps text around elements

5. Flexbox (Modern Layouts)


Flexbox makes responsive layouts easier.
css

Copy
Download
.container {
display: flex;
justify-content: center; /* Horizontal alignment */
align-items: center; /* Vertical alignment */
gap: 20px; /* Space between items */
}

.item {
flex: 1; /* Expands to fill space */
}
6. CSS Grid (Advanced Layouts)
Grid allows 2D layouts (rows & columns).
css

Copy
Download
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
grid-gap: 10px;
}

.item {
grid-column: span 2; /* Takes 2 columns */
}

7. Responsive Design (Media Queries)


Adjust styles based on screen size.
css

Copy
Download
/* Default styles */
body {
font-size: 16px;
}

/* Tablet (768px and up) */


@media (min-width: 768px) {
body {
font-size: 18px;
}
}
/* Desktop (1024px and up) */
@media (min-width: 1024px) {
body {
font-size: 20px;
}
}

8. CSS Best Practices


✔ Use external stylesheets
✔ Avoid !important (causes conflicts)
✔ Use semantic class names (.card, not .blue-box)
✔ Keep styles DRY (Don’t Repeat Yourself)

9. Next Steps
 Learn CSS animations & transitions
 Explore CSS frameworks (Bootstrap, Tailwind)
 Practice by:

o Styling a navigation bar


o Creating a responsive card layout
o Building a mobile-first webpage

You might also like