9/5/2014 Module 6: Styling HTML5 by Using CSS3

Module 6: Styling HTML5 by Using CSS3

Contents:

Module Overview

Lesson 1: Styling Text by Using CSS3

Lesson 2: Styling Block Elements

Lesson 3: Pseudo-Classes and Pseudo-Elements

Lesson 4: Enhancing Graphical Effects by Using CSS3

Lab: Styling Text and Block Elements by Using CSS3

Module Review and Takeaways

Module Overview

Styling the content displayed by a web page is an important aspect of making an application attractive and easy to use. CSS is the
principal mechanism that web applications use to implement styling, and the features added to CSS3 support many of the new
capabilities found in modern browsers.

Where CSS1 and CSS2.1 were single documents, the World Wide Web Consortium has chosen to write CSS3 as a set of modules,
each focusing on a single aspect of presentation such as color, text, box model, and animations. This allows the specifications to
develop incrementally, along with their implementations. Each specification defines properties and values that already exist in
CSS1 and CSS2, and also new properties and values.

In this module, you will examine the properties and values defined in several of these modules, the new selectors defined in CSS3,
and the use of pseudo-classes and pseudo-elements to refine those selections.

Objectives

After completing this module, you will be able to:

• Use the new features of CSS3 to style text elements.

• Use the new features of CSS3 to style block elements.

• Use CSS3 selectors, pseudo-classes, and pseudo-elements to refine the styling of elements.

• Enhance pages by using CSS3 graphical effects.

Lesson 1 : Styling Text by Using CSS3

You have already seen a number of core CSS properties that style and transform text. In this lesson, you will look in more detail at
the value ranges for some of these properties, and you will also be introduced to a number of new CSS3 properties that target
[Link] 1/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

text.

Lesson Objectives
After completing this lesson, you will be able to:

• Explain the different ranges of values you can apply to CSS font and text properties.

• Demonstrate the new CSS3 properties applicable to text and to blocks of text.

Fonts and Measurements

CSS3 adds the @font-face rule to support downloading fonts onto a user's computer so that the browser can use them to render
text. CSS3 also includes a number of new ways to specify the size of a font and the spacing around it. These measurements also
apply to boxes, columns, images, and positioning.

@font-face

Web designers have, until recently, been restricted when deciding how to render text to the set of fonts installed by default on
different operating systems. This limitation has often resulted in using a combination of web-safe fonts for general text and the
replacement of particular headings with a graphic of that heading's text in a different font.

The @font-face rule enables you to specify a font file to download, give it a name, and then use it in your CSS rules just like any
other web-safe font such as Times, Arial, and Helvetica.

The following example shows how to use the @font-face rule to download the TrueType® version of the Roboto Regular font,
and use it to style some paragraphs.

Using the @font-face Rule

@font-face {
font-family: 'RobotoRegular';
src: url('[Link]') format('truetype');
font-stretch: normal; // Default
font-weight: normal; // Default
font-style: normal; // Default

[Link] 2/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

unicode-range: U+0-10FFFF; // Default

}
p{
font-family : RobotoRegular, "Segoe UI", Arial;
font-size: 14px;
}

The @font-face rule implements a combination of properties that define how a browser should use a font:

• font-family sets the name to be used for this font in other style sheet rules.

• src defines the URL to download the font file from and the type of font file being downloaded.

• font-stretch identifies how condensed or expanded the font is.

• font-style identifies whether the font is italicized, oblique, or normal.

• font-weight identifies the boldness of the font; bold, normal, or a value between 100 and 900.

• unicode-range identifies the range of Unicode characters the font supports.

Only the font-family and src properties are required, but if you have access to the font files for condensed, bold, or italic variants
of the same font, you should prefer to use these rather than let the browser style the text. The purpose of the optional properties
is to give the browser hints that these font variants are available, as shown in the following examples:

@font-face {
font-family: 'RobotoRegular';
src: url('[Link]') format('truetype');
}
@font-face {
font-family: 'RobotoRegular';
src: url('[Link]') format('truetype');
font-weight: bold;
}
@font-face {
font-family: 'RobotoRegular';
src: url('[Link]') format('truetype');
font-style: italic;
}

You should also note that while most web browsers support the @font-face rule, they do not all support the same font formats.
You actually require four font file formats for complete support (embedded-opentype, woff, truetype, and svg). The following
example shows how to download the font files that support these formats:

@font-face {
font-family: 'RobotoRegular';

[Link] 3/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

src: url('[Link]');
src: url('[Link]?#iefix') format('embedded-opentype'),
url('[Link]') format('woff'),
url('[Link]') format('truetype'),
url('[Link]#RobotoRegular') format('svg');
}

Note: You should not distribute font files around the web unless you have a license to do so. However, there are many
open source fonts available, and several font webshops will sell you a font and the required license.

Measurements

When you set the font-size property, the most common units used for that property are points for print style sheets and pixels
for screen style sheets. However, CSS3 defines several additional units of measurement that can be applied to boxes, columns,
and images, and for positioning these items.

There are six units of absolute measurement:

• Centimeters.

• Millimeters (mm): 10 millimeters = 1 centimeter.

• Inches (in): 1 inch = 2.54 centimeters.

• Picas (pc): 1 pica = 12 points = 1/6th of an inch.

• Points (pt): 1 point = 1/72nd of an inch.

• Pixels (px): 1 pixel = 1/96th of an inch.

There are seven units of relative measurement. Four are 'font-relative':

• em: 1em = the current font size of the current element.

• ex: 1ex = the height of the font's lowercase x-height, or 0.5 em if not calculable.

• ch: 1ch = the width of the font's 0 (zero) character.

• rem: 1rem = the size of the font defined on the html element (16px default).

The other three are 'viewport-relative'. That is, they are relative to the size of the browser window object:

• vw: 1vw = 1% of the width of the viewport.

• vh: 1vh = 1% of the height of the viewport.

• vmin: vmin = the smaller of vh and vw.

[Link] 4/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

You can also use the calc() function to calculate a measurement at runtime. For example:

img {
max-height: calc(100vh - 5px);
max-width: calc(100vw - 5px);
}

