recitation5 notes

Cool now lets style the actual text of the page p ul

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: -border-radius: 20px; border-radius: 20px; margin-left: auto; margin-right: auto; } Note: Margin-left and margin-right are equal to 'auto' so the browser calculates the left and right margins of the .whale pic element on the fly as the browser is resized. Now whale page looks like... 5. Cool. Now let's give the page some good background color! body { background-color: #E0EEEE; } 6. Cool. Now let's style the actual text of the page. p, ul { font-family: Arial; color: #3B6AA0; } Whale page now looks like: 7. Now our whale page is marginally better looking. But wait! You now realize there's some redundancy in the CSS. We can get rid of the color and font-family declarations in the #welcome CSS rule since they're covered by the p presentation rule. Identifying and getting rid of these redundancies can allow us to write cleaner CSS. Topic 3: Specificity and the “Cascade” in CSS: So we've just seen CSS in action, but... What happens if there are rule conflicts (like if there are multiple stylesheets that target the same elements)? This is the Cascading part of the style sheets. There's a particular order of precedence for applying stylesheets (information obtained from: http://bit.ly/5uu3iX [vanseo design], http://bit.ly/bisLP [w3c css2 spec]). When applying this order of precedence, the stylesheets cascade into each other, functionally creating a new stylesheet. 1. Get all CSS declarations from all stylesheets that apply to a particular property for a particular element. 2. Break ties by origin and weight. What do you mean an origin? Your browser has a default stylesheet. A user can specify his/her own stylesheet for his/her browser (for example, if s/he needs a particular stylesheet to see the content better due to medical concerns). And then of course there are the style sheets the author of an HTML page explicitly links to. So there are three possible stylesheet origins: browser, user, and author. What do you mean by weight? When you write a declaration like h1 {color: blue;} you can add !important after the value in the declaration to specify that that particular declaration should have some overriding po...
View Full Document

Ask a homework question - tutors are online