--- type: slide slideOptions: display: block --- # ACIT 1620 ## Week 3 --- <!-- .slide: data-transition="zoom convex-out" --> Objectives: - Learn how to style web pages using CSS - CSS selectors and specificity - Backgrounds and colors - Box model - Layout --- <!-- .slide: data-transition="zoom convex-out" --> ## Including CSS in HTML The `style` attribute - Inline CSS: ``` html <p style="color: purple;">I am purple text</p> ``` ---- The `<style>` element - internal styles: ``` <head> <style> p { color: red; } </style> </head> <body> <p>I am red text</p> </body> ``` ---- The `<link>` element - External styles: ``` <head> <link rel="stylesheet" href="styles.css" /> </head> <body> <p>I am green text</p> </body> ``` _styles.css_: ``` p { color: green; } ``` --- <!-- .slide: data-transition="zoom convex-out" --> ## Selectors: - Type selector - ID selector - Class selector - Attribute selector - Pseudo classes - Pseudo elements ---- Combining selectors: ``` div, ul, ol { margin: 0; } p.highlighted { background: yellow; } a#home { color: green; } ``` --- <!-- .slide: data-transition="zoom convex-out" --> ## Anatomy of a ruleset ``` selector { /* declaration */ property: values; } ``` - Values can be: - strings - quantities: integers, percentages, em, rem, px, ... - functions --- <!-- .slide: data-transition="zoom convex-out" --> ## Specificity - Deciding between competing rulesets - Inline styles always take precedence - `ID` selector is more specific than `class` and `type` - `class` is more specific than `type` - The order in which rulesets appear in the stylesheet also matters --- <!-- .slide: data-transition="zoom convex-out" --> ## Box Model ![Box-model](https://hackmd.io/_uploads/Syy6_TjKa.svg) --- <!-- .slide: data-transition="zoom convex-out" --> ## Layout - Normal flow - Floats - Flex - Grid - Positioning --- <!-- .slide: data-transition="zoom convex-out" --> ## Media queries - Specify different styles for different display targets - Useful for responsive design ``` @media screen and (max-width: 600px) { .container { display: block; } } ``` --- <!-- .slide: data-transition="zoom convex-out" --> ## Reading List - [Pseudo Classes and Pseudo Elements](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) - [Combinators](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators) - [Values and Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) - [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) - [CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) - [CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)