CHS Web Design Track

Getting Started with CSS: CSS Styles and Colors

<< Previous Lesson | Next Lesson >>

Session 2.2 Visual Overview:

CSS Typography

Contextual Selectors

Contextual selector
Specifies the context under which a particular page element is matched
  • Context is based on the hierarchical structure of a document, which involves the relationships between a parent element containing one or more child elements and within those child elements several levels of descendant elements
  • To match any element, a wildcard selector with the * character is used
Sibling selectors
are used to select elements based on elements that are adjacent to them in the document hierarchy
SelectorDescription
*Matches any element
elemMatches the element located anywhere in the document
elem1, elem2, ...Matches any of the elements ect.
parent descendantMatches the descendant element that is nested within the parent element at some level
parent > childMatches the child element that is a child of the parent element
elem1 + elem2Matches elem2 that is immediately preceded by the sibling element elem1
elem1 - elem2Matches elem2 that folows the sibling element elem1
Figure 2-13 Contextual selector patterns
To create style rule with a contextual selector:
  1. If you took a break after the previous session, make sure the tss_styles.css file is open in your editor.
  2. Within the Aside and Blockquote Styles section, insert the following style 
    aside blockquote {
color: rgb(232, 165, 116);
}
  3. Save your changes to the file and then reload the tss_home.html file in your browser. Verify that the text of the customer quotes appears in orange.
Figure 2-14 highlights the new style rule for the blockquote element.

Attribute Selectors

id
Identifies specific elements within the document
class
Identifies a group of elements that share a similar characteristic or property
SelectorSelectsExampleSelects
elem#id Element elem with the ID value id h1#introThe h1 heading with the id intro
#id Any element with the ID value id #introAny element with the id intro
elem.class All elem elements with the class attribute value class p.mainAll paragraphs belonging to the main class
.class All elements with the class value class .mainAll elements belonging to the main class
elem[att] all elem elements contaning the att attribute a[href]all hypertext elements contaning the href attribure
elem[alt="text"] all elem elements whos att attribure equals text a[href= "top,html"]all hypertext elements whos href attribute equals top.html
elem [att-="text"] All elem elements whose att attribute contains the word text a[rel-="glossary" ]All hypertext elements whose rel attribute contains the word glossary
elem [att|="text"] All elem elements whose att attribute value is a hyphen-separated list of words beginning with text p[id|="first"]All paragraphs whose id attribute starts with the word first in a hyphen-separated list of words
elem [att^="text"] All elem elements whose att attribute begins with text [CSS3] a[rel^="prev"]All hypertext elements whose rel attribute begins with prev
elem [att$="text"] All elem elements whose att attribute ends with text [CSS3] a[href$="org"]All hypertext elements whose href attribute ends with org
elem [att*="text"] All elem elements whose att attribute contains the value text [CSS3] a[href*=" faq" ]All hypertext elements whose href attribute contains the text string faq
To apply an id selector:
  1. Return to the tss_styles.css file in your editor.
  2. Change the selectors for the h1 and h2 elements in the Heading Styles section to article#about_tss h1 and article#about_tss h2 respectively.
  3. Save your changes to the file and then reload the tss_home.html file in your browser. Verify that the design of the h1 and h2 headings is only applied to the headings in the about_tss article but not to the other headings on the page.
Figure 2-16 highlights the revised selectors in the style sheet.
To apply a class selector:
  1. Use your editor to open the tss_run_txt.html, tss_bike_txt.html, and tss_swim_txt.html files from the html02 > tutorial folder. Enter your name and the date in the comment section of each file and save them as tss_run.html, tss_bike.html, and tss_swim.html respectively.
  2. Within each of the three files insert the following link elements before the closing </head> tag to link these files to the tss_layout.css and tss_styles.css files, respectively:
    <link href="tss_layout.css" rel="stylesheet" />
<link href="tss_styles.css" rel="stylesheet" />
  3. Take some time to study the content and structure of the files. Note that the article element has the class attribute with the value syllabus. Save your changes to the files.
  4. Return to the tss_style.css file in your editor.
  5. Within the Heading Styles section, add the following style rule to display the text of h1 and h2 headings in medium gray on a light purple background:
    article.syllabus h1, article.syllabus h2 {
background-color: rgb(255, 185, 255);
color: rgb(101, 101, 101);
}
  6. Save your changes to the style sheet and then open the tss_run.html file in your browser.
  7. Use the navigation links on the page to view the content and design of the cycling and the swimming pages, and then confirm that the h1 and h2 headings on these pages have similar formats.
Figure 2-17 highlights the new style rule in the file.
Figure 2-18 shows the appearance of the h1 and h2 headings on this page.

Working with Fonts

Typography
is the art of designing the appearance of characters and letters on a page

Choosing a Font

  • Text characters are based on fonts that define the style and appearance of each character in the alphabet
  • The general structure of defining font for any page element is font-family: fonts;where fonts is a comma-separated list, also known as a font stack
Specific font
Identified by name and based on a font definition file stored in a user’s computer or accessible on the web
Generic font
Describes the general appearance of the characters in the text but does not specify any particular font definition file
  • Supports the font groups serif, sans-serif, monospace, cursive, and fantasy
To specify a font family for the page body:
  1. Return to the tss_styles.css file in your editor.
  2. Add the following style to the style rule for the body element:font-family: Verdana, Geneva, sans-serif;
  3. Save your changes to the file and then reload the tss_home.html file in your browser.
  4. View the other three pages in the website to verify that the sans-serif font is also applied to the body text on those pages.
Figure 2-20 highlights the new style for the body element.
Figure 2-21 shows the revised appearance of the body text using the sans-serif font.