In this case, the height and width of an image is set to a maximum of the browser window height and width, minus 5px. This
ensures you can always see the full image in your browser.

Implementing Text Effects

The core CSS typographic properties enable you to style text by setting the letter-spacing, line-height, text-align, text-
decoration, and text-transform properties. However, the CSS3 Text module defines several more properties that provide even
greater control over the layout of your text content. These properties include:

• The text-indent property, which indicates how far the first line of each new text block should be indented.

text-indent: 3rem;

• The hyphens property, which indicates how the browser should hyphenate words when line-wrapping. Possible values are
none (no hyphenating), manual (use the ­ sequence in your text to indicate where hyphens can be placed), and auto.

hyphens: manual;
-ms-hyphens : manual; // IE10

• The word-wrap property, which indicates whether the browser may break lines within words when line-wrapping. Possible
values are normal (the default is no), and break-word (the browser may break words at an arbitrary point). It has been renamed
overflow-wrap in CSS3, but at this time browsers only recognize the old name.

word-wrap : normal;

[Link] 5/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

• The word-spacing property, which enables you to set the spacing between words in a block of text. You can use both relative
and absolute measurements.

word-spacing : 5px;
word-spacing : 2rem;

• The text-shadow property, which enables you to apply shadowing to the selected text. A shadow is defined by four properties:

o x-offset: How far to the right the shadow starts. Use a negative value to move it to the left.

o y-offset: How far below the shadow starts. Use a negative value to move it up.

o blur (optional): How wide the blur of the shadow is. The default is 0.

o color: Can be any color value. The default is black.

text-shadow: 0 1px 0 #000; // not supported in Internet Explorer 9 and earlier

versions.

Reference Links: You can find the current draft of the CSS3 Text Module at [Link]
LinkID=267726.

Lesson 2: Styling Block Elements

The CSS box model defines how browsers handle every block of content on a page, and it is the basis of every CSS layout. In this
lesson, you will learn about the additions in CSS3 to the core box model, and you will see a new way to navigate between blocks
on screen. You will also look in more depth at the different ways to lay out blocks on a page, including the new CSS3 Flexbox
method.

Lesson Objectives
After completing this lesson, you will be able to

• Describe the new CSS3 properties applicable to the box model.

• Describe how to use these properties to lay out the items on a web page.

New Block Properties in CSS3

[Link] 6/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

The basic box model has not been changed in CSS3, but it does add several properties that modify the way in which boxes and
their contents are presented and accessed.

Outlines

CSS defines an outline box in addition to the four concentric boxes (content, padding, border, and margin) that make up the box
model. However, an outline does not add to the total width or height of the box. Instead, it is drawn above the margin box, and
defined relative to the box's border. Outlines can therefore overlap on a page.

The following example shows how to draw a border and an outline around a box. The outline is drawn 5px away from the border.

Adding an Outline

div {
border: 2px solid red;
outline: 2px solid green;
outline-offset: 5px;
}
/* The above code can also be written in full as */
div {
border-width: 2px;
border-style: solid;
border-color: red;
outline-width: 2px;
outline-style: solid;
outline-color: green;
outline-offset: 5px;
}

Outlines are defined by four properties:

• outline-width sets the width of the outline. Possible values are thin, medium (the default), and thick, or a specific
measurement such as 2px or 1.5 rem.

• outline-style sets the line style of the outline. The most common values used are none, dotted, dashed, and solid.

[Link] 7/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

• outline-color sets the color of the outline. Set it to any allowable color value, or invert (the default).

• outline-offset sets the distance between the outline and the border.

You can use outline as a shorthand property for the outline-width, outline-style, and outline-color properties, in that order. The
outline-offset property is new in CSS3 and must be declared separately, as shown in the previous example.

Presentation
There are several new design-related box properties in CSS3.

• The border-radius property enables you to set rounded corners on a box's border by defining the radius of the circle or radii of
an ellipse around which the corner will bend.

border-radius: 2em; // circular corners with radius 2em

border-radius: 5px/10px; // elliptical corners with radii of 5px high and 10px wide

Note that border-radius is a shorthand property. You can set the radius of each of the four border corners individually by using
the border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius properties.

• The overflow-x and overflow-y properties enable you to set what happens when the content of an element is too wide or too
high for the box that contains it. Possible values are:

o visible: The content is not clipped and is rendered outside of the box. This is the default.

o hidden: Only the content within the box is shown.

o scroll: Only the content within the box is shown, but a scrollbar is displayed so the rest of the content can be viewed.

These are the same values as for the overflow property, which applies to both x- and y-axes.

overflow-x: hidden;
overflow-y: scroll;

• The resize property enables you to mark a text block as resizable, assuming that the overflow property has already been set to
hidden or scroll. Possible values are none (the default), both, horizontal, and vertical, denoting in which axes the element
should be resizable.

overflow: hidden;
resize: horizontal;
min-width: 60px;
max-width: 400px;

[Link] 8/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

Note: It's a good idea to set a minimum and maximum height for a block marked as resizable so that the user
doesn't break the page layout completely by changing the size of the browser window.

Multiple Column Layout

The CSS3 Multi-Column module extends the CSS box model by adding properties to set the number of columns a box's content
will be displayed in, as well as their width, padding (gap), and border (rule).

The following example shows how to style section elements to use a three-column layout with a 5rem gap between columns and
a dotted line between each column.

Creating a Basic Cross-Browser Layout

section {
text-align: justify;
column-count : 3;
column-gap : 5rem;
column-rule : 1px solid black;
}

There are four main properties for creating multiple column layouts:

• column-count sets the number of columns to be used.

• column-width sets the width of the columns.

• column-gap sets the padding between the column.

• column-rule sets the properties of the line drawn between columns.

Support for multiple-column layouts is limited at present, although it is available in Internet Explorer 10.

Reference Links: You can find the latest draft of the CSS3 Multi-Column Layout Module at
[Link]

Block Layout Models

[Link] 9/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

CSS enables you to define the layouts and the types of boxes that you can display on a web page. The CSS display property
determines the type of layout model used on a page. This property can have the following values:

