CSS Basics - Stylesheets and Color
Download as PPTX, PDF0 likes398 views
The document explains the limitations of CSS inline styles, noting they can be labor-intensive as styles are applied to individual tags. It introduces two methods for applying styles more efficiently: using a <style> section in the <head> of an HTML document or linking to an external stylesheet. Additionally, it discusses color specifications, illustrating how colors can be defined either by name or using hexadecimal values, enabling a vast spectrum of over 16 million color options.
More Related Content
Similar to CSS Basics - Stylesheets and Color (20)
![Strategic Picks — Prioritising the Right Agentic Use Cases [2/6]](https://cdn.slidesharecdn.com/ss_thumbnails/session-2-250902135931-4c97717a-thumbnail.jpg?width=560&fit=bounds)
![From Curiosity to ROI — Cost-Benefit Analysis of Agentic Automation [3/6]](https://cdn.slidesharecdn.com/ss_thumbnails/session-3-250903141006-a3917e1a-thumbnail.jpg?width=560&fit=bounds)
CSS Basics - Stylesheets and Color
- 1. CSS
- 2. Inline Style • <tag style=”color: black; font-size: 16pt; “>text to be styled</tag> • Drawback: labor intensive; style is only applied one tag at a time
- 3. What if we could apply a single style to many tags at once? • We can, by separating the styling code (CSS) from the information on the page (HTML).
- 4. Method 1: Move styling to the <head> section Syntax: selector {property: value; property: value;} Or: selector { property: value; property: value; }
- 5. Example: <head> <style type="text/css"> p { font-family: Verdana; color: #000099; font-size: 12pt; } h1 { font-family: Tahoma; color: #000; font-size: 24pt; font-weight: bold; } </style> <head>
- 6. Method 2: Move the styling to a separate document Web page content: index.html Styling: stylesheet.css Insert a <link> tag into the <head> section of the html file.
- 7. Example: <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
- 8. All that page contains is the selectors and declarations p { font-family: Verdana; color: #000099; font-size: 12pt; }
- 9. Specifying Color • Can choose from a list of standard colors and call them by name, but this limits you to a few dozen “web-safe” colors. • We can actually choose from…
- 10. 16 million colors. • color: black = color: #000000 • color: white = color: #ffffff
- 11. RGB 00 00 00 red green blue
- 12. Every digit can be one of 16 choices (hexadecimal): 0 1 2 3 4 5 6 7 8 9 A B C D E F 0 is no color, F is the brightest
- 13. 16 million There are two digits each for red, green, and blue, so 16 x 16 = 256 256 red levels 256 green levels x 256 blue levels 16,777,216 possible colors
- 14. Examples Bright red: #ff0000 Bright green: #00ff00 Bright blue: #0000ff