Exploring Web Fonts

FormatDescriptionBrowser
Embedded OpenType (EOT)A compact form of OpenType fonts designed for use as embedded fonts in style sheetsIE
TrueType (TTF)Font standard used on the Mac OS and Microsoft Windows operating systemsIE, Firefox, Chrome, Safari, Opera
OpenType (OTF)Font format built on the TrueType format developed by MicrosoftIE, Firefox, Chrome, Safari, Opera
Scalable Vector Graphics (SVG)Font format based on an XML vocabulary designed to describe resizable graphics and vector imagesChrome, Safari
Web Open Font Format (WOFF)The W3C recommendation font format based on OpenType and TrueType with compression and additional metadataIE, Firefox, Chrome, Safari, Opera

The @font-face Rule

To install and use a web font:
  1. Return to the tss_styles.css file in your editor.
  2. Directly after the @charset rule at the top of the file, insert the following 
    @font-face rule:
@font-face {
font-family: Quicksand;
src: url('Quicksand-Regular.woff') format('woff'),
url('Quicksand-Regular.ttf') format('truetype');
}
  3. At the top of the section for Heading Styles, insert the style rule:
    h1, h2 {
font-family: Quicksand, Verdana, Geneva, sans-serif;
}
  4. Save your changes to the file and reload the tss_home.html file in your browser.
Figure 2-23 highlights the code to create and use the Quicksand web font.
Figure 2-24 shows the revised appearance of the h1 and h2 headings using the Quicksand web font.

Setting the Font Size

Absolute units
Fixed in size regardless of the output device and are used only with printed media
Relative units
Expressed relative to the size of other objects within the web page or to the display properties of the device itself

Scaling Fonts with ems and rems

Using Viewport Units

Sizing Keywords

To set font sizes of the page elements:
  1. Return to the tss_styles.css file in your editor.
  2. Add the following style rules directly below the Heading Styles comment to define the font sizes for h1 and h2 headings throughout the website:
    h1 {
font-size: 2.2em;
}
h2 {
font-size: 1.5em;
}
  3. Go to the Aside and Blockquote Styles section and add the following style rule to set the default font size of text in the aside element to 0.8em:
    aside {
font-size: 0.8em;
}
  4. Go to the Navigation Styles section and add the following style rule to set the default font size of text in the navigation list to 0.8em:
     nav {
font-size: 0.8em;
}
  5. Save your changes to the file and then reload the tss_home.html file in your browser.
Figure 2-25 highlights the new font sizes for the website.
Figure 2-26 shows the revised font sizes of the headings, navigation list, and aside element.

Controlling Spacing and Indentation

Kerning
measures the amount of space between characters
tracking
measures the amount of space between words
Leading
measures the amount of space between lines of text
To set font sizes of the page elements:
  1. Return to the tss_styles.css file in your editor.
  2. In the Heading Styles section, insert the following style as part of the style rule for the h1, h2 selector:
    letter-spacing: 0.1em;
  3. Scroll down to the Navigation Styles section near the bottom of the file and insert the following style rule for the text of ul elements nested within the nav element:
    nav > ul {
line-height: 2em;
}
  4. Save your changes to the file and then reload the tss_home.html file in your browser. Verify that the space between letters in the h1 and h2 headings has been increased and the list of links is now double-spaced.
Figure 2-27 highlights the letter-spacing and line-height styles for the website.

Working with Font Styles

Aligning Text Horizontally and Vertically

ValueDescription
baseline Aligns the baseline of the element with the baseline of the parent element
bottom Aligns the bottom of the element with the bottom of the lowest element in the line
middle Aligns the middle of the element with the middle of the surrounding content in the line
sub Subscripts the element
super Superscripts the element
text-bottom Aligns the bottom of the element with the bottom of the text in the line
text-top Aligns the top of the element with the top of the text in the line
top Aligns the top of the element with the top of the tallest object in the line

Combining All Text Formatting in a Single Style

To apply the font property:
  1. Return to the tss_styles.css file in your editor.
  2. Go down to the Footer Styles section and add the following style rule:
    body > footer address {
background-color: rgb(222,128,60);
color: white;
color: rgba(255, 255, 255, 0.7);
font: normal small-caps bold 0.9em/3em
Quicksand, Verdana, Geneva, sans-serif;
text-align: center;
}
     Note that this style rule uses progressive enhancement by placing each color rule on its own line so that browsers that do not support semi-transparent colors will display the address text in white.
  3. Save your changes to the file and then reload the tss_home.html file in your browser.
Figure 2-29 highlights the style rule for the footer.
Figure 2-30 shows the revised appearance of the body footer.

Review Session 2.2 Quick Check

  1. Provide a selector to match all address elements that are direct children of the footer element.
  2. The initial h1 heading in a document has the ID top. Provide a style rule to display the text of this h1 heading in Century Gothic, Helvetica, or a sans-serif font.
  3. For the following style rules, what is the font size of the h1 heading in pixels?
    body {font-size: 16px;}
body> article {font-size: 0 . 75em;}
body> article> hl {font-size: 1.Sem; }
  4. Provide a style rule to set the size of body text to 2% of the viewport width.
  5. Provide a style rule to remove underlining from the hypertext links marked with the <a> tag and nested within a navigation list.
  6. Provide the @font-face rule to create a web font named Cantarell based on the font files cantarell.woff and cantarell.ttf.
  7. Provide a style rule to display all blockquote elements belonging to the Reviews class in italic and indented 3em.
  8. Provide a style rule to horizontally center all h1 through h6 headings and to display their text with normal weight.
<< Previous Lesson | Next Lesson >>