CSS (Cascading Style Sheets) - Detailed Notes
1. What is CSS?
CSS stands for Cascading Style Sheets. It is used to control the layout and presentation of HTML
elements.
Advantages:
- Saves time with reusable styles
- Makes site maintenance easier
- Offers consistent design
- Reduces file size and load time
2. Types of CSS
Type Description Where to Use Example
Inline Written inside an HTML tag Use `style` attribute inside the<p
tag
style='color:red;'>Hello</p>
Internal Inside <style> in <head> For a single HTML document<style>p {color:blue;}</style>
External Separate .css file Linked with <link> tag <link rel='stylesheet' href='style.css'>
3. CSS Syntax
selector {
property: value;
}
h1 {
color: green;
font-size: 30px;
}
4. CSS Selectors
Selector Syntax Description Effect
Universal * All elements Applies to all HTML tags
Element p Specific tag All <p> tags
CSS (Cascading Style Sheets) - Detailed Notes
Class .class Class selector Elements with class
ID #id ID selector One element with that ID
Group h1, h2 Multiple elements Styles both h1 and h2
Descendant div p Nested elements <p> inside <div>
Child ul > li Direct child Immediate <li> in <ul>
Pseudo-Class a:hover On user action Hover effect
Pseudo-Element p::first-line Part of element First line styled
5. Common CSS Properties
Property Example Description Effect
color color: red; Text color Red text
background-color background-color: yellow; Background Yellow bg
font-size font-size: 18px; Text size Larger/smaller text
font-family font-family: Arial; Font type Different look
text-align text-align: center; Text alignment Center text
border border: 1px solid black; Border style Box border
padding padding: 10px; Inside space Space inside element
margin margin: 15px; Outside space Space around element
width/height width: 100px; Size Fix element size
display display: none; Visibility Hide element
position position: relative; Placement Position control
box-shadow box-shadow: 0 0 5px gray; Box shadow 3D effect
text-decoration text-decoration: underline; Text line Underline text
6. CSS Box Model
The Box Model: Content -> Padding -> Border -> Margin
div {
margin: 10px;
padding: 20px;
border: 2px solid black;
CSS (Cascading Style Sheets) - Detailed Notes
7. Linking External CSS File
<head>
<link rel='stylesheet' href='style.css'>
</head>
/* style.css */
body {
background-color: lightblue;
font-family: Verdana;
}
8. CSS Example with Result
<p class='highlight'>Hello CSS!</p>
.highlight {
color: white;
background-color: green;
padding: 10px;
border-radius: 8px;
}
Result: A white text on green background with padding and rounded corners.