• block: Block boxes are formatted down the page one after another and respect padding, border, and margin values.

display:block;

• inline: Inline layout blocks are formatted one after another based on the baseline of their text content until they break down
onto another line, and so on. Inline blocks ignore height and width values.

display:inline;

• inline-block: Inline-block layout blocks are formatted one after another based on the baseline of their text content, but they
keep their height and width values.

display:inline-block;

• table: Table layout enables you to identify blocks on the page as tables, rows, columns, and cells. Blocks are aligned by their
edges rather than their content, and sized to fit the computed table.

display:table;

• flexbox: Flexbox layout is new in CSS3 and designed to be far more fluid than the others. You choose in which direction boxes
are laid out and how boxes are sized, depending on how any excess whitespace around blocks should be handled.

display: flexbox; // for a block-level flexbox container

display: -ms-flexbox;
display: inline-flexbox; // for an inline flexbox container
display: -ms-inline-flexbox;

Note: Note that the display values for enabling flexbox layout were correct when written; the values may change

[Link] 10/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3
before the CSS3 Flexbox Module is finalized.

All of these layout models (possibly with the exception of flexbox, depending on the final implementation) assume that blocks
are arranged according to the normal flow of elements. For example, with the code below, the normal flow of elements would
position div1 on the page first then div2 next to it, div3 next to div2, and div4 next to div3, and all four div elements would be
placed inside the article element:

<article>
<div id="1">One</div>
<div id="2">Two</div>
<div id="3">Three</div>
<div id="4">Four</div>
</article>

These blocks all have the default CSS position value of static. You can take any of these blocks out of the normal flow by
changing their position property to relative, absolute, or fixed.

If you set position to relative, you can use the top, right, bottom, and left properties to position the block relative to the
position it would have been in. All other blocks stay in the same position they would have been in, as if the block was statically
rather than relatively positioned.

position: relative;
top: -10px; // Top edge of block moved up 10 pixels from normal
left: 10px; // Left edge of block moved right 10 pixels from normal

If you set position to absolute, the block is taken completely out of the normal flow and positioned relative to the edges of its
containing block. In the following styling, if div2 were absolutely positioned, div3 would be positioned next to div1 in the normal
flow.

position: absolute;
top: 25px; // Top edge of block 25 pixels down from top edge of container
right: 10px; // Right edge of block 10 pixels left from right edge of container

If you set position to fixed, the block is out of the normal flow and positioned relative to the edge of the browser window
(technically, the viewport).

position: fixed;
bottom: 0; // Bottom edge of block in line with bottom edge of browser window
right: 0; // Right edge of block in line with right edge of browser window

[Link] 11/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

Demonstration: Switching Between CSS Layout Models

In this demonstration, you will see how the different CSS layout modes and positioning values affect four simple boxes. You will
use the F12 Developer Tools to make the changes between modes.

Demonstration Steps
Switch between layout modes in a web page

1. On the Windows 8 Start screen, click the Visual Studio 2012 tile.

2. In Visual Studio, on the File menu, point to Open, and then click File.

3. In the Open File dialog, browse to the E:\Mod06\Democode folder, click [Link], and then click Open.

4. Review the code with the students. This file contains an HTML article with four div elements. The file also contains styles for
the article and div elements.

<!DOCTYPE html>
<html xmlns="[Link]
<head>
<title>Positioning Demo</title>
<style type="text/css">
body {
text-align: center;
}
article {
padding: 10px;
border: 2px solid red;
}
div {
margin: 10px;
padding: 5px;
border: 2px solid black;
width: 150px;
height : 150px;
}
div:nth-child(odd) {
font-size: 4rem;
}
</style>
</head>
<body>
<article>
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
</article>
</body>

[Link] 12/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

</html>

5. On the File menu, click View in Brower (Internet Explorer).

6. In Internet Explorer, if the message Intranet settings are turned off by default appears, click Don’t show this message
again.

7. Observe the four div elements laid out underneath each other, in order, within the article element. The article element has a
red border to highlight its boundaries. This is block layout mode.

The web page looks like this:

FIGURE 6.1:THE DIV ELEMENTS IN BLOCK LAYOUT MODE

8. Press F12.

9. In the F12 Developer Tools pane, press Ctrl+P to unpin the window. Position the F12 Developer Tools window so that you
can see the Internet Explorer window at the same time.

10. Click the CSS tab to display the fully expanded version of the layout rules applied to the HTML content.

11. Right-click the div entry, and then click Add attribute.

12. Type display: inline, and then press ENTER.

13. In Internet Explorer, notice that the four div elements are now laid out side-by-side aligned by text baseline with height and
width properties ignored. This is inline layout mode.

The web page now looks like this:

[Link] 13/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

FIGURE 6.2:THE DIV ELEMENTS IN INLINE LAYOUT MODE

14. Resize the browser window to make it narrower, so you can see how blocks are wrapped onto the next line in inline layout
mode.

15. In the F12 Developer Tools window, on the CSS tab, click the display: inline rule, change it to read display:inline-block, and
then press ENTER.

16. Notice the layout is the same but the height and width properties are now preserved. This is inline-block mode.

Note: If necessary, make the browser window wider so that blocks One and Three are on the same line.

The web page now looks like this:

FIGURE 6.3:THE DIV ELEMENTS IN INLINE-BLOCK LAYOUT MODE

1. In Internet Explorer, resize the browser window so you can see how blocks are wrapped onto the next line in inline layout
mode.

2. In the F12 Developer Tools window, on the CSS tab, click the display: inline-block rule. Change this rule to display:-ms-
flexbox, and then press ENTER.

3. Switch to Internet Explorer to view the new layout. The div elements are displayed in a vertical column.

4. In the F12 Developer Tools window, on the CSS tab, click the display: -ms-flexbox rule, change it to display:table-cell, and
then press ENTER.

[Link] 14/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

5. Switch to Internet Explorer to view the new layout. The div elements are displayed in a horizontal table.

Switch between positioning modes in a web page

1. In the F12 Developer Tools window, on the CSS tab, clear the three checkboxes next to the display attributes for body,
article, and div.

