Scribd
Upload
4 views13 pages

CSS 01 - 075655

CSS (Cascading Style Sheets) is a language that describes the presentation of HTML webpages, controlling layout, colors, fonts, and more. It promotes separation of content and design, consistency, and responsive design, with best practices recommending the use of external CSS. The document also covers CSS syntax, selectors, properties, the box model, and includes mini projects for practical application.

Uploaded by

zubair47374
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
4 views13 pages

CSS 01 - 075655

CSS (Cascading Style Sheets) is a language that describes the presentation of HTML webpages, controlling layout, colors, fonts, and more. It promotes separation of content and design, consistency, and responsive design, with best practices recommending the use of external CSS. The document also covers CSS syntax, selectors, properties, the box model, and includes mini projects for practical application.

Uploaded by

zubair47374
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/ 13

CSS Notes

✅ What is CSS?

CSS (Cascading Style Sheets) is a language used to describe the presentation (look and formatting) of a
webpage written in HTML.

HTML = Structure
CSS = Styling / Presentation

It controls:

• Layout
• Colors
• Fonts
• Spacing
• Animations
• Responsiveness

⭐ Importance of CSS in Web Development

• Separation of content and design: Keeps HTML clean.


• Consistency: One CSS file can style multiple pages.
• Reusability: Reuse styles across different elements/pages.
• Responsive Design: Works with media queries for mobile-first design.
• Visual Appeal: Makes websites modern and interactive.

🧾
Types of CSS

Type Description Example


Written directly inside HTML tag using
Inline <h1 style="color: red;">Hello</h1>
style attribute
Written in <style> tag inside the <head> <style> h1 { color: blue; }
Internal </style>
of HTML
Written in a separate .css file and linked via <link rel="stylesheet"
External href="styles.css">
<link>
🔔
Best Practice: Use External CSS for real projects to keep code modular and clean.

🔤
CSS Syntax & Selectors

Basic Syntax:

selector {
property: value;
}

Common Selectors:

Selector Example Description


element h1 Selects all <h1> elements
.class .card Selects all elements with class card
#id #header Selects element with ID header
* * Selects all elements
element1, element2 h1, p Selects all <h1> and <p>
element element div p All <p> inside <div>

🛠 Applying CSS to HTML

1. Inline CSS

<p style="color: green; font-size: 18px;">This is inline CSS</p>

2. Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p>This is internal CSS</p>
</body>
</html>

3. External CSS

HTML File:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p class="text">This is external CSS</p>
</body>
</html>

style.css:

.text {
color: purple;
font-weight: bold;
}

💡 Code Snippets (Extras)

🎨 Styling a button

button {
background-color: teal;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
}
🧱
Center an element
.center {
margin: 0 auto;
width: 50%;
text-align: center;
}

🧩
Mini Project: "Personal Profile Card"
👇
Requirements:

• Use External CSS


• Create a profile card with your name, a short intro, and a styled image
• Use CSS for layout and styling
🧾
HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Profile Card</title>
</head>
<body>
<div class="card">
<img src="profile.jpg" alt="Profile Picture" class="profile-img">
<h2>Waseem Adil</h2>
<p>Web Developer | Learner | Creator</p>
</div>
</body>
</html>

🎨 CSS (style.css)
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
padding-top: 50px;
}

