Introduction to CSS.pptx web for web web
- 2. Why CSS? • CSS Provides Efficiency in Design and Updates • CSS relatively easy to use • Can give you more flexibility and control • Faster loading pages • Increased consistency • Brings more sophistication to web design • CSS is designed primarily to enable the separation of document content from document presentation.
- 3. Why CSS? (continued) • W3C standard, started in 1996 • Improves accessibility – Tables not required for elegance • Reduces the complexity of pages – Which in turn has led to more sophistication… • It’s open up the way for other technologies to be built on and be supported by CSS. There are dozens, and still growing. • Example, “Bootstrap”, which is an open source framework that combines CSS, HTML and Javascript
- 4. CSS Overview • CSS (Cascading Style Sheets) • CSS defines HTML display • Styles were added to HTML 4.0 to solve a problem • External Style Sheets are stored in .css files
- 5. CSS Syntax • Selectors • Declaration • Properties • Values
- 6. Selectors • A “selector” is an instruction in a CSS rule set that tells the browser what elements to ‘select’ for styling. • Here are some that we will look at: – element Selector – id Selector – class Selector – grouping Selectors
- 7. Element or Tag Selector • This selector selects tags by tag or “element” name. • This selector must match one or more HTML elements of the same name. • Easiest to use
- 8. Element Selector p { text-align: center; color: red; } HTML <p>UAlbany is one of the SUNY centers.</p>
- 9. ID Selector • The ID selector as a unique identifier to an element. • The id selector is used if you want to select a single, unique element. • CSS uses a hash or pound sign (#) to indicate it’s ID • ID's are unique – IDs in theory, are only supposed to be used once per page – In other words, a page would not be validate by W3C standards. • Anytime we see ID in the computer world, think “unique”.
- 10. The id Selector #text1 { text-align: center; color: green; } <h1 id="text1">Think Spring!</h1>
- 11. Class Selector • This selector allows you to style content irrespective of what tag you apply it to • Classes are NOT unique – Use same class on multiple elements. – Use multiple classes on the same element.
- 12. The class Selector .center { text-align: center; color: green; } <h1 class="center">Think Spring!</h1> <p class="center">Think Spring!</p>
- 13. CSS Grouping • When several selectors share the same declarations, they may be grouped into a comma-separated list. • Take this h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } And, do this: h1, h2, h3 { font-family: sans-serif }
- 14. CSS Comments • As with other computer languages, CSS allows for comments • Comments remind you and tell fellow coders what your CSS does • Allows you to “flag” code for further review • Indispensable for large website and programming projects
- 15. CSS Comments h1 { font-size: 24px; font- weight: bold; border: 1px solid black; color: pink; } /* This will make all <h1> headers big, bold, pink, and inside of a thin black rectangle! */
- 16. Ways to Insert CSS • Externally • Internally • Inline styles (inside tags)
- 17. Inline Styles • Insert CSS style right within the HTML tag that you want to apply them too. • Very quick • However, difficult to maintain • Use sparingly <h1 style="color:blue;margin- left:30px;">Think Spring!</h1>
- 18. Internal (or Embedded) CSS • Placed right on top of the page that it will affect • As with DTDs, you can internally create a stylesheet • They are more convenient for small webpages • Mixing content and style will cause your pages to become unwieldy over time.
- 19. Internal CSS stylesheet <html> <head> <style type="text/css"> p {color: white; } body {background-color: black; } </style> </head> <body> <p>White text on a black background!</p> </body> </html>
- 20. External Stylesheet • Why use an external stylesheet? – It keeps your website design and content separate. • CSS code is easier to reuse. • Instead of typing the same CSS code on every web page you have, • Merely have many pages refer to a single CSS file with the "link" tag. • You can make massive alterations to your web pages with just a few changes in a single CSS file
- 21. External CSS Stylesheet In your .XSL file, you will link out using this command: <head> <link rel="stylesheet" type="tex t/css" href="mystyle.css“/> </head>
- 22. Browsers and CSS3 To be replaced by project “Spartan”