2. Right-click the div entry, and then click Add rule after.

3. Type #three and then press Tab.

Note: This action creates a new rule for the <div> element with the id property set to three. This is the <div>
containing the text Three.

4. Type position: relative and then press ENTER.

5. Right-click the #three entry, and then click Add attribute.

6. Type top: 2em, and then press ENTER.

7. Right-click the #three entry, and then click Add attribute.

8. Type left: 2em, and then press ENTER.

9. In Internet Explorer, notice how the three box is positioned relative to its normal position.

10. In the F12 Developer Tools window, on the CSS tab, click the position:relative rule for the #three selector, change it to
position:absolute, and then press ENTER.

11. In Internet Explorer, notice how the three box is now positioned relative to its containing article block.

12. In the F12 Developer Tools window, on the CSS tab, on the CSS tab, click the position:absolute rule for the #three selectore,
change it to position:fixed, and then press ENTER.

13. In Internet Explorer, notice how the three box is positioned relative to the browser window. Make the window small enough
to require scrolling and see how the three box remains stationary when you scroll (it does not scroll into view).

14. Close Internet Explorer, and then close Visual Studio 2012.

Lesson 3: Pseudo-Classes and Pseudo-Elements

You use CSS selectors to specify sets of elements to be styled based on element, class, id, and attribute. You can refine the set of
elements to style in a CSS rule by concatenating them. In this lesson, you will learn how you can extend selectors to include
runtime and navigation information by using pseudo-classes and pseudo-elements in selectors.

Lesson Objectives
After completing this lesson, you will be able to:

• Use pseudo-elements to add styles to text elements.

[Link] 15/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

• Style hyperlinks and form elements based on their current state.

• Identify elements to style based on their position in a document.

Text Pseudo-Elements

Text-based pseudo-elements match elements that are not easily identifiable in the document tree for a page. The following list
describes some of the more commonly used pseudo-elements. Notice that in a CSS rule you use a double colon to concatenate
them to a text item.

• first-letter selects the first character of the first line of text content of an element.

p::first-letter{ }

• first-line selects the first line of text content of an element.

p::first-line{ }

• before selects the space immediately before an element.

p::before{ }

• after selects the space immediately after an element.

p::after{ }

• selection selects the part of the page that has been highlighted by the user.

::selection{ }

[Link] 16/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

You might use the first-letter and first-line pseudo-elements for styling text illuminations such as a drop-cap or a larger font for
the start of a paragraph. The selection pseudo-element is useful for changing how content is highlighted on screen. The before
and after pseudo-elements have several common uses. The most frequent is to add or remove content around an element. For
example, reset stylesheets often normalize how browsers deal with q and blockquote elements by removing any smart quotes
they might add around them.

blockquote::before, blockquote::after,
q::before, q::after {
content:'';
content:none;
}

Note that before and after are only applicable to elements that contain text content.

Note: In CSS1 and CSS2, pseudo-elements start with a colon (:). In CSS3, pseudo-elements start with a double colon (::)
to differentiate them from pseudo-classes. However most browsers still use single colons. Internet Explorer 10
recognizes single and double colons.

Link and Form Pseudo-Classes

Pseudo-classes are like pseudo-elements in that they match elements that are not part of the document tree. However, the
pseudo-classes are not text elements; rather, they match against the result of user interaction with the page. In CSS rules you
concatenate them to elements by using a single colon.

There are five pseudo-classes for hyperlinks:

• a:link selects all unvisited links.

• a:visited selects all visited links.

• a:focus selects all links in focus.

• a:hover selects all links with the cursor hovering over them.

• a:active selects all selected links.

[Link] 17/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

If you define CSS rules that match against more than one of these pseudo-classes, it is important that you specify these pseudo-
classes in the following order: link, visited, focus, hover, and active. If you reference them in a different order, some may cancel
others out. Also, a simple selector can only contain more than one pseudo-class if the pseudo-classes aren’t mutually exclusive.
For example, the selectors a:link:hover and a:visited:hover are valid, but a:link:visited isn’t because :link and :visited are
mutually exclusive. A link element is either an unvisited link or a visited link.

Note: There are several mnemonics for remembering the correct order (LVFHA) for link pseudo-classes. One is Las
Vegas fights Hell's Angels. Another is Let Victoria Free Her Armies.

There are three pseudo-classes that you frequently use for forms elements:

• input:enabled selects all enabled input controls.

• input:disabled selects all user interface elements that are disabled.

• input:checked selects all user interface elements that are checked.

Note: Forms elements also provide the :valid and :invalid pseudo-classes that you can use to select items that have
been validated successfully or unsuccessfully. This subject was covered in module 4.

DOM-Related Pseudo-Classes

In addition to link and form-related pseudo-classes, other pseudo-classes are available that enable you to identify specific
elements in a selected set based on their position in the DOM. For example:

• :first-child selects the item that's the first child of its parent. As an example, to find the first element in a list, use li:first-child.

• :last-child selects the list item that's the last child of its parent.

• :only-child selects a list item if it is the only child of its parent.

• :nth-child(n) selects a list item if it is the nth child of its parent.

• :nth-last-child(n) selects a list item if it is the nth child of its parent, counting backwards from its last child.

[Link] 18/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

Another set enables you to select elements based on their position in the DOM and their type. For example:

• :first-of-type selects a list item if it is the first list item child of its parent.

• :last-of-type selects a list item if it is the last list item child of its parent.

• :only-of type selects a list item if it is the only list item child of its parent.

• :nth-of-type(n) selects a list item if it is the nth list item child of its parent.

• :nth-last-of-type(n) selects a list item if it is the nth list item child of its parent, counting backwards from its last child.

Note that the numerical argument for nth-child, nth-last-child, nth-of-type, and nth-last-of-type can be set as a simple integer,
the values odd and even, or a simple formula of the form xn + y where x and y are integers.

A set of structural pseudo-classes is also available. These classes enable you to select elements based on the current structure of
the document. These classes include:

• E:root selects a document's root element. For an HTML document, it will always select the <html> element.

