A brief explanation of using Cascading Style Sheets(CSS) to develop web applications.

1. CSS3
Cascading StyleSheets

2. Before we begin...
● Everyone’s CSS is different
● We will try to cover as much as possible
● Download the source code

3. What is CSS?
● Cascading StyleSheets
● NOT a Programming Language
● Stylesheet/Styling Language
● Used for Website Layout and Design
● Can be extended with SASS/LESS

4. What we need to start
A Web Browser(Pick One)
● Google Chrome
● Mozilla Firefox
● Safari
● Microsoft Edge
● IE (Please Don’t)
A Text Editor(Pick One)
● Sublime Text
● Atom.io
● Visual Studio Code
● Notepad++ (Windows)
● Text Mate (Mac)

5. 3 methods for adding CSS
Inline CSS: Directly in the HTML element ( NO! )
Internal CSS: Use <style> tags within a single document
External CSS: Linking an external CSS

6. CSS Selectors
a { background-color : yellow ; }
selector
property-name
value
declaration start property/value
separator
declaration end

7. Colors in CSS
● Color Names
● HTML5 color names
● Hexadecimal
● RGB
body{
color: red;
background: coral;
}
h1{
color: #00ff00;
}
p{
rgb(0,0,255);
}

8. Web Safe Fonts
font-family Arial, Helvetica, sans-serif
font-family "Arial Black", Gadget, sans-serif
font-family "Bookman Old Style", serif
font-family "Comic Sans MS", cursive, sans-serif
font-family Courier, monospace
font-family "Courier New", Courier, monospace
font-family Garamond, serif
font-family Georgia, serif
font-family Impact, Charcoal, sans-serif
font-family "Lucida Console", Monaco, monospace
font-family "Lucida Sans Unicode", "Lucida Grande", sans-
serif
font-family "MS Sans Serif", Geneva, sans-serif
font-family "MS Serif", "New York", sans-serif
font-family "Palatino Linotype", "Book Antiqua",
Palatino, serif
font-family Symbol, sans-serif
font-family Tahoma, Geneva, sans-serif
font-family "Times New Roman", Times, serif
font-family "Trebuchet MS", Helvetica, sans-serif
font-family Verdana, Geneva, sans-serif
font-family Webdings, sans-serif
font-family Wingdings, "Zapf Dingbats", sans-serif

9. Unit Types
● Pixels (px) : Unit that represents pixels on a device
● Point (pt) : Used in print media in which 72 points equals 1 inch
● Ems (em) : An em is equal to the current font size
● Percent (%) : The current font size is equal to 100%

10. Block Elements
● p
● h1, h2, h3, h4, h5, h6
● ol, ul
● pre
● address
● blockquote
● dl
● div
● fieldset
● form
● hr
● noscript
● table

11. Inline Elements
● b, big, i, small, tt
● abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
● a, bdo, br, img, map, object, q, script, span, sub, sup
● button, input, label, select, textarea

12. Box Model