Chapter 12 Cascading Style Sheets: Part II The Web Warrior Guide to Web Design Technologies.
The Web Warrior Guide to Web Design Technologies
description
Transcript of The Web Warrior Guide to Web Design Technologies
![Page 1: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/1.jpg)
Chapter 12
Cascading Style Sheets: Part II
The Web Warrior Guide to Web Design Technologies
![Page 2: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/2.jpg)
Objectives
• Learn about CSS measurement values
• Format text with the CSS font properties
• Learn to use the CSS margin, padding, and border properties
• Add color with the CSS color properties
![Page 3: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/3.jpg)
Understanding CSS Measurement Units
• CSS offers a variety of measurement units, including absolute units (such as points), relative units (such as pixels), and percentages of the base font
• The measurement values you choose depend on the destination medium for your content
![Page 4: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/4.jpg)
![Page 5: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/5.jpg)
Absolute Units
• Absolute measurement values let you specify a fixed value
• Avoid using absolute units for Web pages because they cannot be scaled to the individual user’s display type
![Page 6: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/6.jpg)
Relative Units
• Relative units are designed to let you build scalable Web pages that adapt to different display types and sizes
• Relative units ensure that your type sizes will display properly relative to each other or to the default font size set for the browser
![Page 7: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/7.jpg)
Using the CSS Font Properties
The CSS font properties allow you to control the appearance of your text:
• font-family
• font-size
• line height
![Page 8: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/8.jpg)
Specifying Font Families
• The font-family property lets you state a generic font family name, such as sans-serif, or a specific font family name like Helvetica
• You can also string together a list of substitute font families, separated by commas, supplying a selection of fonts that the browser can attempt to use instead of the default font
![Page 9: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/9.jpg)
Generic Font Families
• Serif
• Sans-serif
• Monospace
• Cursive
• Fantasy
![Page 10: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/10.jpg)
Code Sample
• The following rule sets <p> elements to the default sans-serif font:
p {font-family: sans-serif;}
![Page 11: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/11.jpg)
Specific Font Families
• The font-family property lets you declare a specific font family, such as Arial or Helvetica
• The user must have the font installed on his or her computer; otherwise the browser uses the default font
![Page 12: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/12.jpg)
Code Sample
• The following rule sets <p> elements to the Arial font:
p {font-family: arial;}
![Page 13: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/13.jpg)
![Page 14: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/14.jpg)
![Page 15: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/15.jpg)
Specifying Font Substitution
• You can specify a list of alternate fonts using commas as a separator
• The browser will attempt to load each successive font in the list
• If no fonts match, the browser uses its default font
![Page 16: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/16.jpg)
Font Substitution Code Sample
• The following code tells the browser to use Arial; if Arial is not present, it tells the browser to use Helvetica:
p {font-family: arial, Helvetica;}
![Page 17: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/17.jpg)
Specifying Font Size
• The font-size property gives you control over the specific sizing of your type
• You can choose from length units, such as em or px, or a percentage value that is based on the parent element's font size
![Page 18: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/18.jpg)
Font Size Code Sample
• The following rule sets the <p> element to 18-point Arial:
p {font-family: arial; font-size: 18pt;}
![Page 19: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/19.jpg)
Specifying Line Height
• The line height property lets you specify either a length or percentage value for the white space between lines of text
![Page 20: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/20.jpg)
Line Height Code Sample
• The following rule sets the line height to 150%:
p {line-height: 150%;}
![Page 21: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/21.jpg)
![Page 22: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/22.jpg)
![Page 23: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/23.jpg)
Using the Margin, Padding, and Border Properties
• These properties let you control the margin, padding, and border characteristics of block-level elements
• You will learn how to use these properties to enhance the display of content in the browser
![Page 24: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/24.jpg)
The CSS Box Model
• The CSS box model describes the rectangular boxes that contain content on a Web page
• Each block-level element you create is displayed as a box containing content in the browser window
• Each content box can have margins, borders, and padding
![Page 25: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/25.jpg)
![Page 26: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/26.jpg)
![Page 27: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/27.jpg)
Specifying Margins
• The margin properties let you control the margin area of the box model
• Margins are always transparent, showing the background of their containing element
p {margin: 2em;}
![Page 28: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/28.jpg)
![Page 29: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/29.jpg)
Specifying Padding
• The padding properties let you control the padding area in the box model
• The padding area is the space between the element content and the border
p {padding: 2em;}
![Page 30: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/30.jpg)
![Page 31: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/31.jpg)
Specifying Borders
• The border properties let you control the appearance of borders around elements
• The border area is located between the margin and padding
• The border property lets you state three properties for all four borders of any element
• You can state the border-width, border-style, and border-color in any order
![Page 32: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/32.jpg)
Border Code Sample
• The following rule sets the border-style to solid. The border-weight is 1 pixel. The border color will be red.
p {border: solid 1px red;}
![Page 33: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/33.jpg)
![Page 34: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/34.jpg)
![Page 35: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/35.jpg)
Working with Color
• These properties let you control the text color and background colors of any element on a Web page
• The CSS color property replaces the obsolete <font> element in HTML
![Page 36: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/36.jpg)
Color Basics
• A computer monitor displays color by mixing three basic colors of light: red, green, and blue
• Each of these three basic colors is called a color channel
• The monitor can express a range of intensity for each color channel, from 0 (absence of color) to 100% (full intensity of color)
![Page 37: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/37.jpg)
Specifying Color
• The color property lets you specify the foreground color of any element on a Web page
• This property sets the color for both the text and the border of the element, unless you have specifically stated a border color with one of the border properties
![Page 38: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/38.jpg)
Specifying Color
• The value for the color property is a valid color keyword or numerical representation, either hexadecimal or an RGB value
p {color: blue;} /* color name */
p {color: #0000ff;} /* hexadecimal value */
p {color: rgb(0,0,255);} /* RGB numbers */
p {color: rgb(0%,0%,100%);} /* RGB pctgs */
![Page 39: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/39.jpg)
Specifying Background Color
• The background-color property lets you set the background color of any element on a Web page
• The background color includes any padding area that you have defined for the element
body {background-color: #cccccc;}
![Page 40: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/40.jpg)
Summary
• Choose the correct measurement unit based on the destination medium
• Use the font properties to control the look of your letter forms
• Specify font substitution values to ensure that your text displays properly across different platforms
![Page 41: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/41.jpg)
Summary
• The CSS box model lets you control the margin, padding, and border characteristics of HTML elements
• The border properties let you add borders to all individual sides or all four sides of an element
• Use the color property to set foreground colors for elements
![Page 42: The Web Warrior Guide to Web Design Technologies](https://reader036.fdocuments.us/reader036/viewer/2022070405/56813cea550346895da69431/html5/thumbnails/42.jpg)
Summary
• Background colors affect any padding areas in the element
• Remember that color is widely variable on the Web
– different monitors and operating systems display colors differently