• E:empty selects an element of type E if it has no children or text content.

• E:target selects an element of type E if it is the target of a referring URL.

• E:not(s) selects any element which does not match the selector strings.

Note: Remember: Pseudo-classes qualify the element they are attached to rather than specifying other elements. For
example, li:first-child selects a list item that's the first child of its parent, and not the first child of the list item.

Lesson 4: Enhancing Graphical Effects by Using CSS3

The web is a far more colorful place now that most modern browsers have adopted CSS3. Previously, developers would need to
use additional graphics to add background gradients or resort to various items of trickery to rotate and transform graphics
elements. Many of these tricks were browser dependent, resulting in a poor experience for users running browsers for which the
features were not designed.

The new color and background values, and the graphics capabilities provided by CSS3, now enable developers to perform these
tasks in a standardized way that will work in any compliant browser. In this lesson, you will look at the new color values you can
give to properties, and how you can incorporate multi-image backgrounds into a web page. You will also see how to perform
simple transformations on an element and how to create simple shapes by using CSS.

Lesson Objectives
After completing this lesson, you will be able to:

• Explain how to use the new CSS3 color value sets.

• Use CSS3 to provide gradients and multi-image backgrounds.

[Link] 19/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

• Combine CSS3 properties to create shapes, and use simple transforms to manipulate elements on the page.

Specifying Color Values

You use the CSS color property to modify the color of text content. CSS3 extends this functionality by enabling you to apply color
backgrounds, borders, outlines, column rules, and more. It is important to be aware of the many different ways of specifying
color values and how CSS3 implements transparency.

The CSS3 Color module defines several value ranges for the color property:

• Any of the 147 color keywords defined in the module. For example, red or green.

color: yellow;

• A red-green-blue (RGB) model value specified in three- or six-digit hexadecimal notation, a triplet of integers, or a triplet of
percentage values. Each of the three values represents the amount of red, green, and blue is included in the color, with values
for each between 0 and 255 (0 to 100%).

color: #ff0; /* #rgb */

color: #ffff00; /* #rrggbb */
color: rgb(255, 255, 0);
color: rgb(100%, 100%, 0%);

• A red-green-blue-alpha (RGBA) model value specified as either a triplet of integers, or a triplet of percentage values plus an
opacity value of between 0 and 1 where 0 is completely transparent and 1 is completely solid (opaque).

color: rgba(255, 255, 0, 0.2); /* mostly transparent yellow */

color: rgba(100%, 100%, 0%, 0.8); /* mostly opaque yellow */

• The keyword transparent, which is the same value as rgba(0,0,0,0).

color: transparent;

[Link] 20/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

• A hue-saturation-lightness (HSL) model value specified as a triplet of numbers. The first is an integer value between 0 and 360
indicating the angle of the color circle (0 = red, 120 = green, 240 = blue). The second is a percentage value for saturation where
0% is a shade of grey and 100% is full color. The third is also a percentage value for lightness, where 0% is black, 100% is white
and 50% is normal.

color: hsl(60, 100%, 50%);

• A hue-saturation-lightness-alpha (HSLA) model value specified as a quadruplet of numbers. The first three are those of the
HSL model and the fourth is the same opacity value of between 0 and 1 as in the RGBA model.

color: hsla(60, 100%, 50%, 0.2); /* mostly transparent yellow */

• The keyword inherit. This indicates that the element should inherit the same color value as its parent element.

• The keyword currentColor. This indicates the same value should be used as that of the element's color property. Writing
color:currentColor is the same as writing color:inherit.

Additional Reading: For a complete list of valid color names and a more in-depth description of the HSL model,
read the current CSS3 Color Module Specification at [Link]

Defining Backgrounds and Effects

CSS enables you to set a variety of background properties on many elements. A number of properties are available that enable
you to specify a color for the background or for an image, along with how that image is repeated (this was described in module
2). In CSS3, there are two significant additions to these possibilities.

Multi-Image Backgrounds
CSS3-compliant browsers support the use of multiple background images within an element. Consequently, every background
image-related property in CSS3 now takes a comma-separated list of values rather than just one, as shown in the following
example:

[Link] 21/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

article {
background-image: url('[Link]'), url('[Link]');
background-repeat: repeat-x, repeat-y;
}

In this rule, [Link] will be repeated left to right along the top edge of the article element and [Link] will be
repeated top to bottom along the left edge of the article element. The image declared first in the list appears on top of the
others, so [Link] appears above [Link] in the top left corner of the article element.

The following image shows this effect applied to the About page in the ContosoConf web application:

FIGURE 6.4:THE ABOUT PAGE STYLED WITH A REPEATED MULTI-IMAGE BACKGROUND

You can use the background-position to move each image around the other to achieve a specific effect.

Note that the background shorthand property also supports multiple images. The previous rule could also be written like this:

article {
background: url('[Link]') repeat-x, url('[Link]') repeat-y;
}

Gradients
CSS3 enables you to define a color gradient as a value for any property that would take an image. Most obviously, this would
apply to backgrounds. You can set two types of gradient:

• A linear gradient, which is a gradual change in color from the start color to the stop color. By default, the start color is
displayed at the top of the background and the end color at the bottom, although the direction of the gradient may be
changed.

[Link] 22/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

background: linear-gradient(direction, start-color, [mid-color-list,] end-color);

The direction parameter is optional and is set in degrees; the default is 180deg. The start-color and end-color parameters can be
set to any of the color values listed in the previous topic. You can also set any number of intermediate colors between the start
and end, which the browser will space out evenly over the gradient line. The following CSS rule sets the background of the HTML
page by using a linear gradient. Note that Internet Explorer uses the –ms prefix for the linear-gradient function.

html {
background: -ms-linear-gradient(30deg, lightblue, green, yellow);
}

The following image shows this effect applied to the About page of the ContosoConf web application.

FIGURE 6.5:THE ABOUT PAGE STYLED WITH A LINEAR-GRADIENT BACKGROUND

• A radial gradient, which is a gradual change in color from a central point in the start-color outwards in either a circle or an
elliptical shape to the end color at the edge of the shape. Any number of intermediate colors can be set in the list.

