CSS (Cascading Style Sheets) — Structured Notes
Introduction to CSS
• CSS is used to control the presentation of HTML documents.
• Separates content (HTML) from design (CSS).
• Improves maintainability, reusability, and performance.
Ways to Apply CSS
Method Description Syntax
Inline Inside HTML tag <p style="color:red;">
Internal <style> in <head> <style> p{color:red;} </style>
External Separate .css file <link rel="stylesheet" href="[Link]">
Preferred: External CSS
CSS Syntax
selector {
property: value;
• Selector → HTML element
• Property → What to change
• Value → How to change
CSS Selectors
Selector Example Use
Universal * {} All elements
Element p {} Specific tag
ID #id {} Unique element
Class .class {} Group styling
Group h1, p {} Multiple tags
Selector Example Use
Descendant div p {} Nested elements
CSS Colors & Background
Colors
• Name: red
• HEX: #ff0000
• RGB: rgb(255,0,0)
Background Properties
Property Purpose
background-color Set color
background-image Add image
background-repeat Repeat control
background-position Image position
Text and Font Properties
Text
Property Example
text-align center
text-decoration underline
text-transform uppercase
line-height 20px
Font
Property Example
font-family Arial
font-size 16px
font-style italic
font-weight bold
CSS Box Model (Core Concept)
Box = Content + Padding + Border + Margin
Component Meaning
Content Actual data
Padding Space inside border
Border Outline
Margin Space outside
Borders and Spacing
border: 2px solid black;
border-radius: 8px;
margin: 10px;
padding: 15px;
Display Property
Value Description
block Full width
inline Content width
inline-block Inline + size
none Hidden
Positioning in CSS
Position Description
static Default
relative Relative to itself
absolute Relative to parent
fixed Fixed on screen
Position Description
sticky Scroll + fixed
Float and Clear
float: left;
clear: both;
Used in older layouts.
CSS Flexbox (1-D Layout)
.container {
display: flex;
justify-content: center;
align-items: center;
Property Function
flex-direction row / column
justify-content Horizontal align
align-items Vertical align
CSS Grid (2-D Layout)
.container {
display: grid;
grid-template-columns: auto auto auto;
Overflow and Z-Index
Property Use
overflow visible / hidden / scroll / auto
z-index Stack order
Pseudo Classes
Pseudo Meaning
:hover Mouse over
:active Click
:focus Input focus
:first-child First element
Pseudo Elements
Pseudo Meaning
::before Before content
::after After content
CSS Units
Unit Meaning
px Pixels
% Relative
em Relative to parent
rem Relative to root
Media Queries (Responsive Design)
@media screen and (max-width: 600px) {
body { background: lightblue; }
CSS Specificity & Cascade Order
Priority Order:
1. Inline
2. ID
3. Class
4. Element
Advantages of CSS
• Separation of design
• Faster loading
• Reusability
• Responsive layouts
• Easy maintenance