Complete CSS Guide

CSS (Cascading Style Sheets) is a language used to style HTML documents.
It controls the appearance of webpages, including colors, layouts, fonts, animations, and responsiveness.

How CSS Works

CSS works by selecting HTML elements and applying styles to them.
Example:

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

Types of CSS

CSS can be applied in three ways:

Inline CSS: 
<p style="color: red;">This is a red paragraph.</p>

Internal CSS:
<style>
    p { color: green; }
</style>

External CSS:
<link rel="stylesheet" href="styles.css">
    

CSS Selectors

Selecting elements to style:

Universal: * { margin: 0; }
Element: h1 { color: red; }
Class: .myClass { font-size: 16px; }
ID: #myID { padding: 10px; }
Grouping: h1, h2 { text-align: center; }
    

Box Model

Defines how elements occupy space:

div {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
    margin: 15px;
}
    

Colors & Backgrounds

Modify visual styles:

color: blue;
background-color: yellow;
background-image: url("image.jpg");
opacity: 0.5;
    

Fonts & Text

Text styling options:

font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
line-height: 1.5;
    

Positioning & Layout

Controls element placement:

position: static; (default)
position: relative;
position: absolute;
position: fixed;
display: flex;
display: grid;
    

Responsive Design

Adapts websites to different screen sizes:

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

Animations & Transitions

Make elements move dynamically:

button {
    transition: background-color 0.5s ease;
}

@keyframes example {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
    

Grid Layout

Helps structure webpages:

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

Advanced CSS

Extra techniques:

Pseudo-classes: a:hover { color: red; }
Pseudo-elements: p::first-letter { font-size: 24px; }
Variables: --main-color: blue;
Flexbox: display: flex;
Grid System: display: grid;
    

Explanation of <br> and <pre> Tags

<br> creates a line break between text, moving to the next line without extra spacing.
Example:

<p>This is line one.<br>This is line two.</p>
    

<pre> preserves spaces, line breaks, and indentation.
Example:

<pre>
    Line 1 stays here.
        Line 2 is indented.
            Line 3 is more indented.
</pre>