background: radial-gradient(position, shape, start-color, [mid-color-list,] end-color);

The position parameter is optional. Its default value is center. The shape parameter is also optional. Its default value is circle; the
only other option is ellipse.

html {

[Link] 23/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

background: -ms-radial-gradient(top right, ellipse, red, blue);

}

Note that most modern browsers, with the exception of Internet Explorer 9 and earlier versions, support gradients, but only with
vendor-prefixes attached.

Implementing Transformations and Graphics

In addition to generating graphics by using gradients, CSS3 also enables you to apply graphical transformations such as rotation
and skew to any element. By transforming stacked and adjacent color blocks, you can draw a number of shapes simply by using
CSS.

Transforming Elements by Using CSS3

The CSS3 transform property can be applied to any block-level element. You set its value to either one of the following
transformation functions, or to none to indicate no transform should be applied:

• translate3d(x,y,z) : Moves the whole element by the distance x along the x-axis, y along the y-axis, and z along the z-axis. The
values for x, y, and z can be any valid unit of measurement.

transform: translate3d(10px, 50px, 10px);

• translate(x,y) : 2d variant of translate3d().

• translateX(x), translate(y), translateZ(z) : Single axis variants of translate3d().

• scale3d(x,y,z) : Scales the element's size by a factor x along the x-axis, y along the y-axis, and z along the z-axis. The values for
x, y, and z must be positive numbers (use a decimal value less than 1 to shrink an element in a given dimension).

transform: scale3d(2, 4, 0.5);

• scale(x,y) : 2d variant of scale3d().

• scaleX(x), scaleY(y), scaleZ(z) : Single axis variants of scale3d().

• rotate3d(x,y,z,a) : Rotates an element in 3d by angle a around the point with co-ordinates (x,y,z). Angle a is a value in

[Link] 24/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

degrees.

• rotate(a) : Rotates an element in 2d by angle a around its center.

transform: rotate(30deg);

• skew(a,b) : Skews an element by angle a along the x-axis and angle b along the y-axis. a and b are values in degrees between 0
and 180.

• skewX(a), skewY(b) : Single axis-variants of skew().

transform: skew(15deg, 15deg);

Note that most modern browsers, with the exception of Internet Explorer 9 and earlier versions, support transforms, but only with
vendor-prefixes attached.

transform: rotate(30deg);
-ms-transform: rotate(30deg); // IE10

Additional Reading: For an in-depth discussion of 3D transforms in IE10, see [Link]

LinkID=267729.

Drawing Shapes by Using CSS3

One of the interesting results of combining height, width, and border values, the before and after pseudo-elements, and some
rotation transforms, are the number of shapes that you can generate simply by using CSS. For example, to draw a square or
rectangle, just combine the height and width properties with a background color:

HTML:
<div id='square'></div>
...
CSS:
#square {
width: 200px;
height: 200px;
background: blue;
}

You can draw shapes such as circles and ovals by using the border-radius property to add curves to a square.

HTML:
<div id='circle'></div>

[Link] 25/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

...
CSS:
#circle {
width: 200px;
height: 200px;
background: blue;
border-radius: 50%;
}

You can draw triangles like this:

HTML:
<div id='triangle-topleft'></div>
...
CSS:
#triangle-topleft {
width: 0;
height: 0;
border-top: 200px solid blue;
border-right: 200px solid transparent;
}

This HTML markup and styling draws the following shapes:

[Link] 26/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

FIGURE 6.6:SHAPES DRAWN BY USING CSS STYLES

Adding 2D transforms such as rotations and skews enables you to create stars, parallelograms, and many more complex shapes.

Demonstration: Styling Text and Block Elements by Using CSS3

In this demonstration, you will learn about the tasks that you will perform in the lab for this module.

Lab: Styling Text and Block Elements by Using CSS3

Scenario

The Contoso Conference web application needs to be visually appealing. A designer has produced mock-up designs of some of

[Link] 27/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

the pages that you have been asked to implement for the website.

You will be working on the Home and About pages. The HTML page structure has already been created. You will use CSS to style
various parts of the pages, to make them match the designs. Much of the CSS that you create, such as the navigation links bar,
will be reused by other pages.

Some aspects of the design are complicated and would have required images with previous versions of CSS. However, by using
CSS3, you will not need to create any images.

Objectives
After completing this lab, you will be able to:

1. Implement advanced styling for text elements by using CSS.

2. Style block elements by using CSS.

3. Create graphical elements by using CSS.

• Estimated Time: 60 minutes

• Virtual Machines: 20480B-SEA-DEV11, MSL-TMG1

• User Name: Student

• Password: Pa$$w0rd

Exercise 1: Styling the Navigation Bar

Scenario

In this exercise, you will style the navigation bar for the website.

You will use CSS to style the navigation bar to look similar to the following image:

FIGURE 6.7:THE NAVIGATION BAR

The HTML markup for the navigation bar is simply a collection of <a> elements. The links are arranged as horizontally stacked
blocks, which maximizes the click area. You will style the active page link with a linear gradient and red ribbon effect.

Finally, you will run the application, view the Home page, and verify that the navigation bar looks similar the above image.

Note: The layout of the Home page has also changed slightly. The images of the speakers and the sponsor's logos
have been laid out in a grid by using the Flexible Box Model display style.

[Link] 28/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

The main tasks for this exercise are as follows:

1. Review the HTML structure.

2. Style the navigation bar and links.

3. Create graphics by using pseudo elements.

4. Test the navigation bar.

Task 1: Review the HTML structure

1. Start the MSL-TMG1 virtual machine if it is not already running.

2. Start the 20480B-SEA-DEV11 virtual machine if it is not already running, and log on as Student with the password
Pa$$w0rd.

3. Start Visual Studio and open the [Link] solution from the E:\Mod06\Labfiles\Starter\Exercise 1 folder.

4. In the ContosoConf project, open the [Link] file.

Notice that the <head> has a link to the /styles/[Link] style sheet:

<link href="/styles/[Link]" rel="stylesheet" type="text/css" />

