3lesson 3: introduction to css version 3 (css3) · 3lesson 3: introduction to css version 3 (css3)...

3Lesson 3: Introduction to CSS Version 3 (CSS3) Objectives By the end of this lesson, you will be able to:

3.1: List the features added to CSS functionality in CSS version 3 (CSS3).

3.2: Apply common CSS3 properties and selectors.

3.3: Apply backgrounds and borders with CSS3.

3.4: Apply fonts and text effects with CSS3.

3-2 Advanced HTML5 and CSS3 Specialist

© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0

Pre-Assessment Questions 1. Which CSS3 property can create rectangles with rounded corners around text?

a. border-radius b. box-shadow c. border-image d. text-overflow

2. Which CSS3 property defines how text should be handled when it extends beyond its allotted area?

a. word-wrap b. text-wrap c. text-overflow d. word-break

3. What is the CSS3 @font-face rule?

Lesson 3: Introduction to CSS Version 3 (CSS3) 3-3


Introduction to CSS3 As you have learned, HTML5 uses Cascading Style Sheets (CSS) as the preferred way to format Web pages. The CSS standard has evolved over the years and continues to build upon itself:

• HTML 4.01 and XHTML 1.0 used CSS versions 1 and 2.

• HTML5 is compatible with CSS versions 1, 2 and 3. Any given HTML5 page will generally include CSS rules from all three CSS versions.

CSS version 3 (CSS3) provides a modularized standard so that when changes need to be made to something in the specification, only a particular module within CSS3 must be updated, rather than the entire standard. This flexibility enables more timely upgrading of the standard as a whole. Thus, new functions are being added to CSS3 to enhance its support of borders, backgrounds, colors, text effects and so forth.

The new modular construction of CSS3 includes the previous CSS standards as well as new modules. Some of the key CSS3 modules include:

• Selectors

• Box Model

• Backgrounds and Borders

• Text Effects

• Fonts

• User Interface

CSS3 also introduces some new capabilities to developers, including:

• 2D and 3D transformations

• Transitions

• Animations

• Alpha transparency

• Overlays

Overlays are created using a combination of new properties. They are not something new on their own.

Browsers generally need to be HTML5-compliant in order to interpret CSS3, but not always. Most basic Web page formatting uses CSS1 and CSS2, whereas CSS3 provides advanced features to extend a Web page’s functionality beyond basic formatting.

CIW Online Resources – Movie Clips Visit CIW Online at http://education.Certification-Partners.com/CIW to watch a movie clip about this topic.

Lesson 3: Introduction to CSS Version 3 (CSS3)

OBJECTIVE 3.1: Features of CSS3

NOTE: Although CSS3 is still under development by the W3C, the modularized approach to updating has enabled many CSS3 techniques to be adopted by browsers already.

®



CSS3 Selectors and Properties As you learned in the previous lesson, any item on a Web page to which you want to apply a CSS style is called a selector. After you have chosen a selector, you can customize it by selecting a property and setting a value.

CSS3 selectors CSS3 offers new selectors to enhance Web page styles by providing Web designers more options to customize pages. Table 3-1 lists common CSS3 selectors.

Table 3-1: Common CSS3 selectors

CSS Selector Description Syntax Example

element[attribute$=value] Selects every instance of a specified element whose specified attribute ends with the specified value

a[href$=".pdf"]

Selects every <a> element whose href attribute value ends with ".pdf"

element[attribute*=value] Selects every instance of a specified element whose specified attribute contains the specified substring value

a[href*="college"]

Selects every <a> element whose href attribute value contains the substring "college"

element[attribute^=value] Selects every instance of a specified element whose specified attribute begins with the specified value

a[href^="https"]

Selects every <a> element whose href attribute value begins with "https"

element:checked Selects every checked instance of a specified element

input:checked

Selects every checked <input> element

element:disabled Selects every disabled instance of a specified element

input:disabled

Selects every disabled <input> element

element:enabled Selects every enabled instance of a specified element

input:enabled

Selects every enabled <input> element

element:first-of-type Selects every instance of a specified element that is the first of its parent

a:first-of-type

Selects every <a> element that is the first <a> element of its parent