.card {
background-color: white;
padding: 20px;
width: 300px;
margin: auto;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.profile-img {
width: 100px;
border-radius: 50%;
margin-bottom: 10px;
}

🎨
Colors in CSS

You can define colors in several ways:


✅
Named Colors:

Example:

color: red;
background-color: lightblue;
✅
HEX Code:

Represents Red, Green, Blue in hexadecimal.

color: #FF5733; /* orange-ish */


✅ RGB:

Red, Green, Blue (0–255)

color: rgb(255, 99, 71); /* tomato */

✅ HSL:

Hue (0–360), Saturation (%), Lightness (%)

color: hsl(120, 100%, 50%); /* green */

📝 Text Styling
Property Description Example

font-family Changes the font style font-family: 'Arial';

font-size Sets size of text font-size: 16px;

font-weight Makes text bold/thin font-weight: bold;

font-style Italic or normal text font-style: italic;

text-align Aligns text (left, right, center) text-align: center;

🧾
Example:
h1 {
font-family: "Georgia", serif;
font-size: 32px;
font-weight: bold;
font-style: italic;
text-align: center;
}

🖼
Backgrounds
Property Description Example

background-color Sets background color background-color: #f4f4f4;

background-image:
background-image Sets image as background
url("bg.jpg");

Repeat image (repeat, no-


background-repeat background-repeat: no-repeat;
repeat)
Property Description Example

background-
Position of image background-position: center;
position

background-size Control size (cover, contain) background-size: cover;

Example:
body {
background-color: #fafafa;
background-image: url("pattern.png");
background-repeat: no-repeat;
background-position: top right;
background-size: 100px;
}

📦 Box Model (Borders, Margins, Padding)

Part Description

border Outer border around element

margin Space outside the element

padding Space inside, between content and border

Visual Representation:
+-----------------------------+
| margin |
| +----------------------+ |
| | border | |
| | +---------------+ | |
| | | padding | | |
| | | +--------+ | | |
| | | | content| | | |
| | | +--------+ | | |
| | +---------------+ | |
| +----------------------+ |
+-----------------------------+

Example:
.box {
border: 2px solid #333;
padding: 20px;
margin: 40px;
}
📏
CSS Units
Unit Description Example

px Fixed pixels width: 100px;

% Relative to parent element width: 50%;

em Relative to the element’s font-size font-size: 2em;

rem Relative to the root font-size font-size: 1.5rem;

vw 1% of viewport width width: 50vw;

vh 1% of viewport height height: 50vh;

🧩 Mini Project: "Styled Quote Card"

📝 Goal:

Create a beautiful, responsive quote card using basic CSS properties learned in this lesson.

✅
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<title>Quote Card</title>
</head>
<body>
<div class="quote-card">
<p class="quote">
"The only way to do great work is to love what you do."
</p>
<p class="author">- Steve Jobs</p>
</div>
</body>
</html>

🎨
CSS (style.css):
body {
background-color: #e0f7fa;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: "Helvetica", sans-serif;
}

.quote-card {
background-color: #ffffff;
padding: 30px;
border: 2px solid #00838f;
border-radius: 15px;
width: 80%;
max-width: 500px;
text-align: center;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.quote {
font-size: 1.5rem;
font-style: italic;
color: #006064;
margin-bottom: 15px;
}

.author {
font-weight: bold;
color: #004d40;
}

📘
Box Model

The CSS Box Model describes how elements are displayed and spaced on a webpage.

Box Model Layers (from innermost to outermost):

+-----------------------------+
| Margin |
| +----------------------+ |
| | Border | |
| | +---------------+ | |
| | | Padding | | |
| | | +--------+ | | |
| | | | Content| | | |
| | | +--------+ | | |
| | +---------------+ | |
| +----------------------+ |
+-----------------------------+
✅
CSS Example:

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid #333;
margin: 30px;
background-color: #f2f2f2;
}

🧱 Display Property

Controls how an element is rendered on the page.

Value Behavior

block Takes full width. Starts on new line.

inline Takes only as much width as content. No line break.

inline-block Like inline, but allows setting width, height, padding.

none Hides the element completely.

✅
Example:
.block {
display: block;
}

.inline {
display: inline;
}

.inline-block {
display: inline-block;
width: 100px;
height: 50px;
}

📐
Width & Height

Defines the size of the content box (excluding padding, border, margin).

div {
width: 300px;
height: 150px;
}💡

Use with px, em, %, vw, vh, etc.


🧊 Overflow Property
Controls what happens if content overflows the element’s box.

Behavior
Value

visible Default. Content spills out.

hidden Extra content is clipped.

scroll Adds scrollbars. Always shown.

auto Adds scrollbars only when needed.

✅ Example:

.scroll-box {
width: 300px;
height: 100px;
overflow: auto;
}

📏
min-height / max-width

Used to set constraints on the size of elements.

.responsive-box {
max-width: 600px;
min-height: 200px;
width: 100%;
}
✅
Useful for responsive layouts – allows flexible size but prevents too small or too large elements.

🧩
Mini Project: "Responsive Info Card with Box Model"

✅
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Info Card</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="card">
<h2>Welcome to CSS Layout</h2>
<p>
This box demonstrates the box model, layout behaviors, and
responsiveness using max-width and min-height.
</p>
</div>
</body>
</html>

🎨 CSS (style.css):
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #e0f7fa;
margin: 0;
font-family: sans-serif;
}

.card {
max-width: 500px;
min-height: 200px;
padding: 20px;
border: 3px solid #00838f;
background-color: white;
margin: 40px;
overflow: auto;
display: block;
text-align: center;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

Q1. What part of the box model contains the actual content of the element?

A) Padding
B) Border
C) Content
D) Margin

Q2. Which display property value allows setting width and height on an inline element?
A) block
B) inline
C) inline-block
D) none

Q3. What is the default value of the overflow property?

A) scroll
B) auto
C) hidden
D) visible

Q4. Which unit is relative to the width of the viewport?

A) em
B) vh
C) vw
D) rem

Q5. What does margin do in the box model?

A) Adds space inside the element


B) Adds space around the border
C) Sets background color
D) Changes the size of the content

Q6. Which CSS property is used to prevent content from spilling out of a container?

A) display
B) overflow
C) max-height
D) padding

Q7. What happens when you set display: none; on an element?

A) It becomes transparent
B) It becomes unclickable
C) It is removed from the document layout
D) It is hidden but still occupies space
Q8. What does max-width do?

A) Sets the fixed width


B) Sets the smallest width
C) Sets the largest width an element can be
D) Prevents overflow

Q9. If a div has padding: 10px; border: 5px solid black; margin: 20px; and
width: 200px;, what is the total width of the element?

A) 200px
B) 230px
C) 250px
D) 270px

Q10. Which display value will hide the element completely?

A) inline
B) block
C) inline-block
D) none

✅
Answer Key
✅
1. ✅ C) Content
2. ✅ C) inline-block
3. ✅ D) visible
4. ✅ C) vw
5. ✅ B) Adds space around the border
6.
✅ B) overflow
7.
✅ C) It is removed from the document layout
✅
8. C) Sets the largest width an element can be
✅
9. D) 270px → (200 + 10+10 + 5+5 + 20+20)
10. D) none

You might also like