5. Find the <nav> element, at the start of the <body>.

Notice that the class of the <nav> element is page-nav, and that it contains a <div> element with the class container. Also
notice that the Home link has the class active because it is the active page:

<nav class="page-nav">
<div class="container">
<a href="/[Link]" class="active">Home</a>
...
</div>
</nav>

6. Run the application, view the Home page, and notice that the navigation links are currently unstyled.

The navigation bar looks like this:

FIGURE 6.8:THE UNSTYLED NAVIGATION BAR

7. Close Internet Explorer.

[Link] 29/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

Task 2: Style the navigation bar and links

1. Open the [Link] style sheet in the styles folder.

2. Add styles for the navigation bar as follows:

• Replace the comment /* TODO: [Link]-nav */ with a rule that styles nav elements that have the page-nav class ([Link]-
nav). Set the background color to #1d1d1d, set the line height to 6rem, and set the font size to 1.7rem.

• Replace the comment /* TODO: [Link]-nav .container */ with a rule that styles elements that have the container class inside
[Link]-nav elements ([Link]-nav .container). Style the container to use the Flexible Box Layout Model.

Reader Aid: Internet Explorer requires you to use -ms-flexbox; note the -ms-vendor prefix.

The navigation bar should look like this:

FIGURE 6.1:THE NAVIGATION BAR WITH INITIAL STYLING

3. Replace the comment /* TODO: [Link]-nav a */ with a style for the links for the navigation bar by using the [Link]-nav
a selector, as follows:

• Set the display style to block.

• Set the minimum width to 9rem.

• Set the top and bottom paddings to 0, and the left and right paddings to 1.8rem.

• Set the text alignment to center.

• Transform the text of all links to upper case.

• Set the link color to #c3c3c3.

• Add a 1px dotted border on the right of each link, using the color #3d3d3d.

• Add a small, black text shadow.

• Display the text for the links in uppercase.

The links in the navigation bar should look like this:

[Link] 30/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

FIGURE 6.2:THE NAVIGATION BAR WITH STYLED LINKS

4. Replace the comment /* TODO: [Link]-nav a:first-child */ with a CSS rule that displays a 1px dotted border with the color
#3d3d3d to the left of the first link in the navigation bar. (Use the first-child pseudo-element to select the first link).

5. Replace the comment /* TODO: [Link]-nav a:hover */ with a CSS rule that applies when a mouse hovers over a navigation
link. Make the text color #e4e4e4 and the background color black. (Use the hover pseudo-element).

6. Replace the comment /* TODO: [Link]-nav .active */ with a CSS rule for the active navigation link. Make the text color
white and the background a linear gradient from #c95656 to #8d0606.

7. Replace the comment /* TODO: [Link]-nav .active:hover */ with a CSS rule that overrides the text color when the mouse
hovers over the active link. Make the text white.

Task 3: Create graphics by using pseudo elements

1. Replace the comments /* TODO: [Link]-nav active:before */ and /* TODO: [Link]-nav active:after */ with two CSS
rules, using the :before and :after pseudo elements that generate triangle shapes below the active link, to simulate a ribbon
effect.

o Set the display property to block.

o You may need to experiment with the position, top, height, width, border-top, border-left, border-right, and
margin-left properties until you achieve the correct effect.

o Set the color of the triangles to #8d0606

The following example CSS generates a black triangle:

.example:after {
content: "";
border-top: 100px solid #000;
border-left: 100px solid transparent;
display: block;
position: absolute;
}

The navigation bar should look like this:

[Link] 31/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

FIGURE 6.3:THE FULLY STYLED NAVIGATION BAR

Task 4: Test the navigation bar

1. Run the application, view the [Link] page and verify that the navigation bar looks similar to the image shown in the
previous task.

2. Use the navigation bar to move between pages (for example, move to the About page), and verify that the style of the active
item in the navigation bar is displayed by using the ribbon effect.

3. Close Internet Explorer.

Results: After completing this exercise, you will have styled the navigation bar to match the design mockup.

Exercise 2: Styling the Register Link

Scenario

In this exercise, you will style the large Register link that appears in the header of the Home page. This link is unstyled, but you
have been asked to make it stand out so that users will notice it.

A designer has provided the following image showing how the Register link should appear:

FIGURE 6.4:THE REGISTER LINK IN THE HEADER OF THE HOME PAGE

You will use a style to set the position of the Register link. You will modify the appearance of the text for the link, add a
background gradient, rotate the link, and add the circular dotted border. Finally, you will run the application, view the Home
page, and verify that the Register link is similar to that envisioned by the designer.

The main tasks for this exercise are as follows:

1. Review the HTML and CSS.

2. Position the Register link and set the text styling.

3. Style the Register link background, shape, and rotation properties.

4. Test the Register link.

Task 1: Review the HTML and CSS

[Link] 32/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

1. Open the [Link] solution in the E:\Mod06\Labfiles\Starter\Exercise 2 folder.

2. In the ContosoConf project, open the [Link] file.

3. Notice that the <head> element contains a link to the [Link] style sheet in the styles folder:

<link href="/styles/[Link]" rel="stylesheet" type="text/css" />

4. Find the <header> element and review the contents. Notice that the header contains the HTML markup for the Register
link. Also notice that the class of the header is page-header and that the class of the Register link is register:

<header class="page-header">
<div class="container">
<h1>ContosoConf</h1>
<p class="tag-line">A two-track conference on the latest HTML5
developments</p>
<a class="register" href="/[Link]">
Register<br />
<span class="free">&#183; Free &#183;</span>
</a>
</div>
</header>

5. Run the application, view the [Link] page, and verify that the header’s Register link is not styled.

6. Close Internet Explorer.

Task 2: Position the Register link and set the text styling

1. Open the [Link] file in the styles folder.

2. Find the currently empty CSS rule for the register class of the page header after the comment /* TODO: [Link]-header
.register */. In this rule, implement the following styling:

• Use the block layout model for the Register link and give it a height of 10rem and a width of 16rem. Set the right
property to 3.5rem, the top property to 2rem, and the padding-top property to 6rem.

• Position the Register link near the top-right of its container.

