1. Basic CSS Structure

Description:
CSS (Cascading Style Sheets) is used to control the appearance of HTML elements. A CSS rule consists of a selector and one or more declarations.

p {
    color: blue;
    font-size: 16px;
}

2. Changing Text Color

Description:
The color property changes the color of text on a webpage.

h1 {
    color: red;
}

3. Background Colors

Description:
The background-color property changes the background color of an element.

body {
    background-color: lightblue;
}

4. Font Styles

Description:
CSS allows you to customize the appearance of text using font properties.

p {
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
}

5. Text Alignment

Description:
The text-align property controls how text is positioned within an element.

h1 {
    text-align: center;
}

6. Borders

Description:
Borders add outlines around elements and can be customized with different styles, colors, and widths.

div {
    border: 2px solid black;
}

7. Margins

Description:
Margins create space outside an element, separating it from other elements.

div {
    margin: 20px;
}

8. Padding

Description:
Padding creates space between an element's content and its border.

div {
    padding: 15px;
}

9. Width and Height

Description:
The width and height properties define the size of an element.

img {
    width: 300px;
    height: 200px;
}

10. Classes

Description:
Classes allow styles to be applied to multiple elements using the same class name.

.highlight {
    background-color: yellow;
}

11. IDs

Description:
IDs are unique identifiers used to style a specific element.

#header {
    color: navy;
}

12. Hover Effects

Description:
The :hover pseudo-class applies styles when a user moves their mouse over an element.

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

13. Styling Links

Description:
CSS can customize the appearance of hyperlinks.

a {
    color: blue;
    text-decoration: none;
}

14. Display Property

Description:
The display property controls how elements are shown on a webpage.

span {
    display: block;
}

15. Flexbox Layout

Description:
Flexbox is a modern layout system that makes it easier to align and distribute elements.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

16. Grid Layout

Description:
CSS Grid allows developers to create complex two-dimensional layouts using rows and columns.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

17. Positioning Elements

Description:
The position property controls where an element appears on the page.

.box {
    position: absolute;
    top: 50px;
    left: 100px;
}

18. CSS Animations

Description:
Animations create movement and visual effects without JavaScript.

@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.box {
    animation: fade 2s;
}

19. Transitions

Description:
Transitions create smooth changes between CSS property values.

button {
    transition: background-color 0.5s;
}

20. Responsive Design

Description:
Media queries allow webpages to adapt to different screen sizes, improving usability on mobile devices.

@media (max-width: 600px) {
    body {
        background-color: lightgray;
    }
}

21. CSS Variables

Description:
Variables store reusable values, making stylesheets easier to maintain.

:root {
    --main-color: blue;
}

h1 {
    color: var(--main-color);
}

22. Common CSS Properties

Description:
These are some of the most frequently used CSS properties.

Property	Purpose
color	Changes text color
background-color	Changes background color
font-size	Sets text size
margin	Adds outer spacing
padding	Adds inner spacing
border	Creates element borders
width	Sets element width
height	Sets element height
display	Controls element display type
position	Controls element positioning

23. Best Practices

Description:
Following CSS best practices helps create clean, maintainable, and efficient stylesheets.

Use meaningful class names.
Keep styles organized.
Avoid excessive use of IDs.
Use external CSS files when possible.
Write responsive designs for different devices.

24. Mini Projects

Description:
Practice CSS skills by building real-world projects.

Personal Portfolio Styling
Navigation Bar Design
Responsive Photo Gallery
Animated Button Collection
Landing Page Layout
Dashboard Interface

25. CSS Cheat Sheet

Description:
A quick-reference guide to commonly used CSS properties.

color:
background-color:
font-size:
font-family:
margin:
padding:
border:
width:
height:
display:
position:
flex:
grid:
animation:
transition:

This structure works well as a beginner-to-intermediate CSS reference manual alongside your HTML manual.


