1 / 24

Chapter 4, 5, and 6

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.

wyanet
Download Presentation

Chapter 4, 5, and 6

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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.

  2. Chapter 4 Saving Time with Inheritance

  3. 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.

  4. 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.)

  5. Chapter 5 Managing Multiple Styles: The Cascade

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

  7. 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

  8. 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”.

  9. 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

  10. 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

  11. 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

  12. 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

  13. ! 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.

  14. Chapter 6 Formatting Text

  15. 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

  16. 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

  17. 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

  18. 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;

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

  20. 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;

  21. 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.

  22. 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; • }

  23. 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

  24. 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.

More Related