CHS Web Design Track

Getting Started with CSS: CSS Styles and Colors

<< Previous Lesson | Next Lesson >>

Objectives

  • Explore the history of CSS
  • Study different types of style sheets
  • Explore style precedence and inheritance
  • Apply color in CSS
  • Use contextual selectors
  • Work with attribute selectors
  • Apply text and font styles
  • Use a web font
  • Define list styles
  • Work with margins and padding space
  • Use pseudo-classes and pseudo-elements
  • Insert page content with CSS

Introducing CSS

Types of Style Sheets

Browser styles
or user agent styles Styles built into the browser
User-defined styles
Styles defined by a user based on the configuration setting of the user's browser
External styles
Styles created by a website author, placed within a CSS file, and linked to the page
Embedded styles
Styles added to the head of an HTML document
Inline styles
Styles added as element attributes within an HTML document and applied to only that particular element
To view the Tri and Succeed Sports home page:
  1. Use your editor to open the tss_home_txt.html file from the html02 > tutorial folder. Enter your name and the date in the comment section of the file and save the document as tss_home.html.
  2. Take some time to scroll through the document to become familiar with its content and structure.
  3. Open the tss_home.html page in your browser. Part of the appearance of the page is shown in Figure 2-2.
Trouble? Depending on your browser's style sheet, your page might not exactly resemble the one shown in Figure 2-2.
To change the layout of the TSS home page:
  1. Return to the tss_home.html file in your HTML editor and add the following link element to the head section directly after the title element: <link href="tss_layout.css" rel="stylesheet" />
  2. Save your changes to the file and then reopen the tss_home.html file in your browser.
Figure 2-3 highlights the newly added code in the document.
Figure 2-4 shows the appearance of the page using the layout styles defined in the tss_layout.css file.

Exploring Style Rules

  • The general syntax of a CSS style rule is
    selector{
    property1: value1;
    property2: value2;
    ...
    }
  • Browser extensions
    are an extended library of style properties in the browser
    Vendor prefix
    Indicates the browser vendor that created and supports the style property
Vendor PrefixRendering EngineBrowsers
-khtml-KHTMLKonqueror
-moz-MozillaFirefox, Camino
-ms-TridentInternet Explorer
-o-PrestoOpera, Nintendo Wii browser
-webkit-WebKitAndroid browser, Chrome, Safari

Embedded Style Sheets

Inline Styles

Style Specificity and Precedence

Style Inheritance

Browser Developer Tools

Accessing the Browser Developer Tools:
  1. Return to the tss_home.html file in your browser.
  2. Press F12 to open the developer tools window.
    Trouble? If pressing F12 doesn't open the developer tools, your browser might need a different keyboard combination. In Safari for the Macintosh, you can view the developer tools by pressing ctrl+shift+I or command+option+I.
  3. From the hierarchical list of elements in the web page, click the <body> tag if it is not already selected.
    Figure 2-6 shows the layout of panes using the developer tools under Google Chrome for the desktop.
    As shown in Figure 2-6, the styles pane lists the styles that have been applied to the body element. Note that the margin property from the browser style sheet has been crossed out, indicating that this browser style has been superseded by a style defined in the external style sheet.
    Trouble? Every browser has a different set of developer tools and configurations. Your tools might not resemble those shown in Figure 2-6.
  4. Take some time to explore the content and styles used in the other page elements by selecting the elements tags from the hierarchical list of elements.
  5. Press F12 again to close the developer tools window.
    Trouble? In Safari, you can
Figure 2-6 Developer tools in Google Chrome

Writing Style Comments

  1. Use your editor to open the tss_styles_txt.css file from the html02 > tutorial folder.
  2. Within the comment section at the top of the file, enter your name following the Author: comment and the date following the Date: comment.
  3. Save the file as tss_styles.css.
  4. Return to the tss_home.html file in your HTML editor and add the following link element directly before the closing </head> tag.
    <link href="tss_styles.css" rel="stylesheet" />
  5. Close the tss_home.html file, saving your changes.

Defining the Character Encoding

To indicate the character encoding:
  1. Return to the tss_styles.css file in your editor.
  2. Directly above the initial comment section, insert the line: @charset "utf-8";.
    Note that only one @charset rule should appear in a style sheet and it should always precede any other characters, including comments.
  3. Save your changes to the file.
Figure 2-7 highlights the new code in the style sheet.

Importing Style Sheets

Working with Color in CSS

Color values
Values in which the color is given by an exact numeric representation
RGB triplet
The intensity of primary colors expressed as a set of numbers in CSS rgb(red, green, blue)
Hexadecimal numbers
A number expressed in the base 16 numbering system

RGB Color Values

  • Based on classical color theory in which all colors are determined by adding three primary colors–red, green, and blue–at different levels of intensity
  • Adding all three primary colors at maximum intensity produces the color white
  • Adding any two of the three primary colors at maximum intensity produces the trio of complementary colors–yellow, magenta, and cyan
  • Format:
    rgb (red , green , blue)
    Where red , green, and blue are the intensities of the red, green, and blue components of the color
  • Intensities range from O (absence of color) to 255 (maximum intensity);
  • The color yellow could be represented either by the RGB triplet rgb{255 ,255,0}
  • Each component value can be entered as a percentage, with 100%
  • Specify the color orange with the following values rgb{100%, 65%, 0%}
Figure 2-8 Color addition in the RGB color model

HSL Color Values

Hue
Tint of a color, represented by a direction on a color wheel
Saturation
Measures the intensity of a color and ranges from 0% (no color) up to 100% (full color)
Lightness
Measures the brightness of a color and ranges from 0% (black) up to 100% (white)
Figure 2-9 Defining the color oragne under the HSL color model

Defining Semi–Opaque Colors

Opacity
Defines how solid a color appears

Setting Text and Background Color

Employing Progressive Enhancement

Progressive enhancement
A technique of placing the code conforming to elder standards before newer properties
To define background and text colors:
  1. Add the following code within the HTML and Body Styles section:
    html {
    background-color: hsl(27, 72%, 72%);
    }
    body {
    color: rgb(91, 91, 91);
    background-color: ivory;
    }
  2. Add the following style rules within the Heading Styles section:
    h1 {
    color: white;
    background-color: rgb(222, 128, 60);
    }
    h2 {
    color: white;
    background-color: rgb(235, 177, 131);
    }
  3. Save your changes to the file and then reload the tss_home.html file in your browser.
Figure 2-10 highlights the new style rules.
Figure 2-11 shows the appearance of the page under the new styles.
Session 2.1 Quick Check
  1. What are inline styles, embedded styles, and external style sheets? Which would you use to define a design for an entire web site?
  2. What keyword do you add to a style property to override style precedence and style inheritance?
  3. Provide the code to enter the style comment “Tri and Succeed Sports Color Styles”.
  4. Provide the style rule to display block quote text in red using an RGB triplet.
  5. The color chartreuse is located at 90° on the color wheel with 100% saturation and 50% lightness. Provide a style rule to display address text in black with chartreuse as the background color.
  6. What is progressive enhancement?
  7. Based on the following style rule for paragraph text, which style property will be used by an older browser that supports only CSS2?
    p {
    color: rgb(232, 12 1 , 50);
    color: hsla(23, 80%, 55%, o. 75) ;
    }
  8. Provide a style rule to display hl and h2 headings with a background color of yellow (an equal mixture of red and green at highest intensity with no blue) at 70% opacity .