element:last-of-type Selects every instance of a specified element that is the last of its parent

a:last-of-type

Selects every <a> element that is the last <a> element of its parent

element1~element2 Selects every instance of element2 that is preceded by an instance of element1

p~ol

Selects every <ol> element that is preceded by a <p> element

Note that this code selects <ol> elements; it does not select <p> elements that are followed by <ol> elements

For a complete list of CSS3 selectors, visit the W3C site at www.w3.org/TR/css3-selectors/#selectors.

OBJECTIVE 3.2: CSS3 properties and selectors

NOTE: Grouping CSS selectors allows identical styles on many different elements. One style can be added to multiple elements, such as: h1, h2, h3 { font-family:arial; }



For example, the element1~element2 selector identifies each occurrence of element2 that is preceded by element1. This selector has two rules:

• The two elements must have the same parent.

• Element1 does not have to immediately precede element2.

You can see that CSS rules such as these can provide you with great control over your pages, but must be used thoughtfully to avoid unexpected results.

In the following lab, you will experiment with using some CSS3 selectors. Suppose your team is updating the company Web site to use more current standards, such as CSS3. Your supervisor wants all paragraph text that follows <h2> headings on the site to be italicized. Unfortunately, she explains, all <h1>, <h2>, and <h3> headings on the site are followed by paragraphs. You decide to use the CSS3 element1~element2 selector to make the task quicker and easier.

Lab 3-1: Using CSS3 selectors

In this lab, you will use the CSS3 selector element1~element2 to format every <p> element that is preceded by an <h2> element.

1. Windows Explorer: Copy the Lesson03 folder from your student lab files to your Desktop.

2. Editor: Open the Lab_3-1\Lab_3-1.htm file in your student lab files.

3. Enter the code as shown in bold below: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Lab 3-1</title> <style> h2~p { font-style: italic; } </style> </head> <body> <h1>Heading 1</h1> <p> The paragraph text following Heading 1 is not affected by the CSS3 h2~p selector. </p> <h2>Heading 2</h2> <p> The paragraph text following Heading 2 is affected and italicized by the CSS3 h2~p selector. </p> </body> </html>

4. Editor: Save Lab_3-1.htm.

OBJECTIVE 3.2: CSS3 properties and selectors



5. Browser: Open Lab_3-1.htm. Your browser should resemble Figure 3-1.

Figure 3-1: Using the CSS3 element1~element2 selector

6. Close your browser and text editor.

In this lab, you used the CSS3 element1~element2 selector to ensure that all <p> elements following an <h2> element are italicized.

CIW Online Resources – Online Exercise Visit CIW Online at http://education.Certification-Partners.com/CIW to complete an interactive exercise that will reinforce what you have learned about this topic.

Exercise 3-1: CSS selectors

CSS3 properties A property defines how a selector renders in a browser. You can change a selector's background, font family and text effects using a property value, and the changes will apply to all instances of that element.

CSS properties manipulate text and other elements similarly to the way a word processor or basic graphics program does. The newer CSS3 properties include text shadows, text outlines and text borders. Table 3-2 describes some of these CSS3 properties. More properties are discussed later in this lesson.

NOTE: If time permits, try experimenting with other selectors.

®



Table 3-2: CSS3 properties

Property Description Syntax Examples

background (now allows multiple images)

Specifies all properties for the page background

Not a new property, but the option to use multiple background images is a new CSS3 feature

Note: You must separate background image file names using commas

background: url("path/image.png") 0 0 no-repeat, url("path/image2.png") 100% 0 no-repeat;

background-clip

Specifies the painting area of the background

Determines whether the background extends into the border or not

background-clip: border-box

background-clip: padding-box

background-clip: content-box

background-origin

Positions the background-image relative to an element’s border, padding or content

background-origin: border-box

background-origin: padding-box

background-origin: content-box

background-size

Defines the size of background images

Accepts the values of: -length -percentage -cover (optional) -contain (optional)

Default value is auto

background: url("path/to/image.png") no-repeat; background-size: 100% 100%;

border-image Creates a border that uses an image instead of a line

border-image: url("flowers.png") 80 40 round;

