What is CSS? Notes by home academy

byhomeacademy •يوليو 19, 2025

0

What is CSS?

CSS stands for Cascading Style Sheets.
It is used to style and design HTML elements (e.g., colors, fonts, layout).
CSS separates content (HTML) from design (CSS).

📌 Key Features of CSS

Feature	Description
Separation of Concerns	HTML for structure, CSS for style
Reusability	One CSS file can style multiple HTML pages
Cascading Rules	Styles are applied based on priority
Responsive Design	Supports mobile-friendly layouts
Lightweight	Makes website faster and cleaner

📚 Syntax of CSS

css
selector {
  property: value;
}

Example:

css
h1 {
  color: red;
  font-size: 24px;
}

🧱 Types of CSS

Type	Syntax Example	Usage
Inline CSS	`<h1 style="color:blue;">Hello</h1>`	Applies to one element
Internal CSS	Inside `<style>` in `<head>`	Styles a single HTML page
External CSS	`<link rel="stylesheet" href="style.css">`	Best practice, styles multiple pages

🖌️ Common CSS Properties

Property	Description	Example
`color`	Text color	`color: blue;`
`background`	Background color/image	`background: yellow;`
`font-size`	Size of text	`font-size: 20px;`
`font-family`	Font style	`font-family: Arial;`
`border`	Border styling	`border: 1px solid red;`
`padding`	Inner spacing	`padding: 10px;`
`margin`	Outer spacing	`margin: 15px;`
`width`	Width of element	`width: 300px;`
`height`	Height of element	`height: 200px;`

🎯 CSS Selectors

Selector Type	Syntax Example	Description
Element	`p {}`	Targets `<p>` tags
Class	`.className {}`	Targets all elements with that class
ID	`#idName {}`	Targets a specific element with that ID
Group	`h1, p {}`	Styles multiple elements together
Universal	`* {}`	Applies to all elements

🧩 CSS Box Model

Each element is a box made of:

css
[ margin ]
[ border ]
[ padding ]
[ content ]

css
div {
  margin: 10px;
  padding: 20px;
  border: 2px solid black;
}

📐 Layout with CSS

1. Display Property

css
display: block | inline | flex | grid | none;

2. Positioning

css
position: static | relative | absolute | fixed | sticky;

3. Flexbox Example

css
.container {
  display: flex;
  justify-content: space-between;
}

🌍 Responsive Web Design

Use media queries to make websites mobile-friendly.

css
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

🎨 Pseudo-classes & Effects

Pseudo-class	Use
`:hover`	On mouse over
`:focus`	When input is selected
`:first-child`	First element in a group

Example:

css
button:hover {
  background-color: green;
}

💼 Practical Applications of CSS

Area	Application Example
Web Design	Styling websites
Mobile App UI	HTML + CSS based UIs (e.g., PWA)
Email Templates	Professional, responsive email layouts
CMS Themes	WordPress themes are mostly CSS driven
Frontend Frameworks	Bootstrap, Tailwind CSS are CSS libraries

❓ Important MCQs for Exams

CSS stands for:
a) Computer Style Sheets
b) Colorful Style Sheets
c) Cascading Style Sheets ✅
d) Creative Style Sheets
Which HTML tag is used to link external CSS?
a) <css>
b) <link> ✅
c) <style>
d) <script>
How to apply CSS to all <p> tags?
a) p.all
b) #p
c) p ✅
d) .p
Which property controls text size?
a) font-size ✅
b) text-style
c) font-weight
d) size
What does #id selector do?
a) Selects all tags
b) Selects element with specific ID ✅
c) Selects all classes
d) None

📝 Conclusion

CSS is the backbone of web design.
It enhances the look and feel of webpages.
Combined with HTML + JavaScript, it forms the foundation of frontend development.

Tags: computer Computer languages

إرسال تعليق (0)

What is CSS? Notes by home academy

What is CSS?

📌 Key Features of CSS

📚 Syntax of CSS

🧱 Types of CSS

🖌️ Common CSS Properties

🎯 CSS Selectors

🧩 CSS Box Model

📐 Layout with CSS

1. Display Property

2. Positioning

3. Flexbox Example

🌍 Responsive Web Design

🎨 Pseudo-classes & Effects

💼 Practical Applications of CSS

❓ Important MCQs for Exams

📝 Conclusion

نموذج الاتصال