3. Modify the [Link]-header .register rule to set the font-size, text-alignment, text-decoration, and text-
transformation properties for the Register link:

• Make the text appear in upper case with a font size of 2.7rem.

• Set the text color to white.

• Add a 1px black text shadow.

• Set the text alignment to center.

[Link] 33/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

• Do not apply any additional text decoration.

If you run the application at this point, the Register link will look like this in the page header:

FIGURE 6.5:THE REGISTER LINK

Task 3: Style the Register link background, shape, and rotation properties

1. The Register link is currently quite difficult to see. Modify the [Link]-header .register rule as follows:

o Add a linear gradient background to the Register link. Use the colors #a80000 and #740404 (use the –ms-linear-
gradient function to set the background property).

o Set the –ms-border-radius property to make the Register link circular.

o Rotate the Register link 6 degrees clockwise (use the –ms-transform property).

2. Implement the [Link]-header .register:hover CSS rule, to change the background linear gradient colors to #bc0101
and #8c0909 when the mouse hovers over the link.

o Set the background property by using the –ms-linear-gradient function.

3. Implement the [Link]-header .register:before CSS rule to create a 3px circular, dotted border around the Register
link. Specify the border color #740404.

o Set the –ms-border-radius property to create the circular effect.

o Make the border slightly wider and taller than the Register link (set the height and width properties to 16.8rem).

o Adjust the position of the border to center it on the link (adjust the top and right properties by - 0.7 rem).

Task 4: Test the Register link

1. Run the application and view the [Link] page:

The Register link should look like this:

[Link] 34/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

FIGURE 6.6:THE STYLED REGISTER LINK

2. Verify that the Register link changes color when the mouse hovers over it.

3. Close Internet Explorer.

Results: After completing this exercise, you will have styled the Register link in the header of the Home page.

Exercise 3: Styling the About Page

Scenario

In this exercise, you will style the About page. This page only contains text, but to make it look attractive you will use some
advanced typography styling.

First you will flow the text over three columns and add a "drop cap” style to the first letter. Then you will style a testimonial quote.
Finally, you will run the application, view the About page, and verify that it looks like the following image:

The About page should look like this when it is completed:

FIGURE 6.7:THE ABOUT PAGE

[Link] 35/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

The main tasks for this exercise are as follows:

1. Review the HTML and CSS.

2. Define text columns.

3. Add a drop cap at the start of the text.

4. Indent paragraphs.

5. Style the block quote.

6. Test the About page.

Task 1: Review the HTML and CSS

1. Open the [Link] solution in the E:\Mod06\Labfiles\Starter\Exercise 3 folder.

2. In the ContosoConf project, open the [Link] file.

3. In the <head> element notice there is a link to the [Link] style sheet in the /styles/pages folder:

<link href="/styles/pages/[Link]" rel="stylesheet" type="text/css" />

4. Review the <article class="container"> HTML markup. This article contains the text that is displayed in the body of the
About page. You will add styling to this markup:

<section class="page-section about">

<article class="container">
...
</article>
</section>

Task 2: Define text columns

1. Open the [Link] file in the styles/pages folder.

2. After the comment /* TODO: .about > article > section */, implement the .about > article > section CSS rule as follows:

• Flow the content over three columns.

• Add a gap of 5rem between the columns.

• Justify the text.

[Link] 36/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

Task 3: Add a drop cap at the start of the text

1. In [Link], after the comment /* TODO: Add drop cap styling */, add a CSS rule that makes the first letter of the first
paragraph larger as follows:

• Use the first-letter pseudo property to select the first letter of the text.

• Make the first letter three times bigger than the rest of the text (use the font-size property).

• Use the float property to make the rest of the text wrap around the first letter.

• Set the color property to #aaa

• Experiment with the margin and line-height properties until the layout of the text matches the following image:

The first paragraph of text should look like this:

FIGURE 6.8:THE FIRST PARAGRAPH ON THE ABOUT PAGE

Task 4: Indent paragraphs

1. In [Link], after the comment /* TODO: Indent paragraphs */, add a CSS rule that uses the text-indent property to indent
the first line of each paragraph by 3rem.

2. The first paragraph does not require indentation because it already has a drop cap effect; add a CSS rule specifically for the
first paragraph (use the .about p:first-child selector), which resets the indentation and margin.

Task 5: Style the block quote

1. In [Link], after the comment /* TODO: Blockquote */, add CSS rules that style blockquote elements to look like the
following image:

The quotes should look like this:

[Link] 37/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

FIGURE 6.9:A STYLED BLOCK QUOTE

• Use the selector .about blockquote to create a rule that sets the font-size (1.2em), padding (0 0 0 6rem), margin (0), style
(italic) and position (relative) properties.

• Add another rule that uses the a :before pseudo element to generate the large double quotation mark; use the sequence
'\201C' for the quotation mark, set the font size to 10rem, and the font family to serif. Set the position property to absolute
and experiment with values for the top and line-height properties ensure that the text appears with the appropriate spacing.

Task 6: Test the About page

1. Run the application and view the About page.

The About page should look like this:

FIGURE 6.10:THE ABOUT PAGE

[Link] 38/39
9/5/2014 Module 6: Styling HTML5 by Using CSS3

2. Close Internet Explorer.

Results: After completing this exercise, you will have styled the text on the About page.

Module Review and Takeaways

In this module, you have learned how to use the new features of CSS3 to provide advanced formatting for text, color, and
backgrounds. You have also seen how CSS pseudo-elements and pseudo-classes offer a very fine level of control when it comes
to selecting elements to style.

You have also learned how CSS3 offers alternative ways to position elements on a page that are in addition to the traditional box
model, and how to use CSS properties in combination to generate simple graphics.

Review Question(s)
Test Your Knowledge

Question

Which CSS rule can you use to download a font required by a web page?

Select the correct answer.

@font-family

@font-style

@font-face

@font

You cannot download fonts by using CSS.

Question: What are the main differences between the CSS box model, flex-box, and multi-column layout?

Question: How do you select the first item in a list so that you can apply styling to it?

[Link] 39/39