Understanding CSS Inheritance, The Cascade, and Text Formatting Techniques

Chapter 4, 5, and 6 Inheritance, The Cascade, and Formatting Text You must use a left-mouse click to advance the slides. If you need to print any of the slides, OR cannot play the presentation, please contact me at carole.eustice@pcc.edu.

Chapter 4 Saving Time with Inheritance

Inheritance • Is the process by which CSS properties applied to one tag are passed on to nested tags. • Example: tag is always nested inside the <body> tag • Consequences: Body tag properties are inherited by the P tag • Can be a timesaver • Applies to class and IDs also • Not all properties are inherited—border property for one.

When Inheritance Does NOT Apply • Properties that affect the placement of elements on a page—margins, background colors, and borders. • Web browsers = links are blue, headings are bold, etc. • When styles conflict – the more specific style wins out. (Applying a font size to a style will override the font size of a <body> tag.)

Chapter 5 Managing Multiple Styles: The Cascade

The Cascade • EXAMPLE: <body> passes properties to the which passes its properties to the <a href> creating a “frankenstyle” • <body> • • <a href=“>

When Styles Collide • A tag style in an external style sheet and another tag style in an internal style sheet relating to the same document. • The “Cascade” governs how styles interact and which style has precedence when there is a conflict

The Cascade has a SET of RULES • Conflicts: happen • 1. Through “inheritance”—when one tag inherits properties from multiple tags or ancestors. • 2. When one or more styles apply to the same element. • Inherited styles can form a “hybrid” style or “frankenstyle”.

Nearest Ancestor Wins • Different colors applied to the <body> and tags • There is a tag inside one tag. • What color will the inherit? • The tag color • The nearest tag wins • Web browsers obey the style that is closest to the tag. • In this case, the tag style is more narrowly defined

The Directly Applied Style Wins • Any style applied directly to a tag is king. • Beats out any inherited properties • HOWEVER, one tag can have many styles • A tag has both a tag selector and a class style • Same style appears more than once on a sheet • A tag has both a class and an ID • More than one style sheet is attached • Complex selectors targeting the same tag

Specificity • Three styles with different font-family properties, which does the browser use? It applies points to each • A tag selector is worth 1 point • A class selector is worth 10 points • An ID selector is worth 100 points • The higher the number, the greater the specificity • In a tie, the last style wins

Conflict Between Internal and External Style Sheets • Placement of the style within the HTML file becomes important • Use !important to off set the conflict • Change the specificity so no conflict exists • Selective overriding (use an internal style sheet) • It takes precedence over the external sheet • Second external style sheet—if using two external sheets, the first listed takes precedent

! important • #nav a {color: red;} • a { color: teal !important;} • Adding !important after a property value indicates that the property ALWAYS wins. • However, use this property sparingly.

Chapter 6 Formatting Text

Formatting Text • Know your font types • Difference between “serif” and “san serif” fonts • Serif fonts are best for the body of your web page • San Serif fonts are best for headings • EXAMPLES: • Serif = Times New Roman, Georgia, Fantasy • San Serif = Arial, Helvetica, Verdana

Add Color to Text • Use hexadecimal or RBG properties • http://html-color-codes.com/ • http://www.december.com/html/spec/colorsafe.html • http://www.w3schools.com/Html/html_colors.asp • http://www.w3schools.com/HTML/html_colornames.asp

Change Font Size • Varying sizes can create visual interest • Sizing Units: • Keywords add or subtract • Ems from size already • Exs in use • Percentages (adjust in relationship to browser font) • Pixels (easy to understand, independent of browser) • Picas • Points • Inches, centimeters and millimeters

Format Words and Letters • Bold and Italics = • font-style: italic; • font-style: normal; • font-weight: bold; • font-weight: normal; • Capitalizing = • text-transform: uppercase; • font-variant: small-caps;

Decorating text = • Text-decoration: underline; (overline, line-through, blink, or none) • Aligning Text = • text-align: center; (left, right, justify)

Letter and Word Spacing • CSS can tighten headlines making them appear bolder or heaver • Increasing the space gives headlines a calmer, more majestic quality • letter-spacing: -1px; • letter-spacing: 10px; • word-spacing: 2px;

Line Spacing • Can use ems, pixels, or percentages to set the size of the line. • line-height: 150%; • line-height: 1.5; (can use simply a number) • Generally, percentages or ems are better because they change according to the font-size property.

Indenting First Line and Removing Margins • First-line Indent: • text-indent: 25px; • Control Margins: • margin-top: 0; • margin-bottom: 0; • Formatting First Letter or First Line: (pseudo-class) • p:first-letter { • font-weight; bold; • color: red; • }

Style Lists • Bullets—disc, circle, or square (may also use a graphic) http://www.stylegala.com/features/bulletmadness/index.html • (See page 137) • list-style-image: url(images/bullet.gif); • List Numbering Schemes—decimal, decimal-leading-zero, upper-alpha, lower-alpha, upper-roman, or lower-roman

Positioning Bullets and Numbers • list-style-position: outside; • list-style-position: inside; • Can also use padding to increase or decrease the distance between the bullet and the text.

Understanding CSS Inheritance, The Cascade, and Text Formatting Techniques