chapter 4, 5, and 6
Post on 24-Feb-2016
53 Views
Preview:
DESCRIPTION
TRANSCRIPT
Chapter 4, 5, and 6Inheritance, 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 4Saving Time with Inheritance
Inheritance Is the process by which CSS properties applied
to one tag are passed on to nested tags. Example: <p> 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 5Managing Multiple Styles: The Cascade
The Cascade EXAMPLE: <body> passes properties
to the <p> which passes its properties to the <a href> creating a “frankenstyle”
<body> <p>
<a href=“>
When Styles Collide A <p> tag style in an external style
sheet and another <p> 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
<p> tags There is a <strong> tag inside one <p> tag. What color will the <strong> inherit? The <p> tag color
The nearest tag wins Web browsers obey the style that is closest to
the <strong> tag. In this case, the <p> 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 6Formatting 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/htm
l_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.
top related