# CSS ### Cascading Style Sheet --- ## What is CSS - Cascading Style Sheets - style sheet language used for describing the presentation of a document written in markup language - HTML => Structure - CSS => Style - Javascript => Execution --- ## Why use CSS - Alter the Presentation of a web page - font - size - color - space --- ## Three Ways to Define CSS ```html - style="color: red" <!-- inline --> - <style>p { color: red; }</style> <!-- style --> - <link href="file.css" rel="stylesheet" type="text/css"> <!-- external file --> ``` --- ## CSS Rules #### [CSS Reference](https://www.w3schools.com/cssref/) ```css a { color: red; border: 1px solid #ccc; font-family: monospace; font-weight: bold; text-decoration: none; } ``` --- ## Selectors [Selector Reference](https://www.w3schools.com/cssref/css_selectors.asp) ```htmlembedded= <ul> <li>Tags</li> <!-- a, body, p, etc... --> <li>Id</li> <!-- div id="content"> #content--> <li>Class</li><!-- div class="content"> .content--> <li>Pseudo Class</li><!-- a:hover, li:first-child --> </ul> ``` --- ## Combining Selectors - `div p` VS `div > p` - `div.jobs` VS `div .jobs` - `body#content` VS `body #content` --- ## Cascading - [Cascade and Inheritance](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance) - Source order --> multiple classes - Importance --> override - Specificity --> weight --- ## Inheritance - Child elements inherit parent styles unless they have thier own default style. - Values: `inherit`, `initial`, `unset` --- ## Inherit ```css /*CSS*/ span { color: blue; border: 1px solid black; } .extra span { color: inherit; } ``` ```html <!--html--> <div> This is <span>a span element</span> </div> <div class="extra" style="color:green"> This is <span>a span element</span> </div> ``` --- ## Initial ```css /*CSS*/ div { color: red; border: 1px solid blue; } h1 { color: initial; } ``` ```html <!--html--> <div> <h1>Initial</h1> </div> ``` --- ## Web Fonts - [Web Safe Font Stacks](http://www.cssfontstack.com/) - Example: `font-family: Arial,"Helvetica Neue",Helvetica,sans-serif` - Generic Fonts: `serif`, `sans-serif`, `monospace`, `cursive`, `fantasy` --- ## External Web Fonts ```html <link href="https://fonts.googleapis.com/css?family=Spirax" rel="stylesheet"> ``` - `font-family: 'Spirax', cursive;` - [Google Fonts](https://fonts.google.com/) - !!! Watch your load times !!! - Depending on the browser, web font text maybe invisible until loaded --- ## The Box Model Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items --- ## The Box Model Components Refer to how HTML elements are modeled on the page - content area - padding area - border area - margin area --- ## Use the Dev Tools <iframe src="//giphy.com/embed/3hQ0hZDo4QhR6" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/apples-peel-peeler-3hQ0hZDo4QhR6">via GIPHY</a></p> --- # CSS Float --- ## Float Allows you to position HTML elements to the left or the right of other elements. - left - right --- ```css .box { float: left; width: 33.33%; padding: 50px; } ``` --- ## Default Flow The flow of an HTML page is by default is sinstrodextral (left to right) --- ## Overflow When and element is to big for the container that wraps it. ```html #overflow { background: #4CAF50; padding: 15px; width: 50%; height: 100px; border: 1px solid #ccc; overflow: visible; } ``` ##### *NOTE: some elements will skew the overflow* --- ## Wrapping Elements can only float inside the size of the parent.