border-radius Defines the shape or curve of a border around an element

Used to create rounded corners in borders

border-radius: 40px;

box-shadow Applies shadows to edges of elements to create visual depth

Accepts six values: -h-shadow -v-shadow -blur (optional) -color (optional) -inset (optional) -spread (optional)

box-shadow: 1px 1px 3px #292929;

opacity Specifies transparency for an HTML element (e.g., structure tag, image)

Accepts values from 0.0 to 1.0

The lower the value, the more transparent the element

img { opacity: 0.2; }

resize Defines whether an element can be resized by the user and how it can be resized

Accepts four values: -vertical -horizontal -none -both

resize: vertical;

NOTE: Multiple backgrounds capability is a new feature of CSS. It is not a property per se, but a technique for adding several different backgrounds to the same Web page using the CSS background property. That is, the background property now allows for multiple values.



Table 3-2: CSS3 properties (cont'd)

Property Description Syntax Examples

text-overflow Cuts off, or clips, text that extends beyond its container

Can add an ellipsis ( . . . ) to represent continuing text

Accepts values including: -clip -ellipsis -string

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

width: 400px;

text-shadow Applies shadows to edges of text characters to create visual depth

Accepts six values: -h-shadow -v-shadow -blur (optional) -color (optional) -inset (optional) -spread (optional)

text-shadow: 0 1px 0 white;

The remainder of this lesson will focus on implementing CSS3 selectors and properties. Due to the large number of CSS3 properties, only the most commonly used properties will be covered.

For a complete list of CSS3 properties, visit http://w3schools.com/cssref/default.asp


Exercise 3-2: CSS properties

CSS3 Background Properties Background properties are commonly used in CSS to add color or images to a Web page background. CSS3 offers new background properties that extend its usefulness. The new background properties are:

• background-origin.

• background-clip.

• background-size.

CSS3 also introduces new functionality to the existing CSS background property: It now allows multiple background images.

The background-origin property The background-origin property defines the location to which the background-position property should be relative.

OBJECTIVE 3.3: CSS3 backgrounds and borders

®



The background-position property is a CSS1 property that defines the position of a background image, such as left-top or center-bottom.

The background-origin property has three values:

• border-box — sets the background relative to the border’s upper-left corner

• padding-box — sets the background relative to the padding edge’s upper-left corner

• content-box — sets the background starting from the content’s upper-left corner

Consider the following CSS code:

div { border: 2px solid #6600FF; padding: 10px; background-image: url("globe.png"); background-repeat: no-repeat; background-origin: border-box; background-position: center; }

Figure 3-2 shows the result of this example code. Notice that the image behind the text extends all the way into the border, rather than just to the padding or to the edge of the content.

Figure 3-2: Using CSS3 background-origin property with border-box value

The background-clip property The background-clip property determines whether the background extends into the border or not. The three values are as follows:

• border-box — extends the background to the outside edge of the border (default setting).

• padding-box — extends the background to the padding area but not into the border.

• content-box — clips the background within the content box.


div { background-clip: content-box; background-color: #ADD8E6; border: 2px solid #888888; width: 200px; height: 200px; padding: 25px; }



Figure 3-3 shows the result of this example code. Notice that the blue background is clipped before it reaches the edge of the element's border.

Figure 3-3: Using CSS3 background-clip property with content-box value

The background-size property Before CSS3, background image size was largely dependent on the size of the original image. The CSS3 background-size property allows background images to be resized. Consider the following example code:

article { background: url("ciw_logo.png"); background-size: 80px 60px; background-repeat: no-repeat; }

The background-size property is defined by values in percentages or pixels. Percentage sizes are relative to the width and height of the parent element. Table 3-3 describes the background-size property values.

Table 3-3: Values for CSS3 background-size property

Value Description

length Sets the background image's: -width (first value) -height (second value)

Can be specified in pixels, em units, etc.

If only one value is given, the second value is set to "auto"

percentage Sets the background image's: -width (first value) -height (second value)

The value specified determines the size of the image in relation to the parent element (i.e., a value of 50% gives the image a width of 50% of the container)

If only one value is given, the second value is set to "auto"

cover Scales the background image to the largest size possible that completely covers the background area of the parent container while maintaining aspect ratio of the image

Note that some parts of the background image may not be visible in the background area when using this value

contain Scales the background image to the largest size possible that allows both width and height to fit within the specified content area

Maintains the aspect ratio but may not completely fill the parent container

NOTE: Before CSS3, the background image size was determined by the actual size of the image.



Multiple backgrounds CSS3 introduces the ability for multiple backgrounds using the CSS background property. The multiple backgrounds technique allows you to specify multiple images for a background in a single declaration. This enables you to combine and layer more than one image in your page background.


body { background-image: url("../media/html5_logo.jpg"), url("../media/globe.png"); background-repeat: repeat-y, no-repeat; }

Figure 3-4 shows the result of this CSS code, a page background using multiple images.

Figure 3-4: Multiple backgrounds using CSS3

CSS3 transparencies CSS3 uses the opacity property to specify transparency for an element. This property can be applied to HTML elements such as structure tags and images.

A value from 0.0 to 1.0 determines how transparent the element appears: the lower the value, the more transparent the element. You can also use the inherit value to indicate that an element should inherit its transparency from its parent.

For example, to create a transparent image with CSS3, use the following code:

img { opacity:0.6; }

You can also apply transparency using the rgba property, an extended RGB color-setting feature. Based on the existing RGB (red-green-blue) coding, RGBA adds the "alpha" value, which defines a color’s opacity. The rgba property defines only a single declaration, whereas the opacity property defines an element and its children.

opacity The amount of transparency in an element's appearance. Can be specified for various elements and properties using CSS.

NOTE: The opacity property also uses an inherit value. This value indicates the opacity value is inherited from the parent element.



In the following lab, you will experiment with CSS3 backgrounds and transparencies. Suppose your supervisor wants to add a globe image to your Web site. You check the globe image she provided and it is small. You decide to resize the image to cover more of the background.

Lab 3-2: Adding CSS3 backgrounds and transparency

In this lab, you will use CSS3 background properties to customize a Web page’s background.

1. Editor: Open Lab_3-2\index.htm in your student lab files.

2. Add opening and closing <section> tags around the <article> tags as shown in bold.

Note: The three <article> elements will be nested within a <section> </section> tag. The background globe.png image will appear behind all three <article> elements. … </nav> <section> <article> <h1>Our Mission</h1> … … </audio> </p> </article> </section> <footer> …

3. Save the Lab_3-2\index.htm file.

4. Editor: Open Lab_3-2\css\habitat.css in your student lab files.

5. Add a background to the <section> element you added. Scale the image to the largest size such that both its width and its height can fit inside the content area. Enter the following code shown in bold: nav { background: #d8d8d8; font-weight: bold; float: left; height: 420px; padding-right: 24px; margin-right: 10px; } Section { background-image: url("../media/globe.png"); background-repeat: no-repeat; background-size: cover; }




.floatright { float: right; clear: right; margin: 10px; }

6. Save the Lab_3-2\css\habitat.css file.

7. Browser: Open index.htm. Your page should resemble the Figure 3-5.

Figure 3-5: Adding background image using cover value

8. Editor: Shrink the background image with the background-size property’s contain value. To see the background image through the <nav> section, use the opacity property. Open the habitat.css file and enter the following code:

nav { background: #d8d8d8; font-weight: bold; float: left; height: 420px; padding-right: 24px; margin-right: 10px; opacity: 0.8; } Section { background: url("../media/globe.png"); background-repeat: no-repeat; background-size: cover contain; }


10. Browser: Refresh index.htm. Your page should resemble Figure 3-6.

NOTE: If time permits, try experimenting with other properties and values.



Figure 3-6: Adding transparent background


In this lab, you used the CSS3 background-size property to resize an image file used for the background. You also learned how to make the navigation section of the Web page transparent.

CSS3 Border Properties If you have worked with Microsoft Word, you may have used the WordArt tool to create outlined text, rectangles, boxes and circles, and modified the shapes, text and borders as various colors and thicknesses.

The CSS3 border properties attempt to match or provide similar functionality of these programs so you can create buttons and menus for your Web pages. The most often used CSS3 border properties are the following:

• border-image

• border-radius

• box-shadow

The border-image property The CSS3 border-image property allows you to create a border that uses an image instead of just a line. You can set all the border-image values by listing the location, width, height and shape, as shown in the following example.

div { border-image: url("flowers.png") 80 40 round; }


NOTE: The border-image property is not supported by Internet Explorer.



In the example, the border image's location is identified as url("flowers.png"). The width is 80 pixels, the height is 40 pixels, and the shape will be round.

Note that vendor prefix "webkits" are sometimes required for certain browsers to use CSS3 properties. You must list each webkit reference on its own line of code with the appropriate prefix, as follows:

• –webkit- (for Chrome, Safari and iOS)

• -o- (for Opera)

• –mozilla- (for Firefox)

• –ms- (for Internet Explorer)

These prefixes are not always required. One day they may not be required at all when all browsers support the new standards more comprehensibly. The following code includes webkit prefixes with the previous example:

div { -o-border-image:url(flowers.png) 80 40 round; /* Opera */ -webkit-border-image:url(flowers.png) 80 40 round; /* Safari5 and previous */ border-image: url("flowers.png") 80 40 round; }

An example of the border-image property can be found at Webflux’s CSS3.info site. Figure 3-7 displays several images that are used as border images.

Figure 3-7: Two border-image property examples from Webflux CSS3.info site

The border-radius property CSS3 uses the border-radius property to create rounded corners. It allows you to add rounded corners to the border of any element, such as text, images and shapes. See the following example:

div { border: 2px solid; border-radius: 30px; }

The border-radius property is a breakthrough for quickly creating good-looking navigation links. Web designers simply add a border to text, apply the border-radius property, and include a navigation link. With a few artistic properties added, the text becomes a button for navigation, as shown in Figure 3-8.

NOTE: Before CSS3, it was difficult to add rounded corners. Images had to be used for each corner to achieve the same style.



Figure 3-8: Text borders with rounded corners as buttons using CSS3 border-radius property

The box-shadow property The CSS3 box-shadow property adds a configurable shadow to a box. This property can take several values, which can be listed in one declaration:

• h-shadow — the horizontal shadow position, also referred as x-offset (required)

• v-shadow — the vertical shadow position, also referred as y-offset (required)

• blur — the distance of the shadow’s blur (optional)

• spread — the shadow size (optional)

• color — the shadow color (optional)

• inset — creates an inward shadow instead of an outward shadow (optional)

The first two values are required, but the others are optional. The code resembles the following when the first four values are used in one declaration followed by the hex color of the shadow.

box-shadow: 5px 5px 0px 5px #888888;

Figure 3-9 shows the buttons from the previous example (border-radius) with the box-shadow property applied as shown in the code example above.

Figure 3-9: Element with CSS3 box-shadow property applied

In the following lab, you will use CSS3 border properties to create buttons and shadows on a Web page. Suppose your supervisor tells your team that she wants your department Web page to look better, more professional. She suggests you update the navigation hyperlinks to appear as buttons instead of underlined text. You decide to experiment with CSS3 to add borders and rounded corners to the text hyperlinks.

Lab 3-3: Creating buttons and shadows with the CSS3 border properties

In this lab, you will use the CSS3 border-radius and box-shadow properties to enhance the appearance of navigation buttons.

1. Editor: Open Lab_3-3\index.htm in your student lab files.

2. Add a class property with a navlinks value to your HTML file by adding the following code shown in bold:




<nav> <p><a class="navlinks" href="http://www.habitat.org/how/about_us.aspx">Learn more</a></p> <p><a class="navlinks" href="http://www.habitat.org/getinv/volunteer_programs.aspx">Volunteer</a></p> <p><a class="navlinks" href="http://www.habitat.org/gov">Advocate</a></p> <p><a class="navlinks" href="https://www.habitat.org/cd/giving/donate.aspx?r=r&link=1">Donate</a></p> </nav>

3. Save the Lab_3-3\index.htm file.


5. Create a button around each anchor by entering the following code shown in bold: .floatright { float: right; clear: right; margin: 10px; } .navlinks { display: block; border: 2px solid #a1a1a1; padding: 2px 5px; background: #add8e6; border-radius: 5px; text-decoration: none; box-shadow: 5px 5px 5px #888888; }

6. Save Lab_3-3\css\habitat.css.

7. Browser: Open Lab_3-3\index.htm. You screen should resemble Figure 3-10.

Figure 3-10: Adding border-radius property to create navigation buttons





In this lab, you created buttons without graphics using the CSS3 border-radius property, and you added shadows to the buttons using the box-shadow property. These properties allow Web designers to quickly and easily create buttons and menus for navigation.

CSS3 Font Properties In the past, Web designers were forced to format their pages using only fonts that were installed (or likely to be installed) on the users' computers. Only the most basic fonts could be guaranteed, such as Arial, Helvetica and Times New Roman. Specifying a font that the client computer did not have installed would cause the browser to display its default font instead.

CSS3 opened up the universe to Web designers by allowing any font to be specified. This feat is accomplished by storing the fonts on the Web server, instead of relying on the client device. When a client visits a Web page styled with CSS3, the font is automatically downloaded onto the system. These fonts are identified using the CSS3 @font-face rule.

The @font-face rule The @font-face rule allows developers to specify custom fonts for their Web page elements. If the user's browser does not have a matching font to view the page, then @font-face can provide the desired font (or influence the choice of the replacement font). This at-rule requires the developer to name the font and provide a server location from which it can be obtained.

An "at-rule" is a CSS statement that begins with the @ ("at") symbol and provides instructions to the CSS parser for various purposes, such as custom font selection or importing style sheets. Commonly used at-rules include @font-face, @import, @namespace and @charset. You can learn about at-rules from Sitepoint at http://reference.sitepoint.com/css/atrulesref.

To specify your preferred font for an HTML element, you refer to the font's name through the font-family property. In the following example, the developer named the font oregonfont because she wants a font from the custom Oregon font family. If the Oregon font cannot be obtained, then a fallback font with visually similar characteristics (or font descriptors) could be specified. See the following example CSS code:

@font-face { font-family: oregonfont; src: url("../media/oregon book.ttf"); } div { font-family: oregonfont; }

If you require bold text on your Web site, you must add a second @font-face rule that identifies the bold version of the font family. For example, consider the custom "oregon_bold.ttf" font. This font family contains the Oregon font’s bold characters:

@font-face { font-family: oregonfont; src: url("../media/oregon bold.ttf"); font-weight: bold; }

OBJECTIVE 3.4: CSS3 fonts and text effects

@font-face CSS3 rule that defines any font desired by a Web designer; the font library is hosted on the Web server. NOTE: Consider the importance of the @font-face rule. Before CSS3, Web designers had to use basic fonts they knew would be installed on all client computers, or face unexpected results.



With this code, the browser will now use the bold version of the font family whenever the Oregon font is specified to render in bold. As you can see, this requires you to have several @font-face rules for the chosen font.

If you download custom fonts to use on your Web pages, carefully read the font’s license. Most font licenses do not allow you to load the font on a server. Consider using the Google Fonts service instead. It includes license-free fonts for use (www.google.com/fonts).

The two required properties for the @font-face rule are as follows:

• font-family — specifies the font name

• src — identifies the font file's location by URL

The Oregon LDO fonts are freeware fonts created by Luke Owens for commercial and personal use.


Exercise 3-3: CSS font properties

CSS3 optional font properties Table 3-4 describes optional CSS3 font properties.

Table 3-4: Optional CSS3 font properties

Optional Font Property Accepted Values Description

font-stretch normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded

Specifies how the font should be stretched or spaced

-The more condensed the font, the closer together the letters appear within a word

-The more expanded the font, the farther apart the letters appear within a word

Default is "normal"

font-style normal italic oblique

Specifies how the font should be styled, basically vertical or slanted:

-Oblique — just slightly slanted

-Italic — slightly slanted and slightly different glyphs or flourishes

Default is "normal"

font-weight normal bold 100 200 300 400 500 600 700 800 900

Specifies the weight or thickness of each character in the font

Higher numerical values specify a thicker, bolder font

Default is "normal"

400 is the same as normal

700 is the same as bold

®



Table 3-4: Optional CSS3 font properties(cont'd)

Optional Font Property Accepted Values Description

unicode-range unicode-range Specifies the range of UNICODE characters that should be downloaded for the font, based on availability

Useful when you need to use certain characters (such as keyboard or mathematical symbols)

Default is "U+0-10FFFF"

Still experimental

CSS3 Text Effects CSS3 provides several new text properties designed to expand the formatting and capabilities of Web page text.

Table 3-5 lists the common CSS3 text effect properties. Each property is simply added to an element in the style sheet with the desired values. Be aware that many of these properties currently have limited browser support.

Table 3-5: CSS3 text effect properties

Text Effect Property Description

hanging-punctuation Specifies whether (and how) punctuation characters can appear outside the line box at the beginning or end of a full line of text

punctuation-trim Specifies whether (and how) punctuation characters can be trimmed or sized when they appear at the beginning or end of a line

text-align-last Specifies a justification style for the last line in a text block whose text-align property is set to "justify"

text-emphasis Applies emphasis style and color to an element's text in a single declaration

text-justify Specifies a justification style for text whose text-align property is set to "justify"

text-outline Creates outlined characters for text

text-overflow Specifies whether text that overflows the containing element should be clipped or indicated with an ellipsis

text-shadow Applies a shadow effect behind text characters

text-wrap Specifies whether lines of text in a text area can break, and where a line can be broken

word-break Specifies whether lines of text in a text area can break, and where a line can be broken

For non-CJK (Chinese-Japanese-Korean) scripts

word-wrap Specifies that long words in a text area may be broken without a hyphen and wrap to the next line

Previously, designers had to use a graphics program to create text effects, which then had to be saved as images to use in Web pages. As an alternative, two of the most useful CSS3 effects are text-shadow and word-wrap.




The text-shadow property The text-shadow property applies shadow to text. This is accomplished by defining a horizontal shadow, a vertical shadow, blur distance and a shadow color. Consider the following example:

h1 { text-shadow: 3px 3px 3px #888888; }

Figure 3-11 shows the result of this example code as it will display in a browser.

Figure 3-11: Heading level 1 with CSS3 text-shadow property applied

Note that IE9 and earlier versions do not support the CSS3 text-shadow property.

The word-wrap property The word-wrap property forces a word to break, or wrap, to the next line when it reaches the end of its specified visible area. If necessary, it splits a word in the middle and wraps it to the next line.

p { word-wrap: break-word;

In the following lab, you will use CSS3 to format text on a Web page. Suppose your supervisor wants to update the look of the company Web site. She calls a meeting with your design team. She wants a new font that was created by the marketing department to replace the current Arial font on the site. She also wants a text shadow effect on all <h1> headings. You gather your team and decide to use CSS3 to accomplish the assigned tasks.

Lab 3-4: Using CSS3 fonts and text effects

In this lab, you will define a new font family using the CSS3 @font-face rule. It is a rare font family not found on most computers. You will also add text shadows using the text-shadow property.


2. Remove the existing font family rules as shown in strikethrough: body { font-size: 80%; font-family: arial, helvetica, geneva, sans-serif; border-style: solid; border-width: 5px; border-color: #d8d8d8; } … h1 { font-family: arial, helvetica, geneva, sans-serif; margin-top: 5px; margin-bottom: 0px; }

NOTE: Before CSS3, words that were too long to fit within a specified area (such as a cell or box) would expand outside the visible area and require scrolling or copying/pasting in order to read.

NOTE: You can see the effects of some of these text properties in Optional Lab 3-1: Using the CSS3 text-overflow and word-wrap properties.




3. Apply a font named Oregon Book with the @font-face rule. Ensure that the font resides in your CSS folder. Enter the following code shown in bold (and delete code shown in strikethrough): /* STYLE SHEET FOR INDEX.HTM */ @font-face { font-family: oregonfont; src: url("../media/oregon book.ttf"); } article { padding: 10px; } body { font-family: oregonfont; font-size: 80% 85%; border-style: solid; border-width: 5px; border-color: #d8d8d8; }


5. Browser: Open Lab_3-4\index.htm from your student lab files. Your screen should resemble Figure 3-12.

Figure 3-12: Applying Oregon Book font family

6. Editor: Open Lab_3-4\css\habitat.css. Add a subtle text shadow to the <h1> elements to help emphasize them. Enter the following code as shown in bold: h1 { text-shadow: 3px 3px 3px #888888; margin-top: 5px; margin-bottom: 0px; }




8. Browser: Refresh Lab_3-4\index.htm from your student lab files. Your screen should resemble Figure 3-13.

Figure 3-13: Subtle <h1> text shadowing using text-shadow property


In this lab, you added a non-standard font to your Web page that can display in the user's browser even if it not installed on the user system. You also added text shadowing using CSS3 text effects.

Formatting text, borders and page backgrounds with CSS3 enhances your Web site quickly and easily. For anyone who has designed Web pages in the past, these properties are intelligent breakthroughs that make Web design much less time-consuming.

In the next lesson, you will learn some more advanced formatting techniques offered by CSS3.

CIW Online Resources – Course Mastery Visit CIW Online at http://education.Certification-Partners.com/CIW to take the Course Mastery review of this lesson or lesson segment.

Course Mastery Lesson 3


®



Case Study Lighten the Load Jericho is responsible for redesigning his company’s Web site. During the redesign, he will introduce CSS3 to the site. His supervisor requests a site that works on mobile devices as well as desktop computers.

Jericho adds a navigation bar and background images to the site. He also includes bitmap images of company employees that he obtains from the marketing department. He uses images of buttons to create navigation links in the navigation bar. These images allow him to create oval buttons for users to click to navigate the site.

His supervisor reviews the prototype site and compliments Jericho on a job well done. However, during testing, mobile users complain of slight delays for the site to load. Jericho reviews the site to determine the delay.

* * *

Consider this scenario and answer the following questions:

• Did Jericho use CSS3 for all aspects of the redesigned site?

• How do the images that Jericho used affect the site’s download time?

• Are images required for navigation link buttons?

• What specific CSS3 properties can Jericho add to the site to improve download time?



Lesson Summary

Application project CSS3 adoptions are spreading quickly as companies develop Web sites for many different devices. Can you find some examples?

Visit three different Web sites. Do these Web sites implement CSS3? You may need to search for clues in the HTML and CSS source code.

For example, in the HTML source code, view the images, video, animation and background elements. Do they refer to CSS styles for specific properties?

Skills review In this lesson, you learned about how CSS3 has simplified the process for adding and configuring backgrounds, borders, fonts and text formatting. More CSS3 selectors and properties mean more control over your HTML element styles. Multiple backgrounds can be added to a page using CSS3, allowing Web designers to design more complex backgrounds without the need for additional tools.

CSS3 also allows Web designers to add their own fonts to the Web page, instead of relying on the fonts already installed on client systems. CSS3 also provides the capability to create text shadows, which greatly simplifies the process of formatting text with more visual depth and sophistication.

Now that you have completed this lesson, you should be able to:

3.1: List the features added to CSS functionality in CSS version 3 (CSS3).

3.2: Apply common CSS3 properties and selectors.

3.3: Apply backgrounds and borders with CSS3.

3.4: Apply fonts and text effects with CSS3.

CIW Practice Exams Visit CIW Online at http://education.Certification-Partners.com/CIW to take the Practice Exams assessment covering the objectives in this lesson.

Objective 3.01 Review




Note that some objectives may be only partially covered in this lesson.

®



Lesson 3 Review 1. Describe what the CSS3 selector Element1~Element2 does in your Web page,

including the two rules it follows.

2. The background-clip property determines whether the background of a Web page extends into the border or not. What three values does the background-clip property accept, and what does each one do?

3. Name three CSS3 border properties. What can you create on your Web pages by using them?

4. What values does the font-style property accept, and how do these values differ?

5. How do the text-overflow and word-wrap properties differ from each other?

3lesson 3: introduction to css version 3 (css3) · 3lesson 3: introduction to css version 3 (css3)...

Documents