 |
| Photo by Pankaj Patel on Unsplash |
This week we dove into Cascading Style Sheets (CSS). CSS is the backbone of presenting web content in a readable, attractive format that invites page visitors to use and interact with the page.
Cascading Style Sheets are named so because you can set style values in different ways and the order of preference determines which styles take effect for any given element.
The hierarchy is as follows:
- Brower Default - if no style is given - the browser default is applied
- External Style Sheets - Style values defined in external sheets are applied next. External sheets are great for applying styles to multiple pages. This is a huge time saver when trying to style an entire website with a similar look and feel because the CSS page can be linked to each webpage.
- Embedded Styles - Apply third, and override an external style sheet. This gives you some flexibility when trying to style certain aspects of a page differently than the external style sheet, and embedded styles can be used without a linked CSS file. Embedded styles can be great when creating a small, minimally styled web page. Embedded styles are placed inside the <head><style> STYLES GO HERE</style></head>
- Inline styles - these override any other defined style for the element for which they are defined. For example: <p style="color: #FF0000"> styles the text of this paragraph element red. Another embedded style, external style sheet, or browser defaults would apply to all other elements on the page.
When working with styles inside of nested elements, inline styles can be used on inner elements to override values applied to outer elements.
CSS hierarchy is something I struggled with in the past and this week's text and practice exercise really helped me understand the topic.
Well, my A/C broke so it is now 88 degrees in the house. Signing off to go search for ice cubes!
