Complete CSS Summary for Your Exam
1. CSS Basics
CSS (Cascading Style Sheets) is used to style HTML elements by changing their appearance
and layout.
Selectors & Their Roles
Selectors are used to target HTML elements for styling.
Element Selector (h1 {}) → Targets all <h1> elements.
Class Selector (.class {}) → Targets all elements with the specified class.
ID Selector (#id {}) → Targets a single element with the specified ID.
Universal Selector (* {}) → Applies styles to all elements.
Group Selector (h1, h2, p {}) → Styles multiple elements at once.
Pseudo-classes (:hover, :nth-child(n)) → Target elements in a special state.
Pseudo-elements (::before, ::after) → Insert content before or after an element.
Attribute Selectors ([type="text"] {}) → Target elements with a specific
attribute.
2. CSS Box Model
Defines how elements are structured in a page.
Content: The actual content inside the element.
Padding: Space between content and border (padding: 10px;).
Border: Defines the edge of an element (border: 1px solid black;).
Margin: Space outside the border to separate elements (margin: 20px;).
3. Display & Positioning
Controls how elements are displayed on a page.
Display Property
block → Takes full width, starts on a new line (div, p).
inline → Takes only necessary width, stays in line (span, a).
inline-block → Like inline but allows width/height adjustments.
none → Hides the element (display: none;).
flex → Enables Flexbox layout.
grid → Enables Grid layout.
Position Property
static → Default, follows normal document flow.
relative → Positioned relative to its normal position.
absolute → Positioned relative to its closest positioned ancestor.
fixed → Stays in place even when scrolling.
sticky → Sticks to a position when scrolling.
4. Flexbox (Flexible Layout System)
Used to create responsive layouts.
display: flex; → Enables Flexbox.
flex-direction: row | column; → Defines the direction.
justify-content: center | space-between | space-around; → Aligns items
horizontally.
align-items: center | stretch | flex-start; → Aligns items vertically.
flex-wrap: wrap; → Allows items to wrap when needed.
5. CSS Grid (Advanced Layout System)
Creates complex layouts with rows and columns.
display: grid; → Enables Grid layout.
grid-template-columns: 1fr 2fr; → Defines column sizes.
grid-template-rows: auto 200px; → Defines row sizes.
gap: 10px; → Adds space between grid items.
6. Colors & Backgrounds
Text Colors → color: red;, color: rgb(255, 0, 0);.
Background Colors → background-color: blue;.
Gradients → background: linear-gradient(to right, red, blue);.
Background Image → background-image: url('image.jpg');.
Background Size → background-size: cover;.
7. Typography (Text Styling)
Font Family → font-family: Arial, sans-serif;.
Font Size → font-size: 16px;.
Font Weight → font-weight: bold;.
Text Alignment → text-align: center;.
Text Decoration → text-decoration: underline;.
Text Transform → text-transform: uppercase;.
Letter Spacing → letter-spacing: 2px;.
8. Transitions & Animations
Enhance interactivity by adding smooth effects.
Transitions
transition: all 0.3s ease-in-out; → Smoothly changes properties like color,
size, or opacity.
Animations
@keyframes → Defines keyframes for an animation.
animation: move 2s infinite; → Runs an animation.
@keyframes move {
0% { transform: translateX(0px); }
100% { transform: translateX(100px); }
}
9. Responsive Design
Ensures your website works on different screen sizes.
Media Queries
@media (max-width: 768px) { body { background: red; } } → Changes
styles for smaller screens.
Relative Units
em → Relative to the parent element's font size.
rem → Relative to the root font size.
% → Relative to the parent element's size.
vh/vw → Viewport height and width.
10. Common CSS Utilities
Overflow → Controls content that exceeds the container size (overflow: hidden;).
Visibility → Hides an element without removing its space (visibility: hidden;).
Opacity → Adjusts transparency (opacity: 0.5;).
Transformations → Modify elements (transform: scale(1.2);,
rotate(45deg);).
This covers everything in CSS! Let me know if you need examples or explanations on
specific topics. 🚀
