Scribd
Upload
32 views3 pages

Complete CSS Summary For Your Exam

This document provides a comprehensive overview of CSS, covering its basics, selectors, box model, display and positioning properties, Flexbox and Grid layout systems, colors and backgrounds, typography, transitions and animations, responsive design, and common utilities. It explains various CSS concepts and properties essential for styling HTML elements and creating responsive web designs. The document serves as a complete guide for understanding and applying CSS in web development.

Uploaded by

Hiab
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
32 views3 pages

Complete CSS Summary For Your Exam

This document provides a comprehensive overview of CSS, covering its basics, selectors, box model, display and positioning properties, Flexbox and Grid layout systems, colors and backgrounds, typography, transitions and animations, responsive design, and common utilities. It explains various CSS concepts and properties essential for styling HTML elements and creating responsive web designs. The document serves as a complete guide for understanding and applying CSS in web development.

Uploaded by

Hiab
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

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. 🚀

You might also like