CSS - Cascading Style Sheets
Download as PPTX, PDF2 likes46 views
CSS (Cascading Style Sheets) is used to style and lay out web pages. It is not a programming language. There are three main methods for adding CSS: inline, internal, and external stylesheets. CSS uses selectors to apply declarations of properties and values to elements to style them. Common properties include colors specified with names, hex codes, or RGB values, fonts specified with font families, and units like pixels, points, ems, and percentages for sizes.
CSS - Cascading Style Sheets
- 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