ID01: Interaction Design & Development 01

Icon

Thom Meredith

Week 07

Week 07 – Topics

Quiz 2

CSS: The Cascade

UL / LI for navigation overview

Design assignment: Bring in Photoshop file with design comp for home and landing page for midterm project. You need to start technical production.

Review and lab time

The Cascade

Charlie’s Simple Cascade Summary
(From our textbook on page 58)

  • Rule 1: Selectors with IDs override selectors with classes, these in turn, override selectors with only tags.
  • Rule 2: If the same property for the same tag is defined in more than one location in the Cascade — inline styles override styles embedded into head, which override style sheet styles. Rule 2 loses out to Rule 1 though– if the selector is more specific, it overrides, wherever it is.
  • Rule 3: Defined styles override inherited styles, regardless of specificity.

Huh? …. I bet you’re a bit confused. This is tough stuff to wrap your head around — but it WILL get easier with more experience.

Inline: To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number four has the highest priority:

  1. Browser default
  2. External style sheet
  3. Internal style sheet (in the head section)
  4. Inline style (inside an HTML element)

Now, let’s look at specificity:

Moving from top to bottom, we move from low specificity to high specificity.

p
p.largetext
p#largetext
body p#largetext
body p#largetext ul.mylist
body p#largetext ul.mylist li

Inherited Styles in Nested Tags

(From our textbook page 79)

Nested elements inherit properties from the elements they are nested within.

For example:

<div id="quotes">
<p>“My husband and I always wanted to visit Roy’s in Downtown LA. Specials offered this week gave us a
good excuse. The filet with  lobster...”<span>READ MORE</span></p>
#quotes p {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.8em;
color: #94cfe3;
line-height: 1.5em;
}

.more {
font-size: 1.0em;
color: #000;
font-weight: bold;
}

So therefore, if you have one element’s font-size defined as 1.8 ems and the nested element’s font-size defined as 1.0 ems — the actual size will be displayed as 1.8em x 1em = 1.8em.

If you want the “.more” class text to display at 1.0 em, you need to define it the font-size as .55em (1.0 divided by 1.8=.55em.) Oddly enough, .55em will actually display as 1.0 em.***

*** This may seem like a bit of a hack…we will continue to run into these kind of issues, especially when creating navigation using the list <li> tag. So these issues aren’t going away. We need to talk about child-selectors and other more advanced issues.

Here’s more information on CSS inheritance.

A note about line-spacing using ems

If line-height is set with relative unit (like em or percentage), line-height is always computed from the element’s font-size, whether the sizing is explicitly specified for the given element or simply inherited by a cascade.

For example:

font-size: 12 px

line-height: 16 px

If one’s attempt is to set the 16px leading, then she should divide the 16px with the 12px font size. That simple calculation would result in 1.333em (or 133.3%).

Above information from our textbook Stylin' With CSS and www.w3schools.com.

Category: Classes

Tagged:

Comments are closed.