## Learning Objectives - Understand CSS syntax and rules - Apply styles using various methods - Work with colors and typography - Master the cascade and inheritance ## CSS Syntax ```css selector { property: value; another-property: value; } ``` ### Example ```css h1 { color: blue; font-size: 24px; text-align: center; } ``` ## Adding CSS to HTML ### External Stylesheet (Recommended) ```html ``` ### Internal Stylesheet ```html ``` ### Inline Styles ```html

Heading

``` ## Colors ### Named Colors ```css h1 { color: red; background-color: lightblue; } ``` ### RGB Colors ```css p { color: rgb(255, 0, 0); /* Red */ color: rgb(0, 0, 0); /* Black */ color: rgb(128, 128, 128); /* Gray */ } ``` ### RGBA (with opacity) ```css div { background-color: rgba(255, 0, 0, 0.5); /* 50% transparent red */ } ``` ### Hexadecimal ```css h1 { color: #ff0000; /* Red */ color: #000; /* Black */ color: #808080; /* Gray */ } ``` ### HSL ```css p { color: hsl(0, 100%, 50%); /* Red */ background-color: hsl(220, 100%, 50%); /* Blue */ } ``` ## Typography ### Font Family ```css body { font-family: Arial, Helvetica, sans-serif; } h1 { font-family: "Times New Roman", Times, serif; } ``` ### Font Size ```css h1 { font-size: 32px; } p { font-size: 16px; } ``` ### Font Weight ```css .bold { font-weight: bold; } .thick { font-weight: 700; } .light { font-weight: 300; } ``` ### Font Style ```css .italic { font-style: italic; } .normal { font-style: normal; } ``` ### Line Height ```css p { line-height: 1.6; /* 1.6 times the font size */ } .loose { line-height: 2.0; } ``` ### Text Alignment ```css .center { text-align: center; } .right { text-align: right; } .justify { text-align: justify; } ``` ### Text Decoration ```css .underline { text-decoration: underline; } .line-through { text-decoration: line-through; } .none { text-decoration: none; } ``` ### Text Transform ```css .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } ``` ## The Cascade When multiple rules apply to the same element: ```css /* Last rule wins */ p { color: blue; } p { color: red; /* This wins */ } /* More specific selector wins */ p { color: blue; } .highlight { color: yellow; /* This wins */ } ``` ### Specificity Order 1. Inline styles (highest) 2. ID selectors (`#header`) 3. Class selectors (`.button`) 4. Element selectors (`p`, `h1`) 5. Universal selector (lowest) ## Inheritance Some properties are inherited from parent elements: ```css body { color: #333; font-family: Arial, sans-serif; } ``` Child elements inherit `color` and `font-family` unless overridden. ### inherit Keyword ```css p { color: inherit; /* Explicitly inherit from parent */ } ``` ## CSS Comments ```css /* This is a single-line comment */ /* * This is a * multi-line comment */ p { color: red; /* Comment explaining the rule */ } ``` ## Backgrounds ### Background Color ```css div { background-color: #f0f0f0; } ``` ### Background Image ```css .hero { background-image: url("hero.jpg"); } ``` ### Background Size ```css .hero { background-image: url("hero.jpg"); background-size: cover; } ``` ### Background Position ```css .hero { background-image: url("hero.jpg"); background-position: center top; } ``` ## Shorthand Properties ### Font Shorthand ```css p { font: italic 16px/1.5 Arial, sans-serif; /* style variant weight size/line-height family */ } ``` ### Background Shorthand ```css div { background: #f0f0f0 url("image.jpg") no-repeat center; } ``` ### Border Shorthand ```css .box { border: 1px solid black; } ``` ## Units ### Absolute - `px` - pixels ### Relative - `em` - relative to parent font size - `rem` - relative to root font size - `%` - percentage of parent - `vw` - viewport width - `vh` - viewport height ```css p { font-size: 1.2em; } html { font-size: 16px; } h1 { font-size: 2rem; } .container { width: 80%; } ``` ## Summary - CSS syntax: `selector { property: value; }` - Use external stylesheets via `` - Colors: named, rgb(), rgba(), hex, hsl() - Typography: font-family, font-size, font-weight, line-height - The cascade: last rule wins, specificity determines winners - Properties like color and font-family are inherited - Units: px, em, rem, %, vw, vh