CSS Section 1

CSS Rules

Basic structure of a CSS rule:

selector { property: value; }

Example: h1 { color: purple; } sets the color of all <h1> elements to purple.

There are three main ways to write CSS:

Inline CSS – Directly inside HTML elements using the style attribute.
Example: <h1 style="background-color: blue;">
⚠️ Not recommended for larger projects.
Internal CSS – Using a <style> tag inside the <head> of your HTML.
Example: <style> h1 { color: blue; } </style>
⚠️ Still not ideal for reusable styles.
External CSS – Writing CSS in a separate file and linking it using a <link> tag in the <head>.
Example: <link rel="stylesheet" href="styles.css">
✅ This is the best and most scalable method.

color – Sets the text color.
background-color – Sets the background color.
background – A shorthand that includes color, image, position, size, etc.
text-align – Controls horizontal alignment of text (e.g., left, center, right).
width and height – Define the dimensions of elements.
font-weight – Sets the boldness of text. Use keywords like bold or numeric values like 100–900.
text-decoration – Adds or removes decorations like underline. (Read docs for full options)
line-height – Controls vertical spacing between lines of text.
letter-spacing – Adjusts spacing between letters.
font-size – Sets the size of the text. Can be set in px, em, rem, etc.
font-family – Changes the font. You can specify multiple fonts as fallbacks in case the user's browser doesn't support the first one.