2lesson 2: using cascading style sheets (css) …...2lesson 2: using cascading style sheets (css)...

2Lesson 2: Using Cascading Style Sheets (CSS) Technology Objectives By the end of this lesson, you will be able to:

2.1: Explain the function and purpose of the Cascading Style Sheets (CSS) technology.

2.2: Explain the importance of using style guides when designing sites and documents.

2.3: Define common CSS terms and syntax.

2.4: Apply CSS styles to format pages.

2.5: Develop and apply page layouts with CSS.

2.6: Use CSS to position content and apply document flow.

2.7: Define common CSS positioning schemes.

2.8: Use the CSS Box Model.

2-2 Advanced HTML5 and CSS3 Specialist

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

Pre-Assessment Questions 1. In CSS, what is the name for a selector, property and value all grouped together?

a. Declaration b. Tag c. Structure d. Rule

2. In a CSS style sheet, which of the following determines the image behind the contents of a page?

a. The background-image property b. The background attribute of the <body> tag c. The background-image selector in the <body> tag d. The img property

3. What is liquid layout?

Lesson 2: Using Cascading Style Sheets (CSS) Technology 2-3


Cascading Style Sheets (CSS) As a Web designer, you know that there is more to creating a good Web page than posting good written content and images. Most users have multiple sites to choose from when they are searching the Web for something, whether it is information, entertainment or products. If several reputable sites offer the same content and are easy to use, then which one will users prefer? Quite often, it will be the one that looks the best.

Cascading Style Sheets (CSS) is a Web design technology that enables developers to determine how the HTML elements in their Web pages will display, giving a page or entire site a particular "look and feel."

CSS instructions can be:

• Applied inline to individual HTML elements on an HTML page.

• Embedded within an HTML page to affect all specified elements on that page.

• Collected in an external file that is linked to multiple HTML pages.

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

Lesson 2: Using Cascading Style Sheets (CSS) Technology

External style sheets An external CSS file, or style sheet, is a text file that contains CSS formatting instructions to define the font, color and position of elements used on any markup page(s) to which you attach the style sheet.

CSS benefits include:

• Consistency — CSS easily gives an entire site a consistent look and feel.

• Easy change management — You have the ability to change the look and feel of an entire site by simply changing one part of a single line of code, rather than having to change possibly thousands of lines in hundreds of Web pages.

If all pages on your site are linked to the same external style sheet, then one simple change to the style sheet will change all associated elements across the site. For example, if you want to change your <h1> heading styles, you do not need to change every page manually. Simply change one line in a style sheet file attached to all your pages, and then all your <h1> headings will change their appearance to conform to the style sheet.

This technology can save a great deal of development and maintenance time, as well as provide a more consistent, accessible interface for your Web site.

Style Guides A style guide or style manual is a set of standards for the writing and/or design of documents, either for general use or for a specific publication, organization or field. Implementing a style guide provides uniformity in style and formatting within a document and across multiple documents.

OBJECTIVE 2.1: CSS technology

Cascading Style Sheets (CSS) A W3C language for applying structure and formatting instructions to HTML pages and other markup language documents.

NOTE: Have you experienced any benefits from using CSS in your past projects? How has CSS helped you? Do you think it is absolutely necessary? Are there situations when it is not necessary?

OBJECTIVE 2.2: Style guides

®



Style guides are common for general and specialized use, especially for those who write, edit and/or design documents in the following fields:

• Various academic disciplines (both students and scholars)

• Journalism

• Technology

• Medicine

• Law

• Government

• Business and industry

Some organizations follow a CSS style guide to define the CSS formatting to be used for all Web documents across the organization. It defines styles such as the page layout, font sizes, colors, and image placement for Web sites. Following a CSS style guide creates consistency in appearance for an organization's communications.

Many companies create their own CSS Style Guides and some even share them with other organizations (Figure 2-1). Google and WordPress make them available to the public:

• Google HTML/CSS Style Guide (http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml)

• WordPress CSS Coding Standards (http://make.wordpress.org/core/handbook/coding-standards/css/)

Figure 2-1: Google CSS style guide

Following are some examples of guidelines and tips from the Google HTML/CSS Style Guide:

• Be consistent — When editing existing code, for example, match the written code style (spacing, comment use, etc.). If code that you add to a file looks drastically different from the existing code around it, other users of the code can become distracted or even confused. The purpose of style guidelines is to provide a common vocabulary for coding. Global style rules are helpful in general, but local style (dictated by your organization) is also important.



• Capitalization — Use only lowercase letters for your code, including HTML element names, attributes, attribute values, CSS selectors, properties and property values.

• Declaration order — In a style sheet, alphabetize your declarations to create consistent code that is easy to remember, search and maintain. For example:

background: fuchsia; border: 1px solid; border-radius: 4px; color: black; text-align: center; text-indent: 2em;

CSS and HTML CSS was created to solve a problem with HTML. The developers of HTML intended it to identify only the content and structure of a document, such as <title> and <body>, not the style, look and feel of the content.

Before style sheets, the HTML standard introduced many style elements that quickly complicated the language. Developers had to check each page of a Web site to ensure it had the correct HTML style tags for each element. Imagine the time and difficultly involved with this task.

To save developers from many headaches, the W3C quickly went into action and standardized CSS, which greatly simplifies the definition and use of styles. Today a style, such as a background color or image, can be added to all Web pages with one change to an external CSS file.

CSS versions Currently, three standards exist for style sheets:

• Cascading Style Sheets (CSS1) — governs the basic structure of style sheets.

• Cascading Style Sheets 2 (CSS2) — adds more capabilities to the CSS1 specification, including the ability to support media types (such as specific printers) and work with tables.

• Cascading Style Sheets 3 (CSS3) — provides a modularized standard so that when changes must be made to a style, only a particular module within CSS3 will need to be updated, rather than the entire standard. This will allow for a more flexible and timely upgrade of the CSS standard as a whole. New functions are being added to CSS3 to enhance its support of borders, backgrounds, colors, text effects and so forth.

HTML5 adopts CSS as the preferred way to format a page. The CSS standard has evolved over the years and continues to build upon itself. For instance, HTML 4.01 and XHTML 1.0 used CSS1 and CSS2. HTML5 uses CSS1, CSS2 and CSS3. Any given Web page may include CSS rules from all three versions.

HTML5, CSS and legacy browsers Because CSS3 contains the latest instructions, most non-HTML5-compliant browsers cannot interpret it. Most of the basic Web page formatting uses CSS1 and CSS2. CSS3 provides advanced features to extend a Web page’s functionality beyond basic formatting.

HTML5 is not supported by Internet Explorer 8 or earlier. This is a challenge because Windows XP cannot run IE9, which is the first Internet Explorer version that supports

NOTE: Remember that HTML5, CSS3 and JavaScript are considered the future of Web development as mobile devices continue to proliferate.



HTML5. The simple solution is to install the latest version of the Chrome or Firefox browser on Windows XP or Vista systems.

But what about your site visitors? You cannot force them to install Chrome or Firefox. They may be using IE8, 7 or 6. The only way to support these older IE browsers is to add JavaScript code to your HTML documents and a new rule to CSS.

Because older IE browsers will not recognize the new HTML5 elements (such as <header>, <footer>, <article>, etc.), you must use JavaScript to create these elements in your Web pages so that older IE browsers will recognize them. This requires several steps, as follows.

HTML5 document additions for older IE browsers At a minimum, you should create the basic HTML5 structural elements by adding the following JavaScript in the <head> element:

<script> document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("nav"); </script>

CSS document additions for older IE browsers The new HTML5 structural elements must also become block-level elements in CSS for consistent styling. A block-level element is a large block of content, such as a paragraph or a structural element that starts a new line of text or a new section. The following CSS code can do this:

header, nav, article, footer { display: block; }

Script for enabling HTML5 elements for older IE browsers Now you must add each new HTML5 element to your document. This task can be long and laborious. One solution is to implement a script developed by Remy Sharp, available at http://remysharp.com/2009/01/07/html5-enabling-script.

Instructions for enabling the script are included at this site. Remy Sharp's code has been utilized by Google, MIT and nearly all Web developers across the globe. It is the de facto standard for supporting HTML5 in older IE browsers.

This technique of using JavaScript to force IE to acknowledge new HTML5 elements is sometimes called the HTML5 shiv.

CSS Terms and Syntax CSS allows you to change the style attributes of a Web site quickly and efficiently. The most important CSS terms to understand are:

• Selector.

• Property.

• Value.

• Declaration.

• Rule.

NOTE: You can try coding a page to support legacy browsers in Optional Lab 2-1: Supporting legacy browsers.

OBJECTIVE 2.3: CSS terms and syntax



This section will review some of the basic CSS concepts and code.

The following code from a CSS file illustrates the anatomy of these style sheet elements as they are found in linked, or external, style sheets.

body {background-color: #ADD8E6;}

Table 2-1 lists terms for the syntax examples in this CSS code.

Table 2-1: CSS syntax terms

Term CSS Syntax Example

Selector body

Opening curly brace {

Property background-color:

Value #ADD8E6;

Closing curly brace }

This CSS file entry creates a light blue background color for the Web document.

CSS selectors, properties and values To make such a change, you must first identify the HTML element to which you want to apply the style. Any element you want to affect with a CSS style is called a selector. In this example, the selector is the <body> element.

After you have chosen a selector, you can customize it by selecting a property and setting a value. By selecting a property, you will change the way the selector renders in the browser. For example, you could alter the selector's color, size, background, font family, font size and so forth. These changes will apply to all subsequent instances of the element you define as a selector.

Most CSS values do not require quotation marks. Some do require them, such as a font name that contains whitespace. Also, CSS syntax should be written in lowercase. Although this is best practice, CSS is case-insensitive except for class and id names.

A property must then have a value. For example, if you want to change a selector's size property, you must set a value to specify that size. Or you could decide to change the background color of your pages to teal, and so forth.

CSS declarations and rules The following example shows a CSS declaration, which consists of a property and a value. A declaration must always end with a semicolon.

background-color: #008080;

The name for a selector, property and value all grouped together is called a rule. The following rule will change the background color of the page's body to teal, then set the font color to white:

body {background-color: #008080; color: #FFFFFF;}

NOTE: Be sure you do not confuse CSS terms, syntax and declaration with HTML code. Although used together, CSS and HTML are separate technologies.

CSS selector In a style sheet, any HTML element to which designated styles are applied.

NOTE: Selectors are most easily used with standard elements. They can also be applied based on basic patterns. For example, you can declare a selector that will apply to paragraphs <p> that fall within tables. Or you can group selectors to apply the same styling information to multiple elements with a single declaration.

CSS declaration In a style sheet, a property and a value applied to format a specified HTML element (selector). A declaration combined with a selector is a CSS rule.

CSS rule In a style sheet, a format instruction that consists of a specified selector and the properties and values applied to it.



Table 2-2 compares syntax examples for CSS declarations and rules.

Table 2-2: CSS declarations vs. rules

Term CSS Syntax Example

Declaration background-color: #008080;

Rule body {background-color: #008080; color: #FFFFFF;}

To define multiple declarations for one selector within a rule, as in the previous example, you must separate each declaration with a semicolon. Although optional, you should also place a semicolon between the last value of the declaration and the end bracket.

Notice from these examples that the properties and the values must be placed within curly braces. This practice is standard for all style sheet rules, except when declaring inline styles. You will learn more about different ways to define styles shortly.

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 2-1: CSS terms and syntax

Proper CSS rule structure Following is an example of the accepted structure of rules within a style sheet:

body { font-family: arial, verdana, helvetica; color: #808080; font-size: 14px; } h1 { font-family: arial, sans-serif; color: #FFFFFF; font-size: 36px; }

Notice that the opening curly brace is on the same line as the element. Each declaration is placed on a separate line. These formatting techniques are considered best practices for coding because it makes the CSS file easier to read.

Comments in style sheets If you want a particular rule in a style sheet to be ignored, you can "comment out" the entry by placing it in between the /* and */ characters. You can also add comments to explain the rules to others. In the following example, the words "STYLE SHEET FOR INDEX.HTM" and "A comment is added here" will not be read:

/* STYLE SHEET FOR INDEX.HTM */ /* A comment is added here */

®



Inheritance The concept of inheritance is essential to CSS. In fact, the word "cascading" refers to inheritance. The styles you define in a style sheet will flow, or cascade, throughout the documents to which it is attached, unless another style defined inside of a page specifically overrides it. For example:

• A style sheet rule will override the default <body> font color, which is black.

• Styles embedded in an internal style sheet in an HTML page's code will override styles specified in a linked external style sheet.

• Styles specified inline using the style attribute in individual HTML elements within an HTML page will override embedded and external CSS entries.

Many styles can be used together to create a completely formatted document. All these characteristics, whether they are defined in a style sheet or exist by default, are inherited throughout the rest of the document(s).


Exercise 2-2: Proper CSS structure

Applying CSS Styles Now that you understand basic CSS terminology and syntax, you will learn how to implement CSS styles in an HTML document. You can apply CSS to HTML pages in several ways. You can:

• Declare an inline CSS style attribute in an HTML element.

• Embed an internal style sheet in an HTML page.

• Link an HTML page to an external style sheet.

In this lesson, you will modify an external style sheet to format an HTML page.

This course does not cover importing style sheets. Certain older browsers may crash when rendering pages with an import statement. If you want to use an external style sheet, use a linked style sheet rather than an imported style sheet.

Specifying style information As you now know, CSS allows you to format the appearance of various elements on a Web page, including page backgrounds, images, structural elements, text and so forth.

For example, you can change the size, color and typeface of the text on a Web page. CSS supports many font-related selectors and properties, including:

• font-family — specifies the typeface (i.e., font name) to be used.

• font-size — takes values in various units, such as em and pixels; the default pixel size is 16.

• color — specifies the color of text.

OBJECTIVE 2.4: Applying CSS styles

NOTE: Although CSS3 is the most current recommendation from the W3C, the support provided by most browsers is still inconsistent.

®



If you specify a font that is not available on all systems, some users will not see the font face you chose. Instead, the font will display as a default font face. Be aware of this when planning your page and include backup font-family values.

You specify style information using properties and values regardless of whether you insert them inline to HTML elements, or list them with selectors in an embedded or external style sheet.

Linking to an external style sheet You can link an HTML file to an external style sheet using the HTML <link> element. The <link> element specifies any external resource for the HTML document, but is usually used to link to an external style sheet.

You place the <link> element in the <head> section of your HTML file. It is an empty element that can appear multiple times and contains only attributes. The <link> element attaches your HTML file to the CSS file you specify. Following is an example:

<head> <link rel="stylesheet" type="text/css" href="css/habitat.css"/> <title> </title> </head> <body>

• The rel attribute is required and defines the relationship between the HTML document and the linked document.

• The type attribute specifies the linked document’s MIME type.

• The href attribute specifies the location of the linked document.

The external CSS file to which you link is a separate text file with a .css file name extension. It contains only CSS style rules, no HTML.

Applying CSS styles in other ways Although this course focuses on applying CSS by linking to external style sheets, it is worthwhile to note the other ways you can apply CSS to an HTML page.

Embedding an internal style sheet Embedding styles in an HTML page is useful when:

• You have styles that you want to apply consistently to an entire page but not necessarily more than one page.

• You want to apply one or more styles on a single page that will override styles applied to the same element(s) by an external style sheet.

To embed CSS in a single Web page as an internal style sheet, you add the <style> element to the <head> section of your HTML file. You then place your CSS declarations within the <style> </style> block. For example:

<head> <style type="text/css"> h1 { font-family: arial, sans-serif; color: #FFFFFF; font-size: 36px; } </style> </head> <body>

Multipurpose Internet Mail Extensions (MIME) Defines the file type, such as text or video, and the extension, such as css or mp4, for a user agent or browser.



Applying an inline style Applying an inline style in an HTML page is useful when:

• You have a style that you want to apply to an element on a single page but not to every occurrence of that element on that page.

• You want to apply a style that will override other styles applied to that same element on that page (by an external style sheet or embedded style).

To apply an inline style to an HTML element in a Web page, you add the style attribute directly into the element tag to which you want to apply the style. These styles are applied to elements individually in the <body> section of the HTML, rather than page-wide in the <head> section. For example:

<html> <head> </head> <body> <h1 style="font-family: arial, sans-serif;"> Introduction </h1>

In the following lab, you will format text on a Web page using an external style sheet. Suppose your Web team agrees that you should experiment with one of the site pages to see if a different font style would work well. You can use CSS to try some different font formatting styles on the page quickly and easily, with a minimum of recoding.

Lab 2-1: Formatting text with CSS

In this lab, you will use CSS to format text in an HTML5 page. The formatting will affect the fonts, the font size, and alignment.

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

2. Editor: Access the Lab_2-1 folder and open the css\habitat.css file. Insert the text-formatting declarations exactly as shown in bold below: /* STYLE SHEET FOR INDEX.HTM */ body { font-size: 80%; font-family: arial, helvetica, geneva, sans-serif; } footer { font-size: 80%; text-align: center; } h1 { font-family: arial, helvetica, geneva, sans-serif; }

3. After you have inserted this code, save your changes to habitat.css.

4. Editor: Open the index.htm file. Insert the <link> element in the <head> section as shown in bold below to attach the style sheet to this HTML page: <!DOCTYPE html> <html> <head>

OBJECTIVE 2.4: Applying CSS styles

NOTE: Using a percentage value (%) for font size helps maximize flexibility for display, which is especially important for adapting to mobile devices. The value will be the specified percentage (in this case, 80%) of the font's default size, which is generally 16 points.



When using class selectors, you create the selector in your CSS file, then add the class attribute inline to HTML elements with the value you named in your CSS file. The class selector always starts with a period ( . ) in CSS, although the period is not included in the HTML. In the following example, elements with the class="right" attribute will be right-justified.

CSS file:

.right { text-align: right; }

HTML file:

<h3 class="right">Right-aligned heading level three</h3> <p class="right">Right-aligned paragraph</p>

If only one HTML element needs to be affected by the style, then add that element name before the period in the CSS rule. In the following example, only <h3> elements are affected:

CSS file:

h3.right { text-align: right; }

HTML file:

<h3 class="right">Right-aligned heading three</h3> <p class="right">Not affected. Only H3s receive the style</p>

The id selector The id selector specifies CSS styles for one unique element, such as one paragraph that requires red text. Like class selectors, you define your id selectors in your CSS file, then apply them as inline styles to HTML elements in the HTML file.

The id selector always starts with the pound or hash symbol ( # ) in CSS, whereas the # symbol is not included in HTML. In the following example, the paragraph with id="red" will have red text.

CSS file:

#red { color:red; }

HTML file:

<p id="red">This paragraph has red text</p> <p>Not affected</p>

To help remember these terms, consider the following: • An ID is a unique identifier for one person, such as an identification (ID) card.

• A class is an identifier for a group of people, such as a classroom of students.

The class and id selectors are very helpful because they give you a great deal of flexibility with your styles.




Exercise 2-3: CSS styles and selectors

Page Layout with CSS Web page layout is the placement of all page elements — including text, images, headings, navigation menus and so forth — relative to each other. A good page layout makes the page aesthetically pleasing, and easy to scan, read and navigate. Following are some layout guidelines to consider when designing your Web pages:

• Be succinct — Limit words to clear, necessary verbiage, especially on the home page. Most users simply scan pages quickly looking for specific information or links to it. Let users navigate to additional pages if they want more information.

• Make sure that each page focuses on one topic — No tangent message, regardless of its importance, should be added to a page. Use links to point users to appropriate related topics on separate pages.

• Include navigation aids — A common way to enable navigation is to place links at the top and bottom of the page, and within the body of the page, to reduce the need for users to scroll.

• Place comments in each section of code — Comments help explain changes you have made to the code or page. You can indicate the nature of the change, including the date you made the change and your name or initials, or you can explain the nature of the markup. For example, the syb.html page has three headings (h1, h2 and h3). You could comment each of these sections of the narrative.

Effective page layout is essential for effective search engine optimization.

Positioning content on a page is similar to positioning document structure elements. It is important to pay attention to content positioning, because this creates the document flow for your page. Document flow describes how your content is positioned: Does it fall from top to bottom in stacks, or does some content float to one side or the other?

By default, browsers render block-level elements with blank space above and below them, whereas inline elements are rendered within other elements. However, you can use CSS to modify element positioning.

Fixed-width vs. liquid design layouts Web designers have no control over their site users' browser window sizes, the Web browsers used or the fonts installed on users' computers. Yet despite this, many designers try to control the way that Web page elements will render on the screen.

There are two page-layout methods that designers use to control the placement of Web page elements when rendered in the browser:

OBJECTIVE 2.5: Page layout with CSS 2.6: Positioning content with CSS

document flow In CSS, the arrangement of content elements on a page and how the space is used.

®

• Fixed-width layout —achieved by assigning specific pixel widths to elements using the HTML5 structural elements or the <div> tag. This layout ensures that the text, images and layout will not vary from browser to browser. The problem with using a fixed-width layout is that the elements may not render as expected when users change the size of their browser windows.

• Liquid layout — also known as relative width or fluid layout. Achieved by assigning percentage values to elements. With this layout, the size of an element is flexible and will change dynamically depending on the size of the browser window. For example, you can specify in the CSS width property that Element A will occupy 35 percent of the screen and Element B will occupy the remaining 65 percent. If the user resizes the browser window, the elements will resize correspondingly.

Whether you design a fixed-width or liquid layout depends on your goal. If you design for mobile devices, consider liquid layout. If you design for desktop computers, consider fixed-width layout.


Exercise 2-4: Page layout with CSS

Document structure elements and page layout In the previous lesson, you learned the new document structure elements: <header>, <main>, <section>, <nav>, <article>, <aside> and <footer>. These are easily interpreted and native to any HTML5-compliant browser, regardless of whether the browser is on a mobile device, laptop or tablet.

The following HTML example demonstrates a way to define part of a document's overall structure and add hyperlinks with the <nav> element:

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

This HTML code can be controlled through an external style sheet. The following style sheet entry defines formatting for the section of code (the nav selector) created by the <nav> element in the preceding HTML sample:

nav { float: left; width: 165px; background: #fc3 url(navbg_04.gif) repeat-y top right; height: 662px; }

NOTE: Remember that the <nav> tag is in the HTML file, and the nav selector is in a style sheet. Also, the HTML <nav> entry points to the CSS nav entry.

®



This CSS code dictates the following style instructions:

• The navigational sidebar is made to appear (i.e., float) on the left side of the document.

• A background image (navbg_04.gif) is specified and will appear at the top right of the sidebar.

• The repeat-y entry ensures that the image is tiled vertically in the background.

• The sidebar will always appear 165 pixels wide and 662 pixels high.

You could repeat these structural properties and values for each structural element of the HTML document, then use CSS to control the rendering of each section in the document.

If necessary, you can adjust the formatting any time by modifying the CSS entries. For example, suppose you were to add more text to a page, which makes the page longer. If you were using a sidebar image, this image may then be too short, making the page look awkward. To solve this problem, you could increase the sidebar image's height to accommodate the change by adjusting the height property's pixel value in the style sheet. You can also use CSS to move images to specific locations on your pages.

Inline style example for aligning text Alternatively, the following example shows an inline CSS style attribute declared inside an HTML <p> element in the HTML document:

<p style="text-align: center; margin-right: 12px;"/>

This tag uses the inline CSS style attribute to align text to the center of a right margin that begins 12 pixels into the document. This style will apply only to this <p> tag, and not to any others.

Positioning images relative to text After you start working with images, you will see that placing an image on your page is only the first step. You must know how to position images relative to text on a page.

CSS classes are useful for floating images to the left or right of text in HTML5. Consider the following CSS class used to float an image to the left:

.floatleft { float: left; margin: 5px; }

In this example, the class is defined as floatleft. The float property specifies that the image will float to the left of the text. The margin property specifies that the image will include a 5-pixel margin around it, which will provide a small cushion between the image and the text.

The HTML document needs the following code to access the CSS class:

<img src="images/company_logo.png" class="floatleft" />

You can use any name for the class; in this case, floatleft is a good descriptor. If the class was created to float text to the right, it could be named floatright with a float value of "right."



Table 2-3 describes the CSS values that you can use to align images to text.

Table 2-3: CSS values for aligning images to text

Alignment Option Description CSS Class Code Example

bottom The default alignment

The bottom of the image is aligned with the baseline of adjoining text

CSS file:

.bottom {vertical-align: baseline;}

HTML file:

<img src="syb/SYBcollage2.png" class="bottom" />

middle A vertical — not horizontal — alignment option

This value aligns the middle of the image to the baseline of adjoining text

CSS file:

.middle {vertical-align: middle; margin: 5px;}

HTML file:

<img src="syb/SYBcollage2.png" class="middle" />

top Aligns the top of the image with the top of adjoining text

CSS file:

.top {vertical-align: top;}

HTML file:

<img src="syb/SYBcollage2.png" class="top" />

left Floats the image to the left of the text paragraph into which the <img> tag is inserted

The top of the image will align with the left and top of the adjoining text

CSS file:

.floatleft {float: left; margin: 5px;}

HTML file:

<img src="syb/SYBcollage2.png" class="floatleft" />

right Floats the image to the right of the text paragraph into which the <img> tag is inserted

The top of the image will align with the right and top of the adjoining text

CSS file:

.floatright {float: right; margin: 5px;}

HTML file:

<img src="syb/SYBcollage2.png" class="floatright" />

If you do not want floating elements before or after a paragraph (or any element), you can use the clear property:

• clear: left — prevents floating elements on the left side.

• clear: right — prevents floating elements on the right side.

• clear: both — prevents floating elements on both sides.

Inline style example for floating images Although it is not the best method to use if you are developing sites with multiple pages, the inline CSS style attribute can also be used for floating images to the left and right of text, as follows:

<img src="images/company_logo.png" style="float: left; margin: 5px;" />

NOTE: Aligning images relative to text using CSS can be tedious and can sometimes produce unsatisfactory results. Test your site on as many screens and browsers as possible.

NOTE: Notice that when the "left" or "right" value is specified, the image is aligned vertically to the top by default.



Page structure In the following lab, you will see how the HTML structural elements and CSS can be used to create document sections. Suppose members of your Web team have added images and page structure to an HTML page. The new document structure includes four sections:

• A header section— with a company logo. It can also include a search field and a drop-down menu.

• A navigation menu on the left side of the page — with links that explain additional Habitat youth programs. This section will contain a background image, an image that will eventually link to a PDF file, and several button-style images, the first of which will eventually link to another page.

• A body content section — with the narrative (which you have already marked up) about the Summer Youth Blitz program.

• A footer section — with text-based navigation to help ensure accessibility.

The page and a style sheet have been developed already. You have been assigned to structure the Web page using page layout techniques.

Lab 2-2: Laying out a page's structure using CSS

In this lab, you will use CSS to structure the layout in an HTML5 page. The <nav> element will float left of the <article> elements.

1. Windows Explorer: Open the Lab_2-2 folder in your student lab files.

2. Editor: Open index.htm.

3. Scroll down to the first <article> element and insert the HTML code exactly as shown in bold: … <article> <h1>Our Mission</h1> <img class="floatright" src="media/menu_icon_default.jpg" height="114" alt="Silhouettes of Habitat for Humanity workers"/> …

4. Scroll down to the second <article> element and insert the following code shown in bold: … <article> <h1>Why We Build</h1> <video class="floatright" height="150" controls="controls"> …

5. Save the index.htm file.

6. Editor: Open the css\habitat.css file.

7. In the habitat.css file, insert the positioning properties exactly as shown in bold: /* STYLE SHEET FOR INDEX.HTM */

body { font-size: 80%; font-family: arial, helvetica, geneva, sans-serif;

OBJECTIVE 2.5: Page layout with CSS 2.6: Positioning content with CSS

NOTE: The lab files for all labs in this lesson build upon one another from one lab to the next. You may want to keep the original index.htm and habitat.css files open from the previous lab and use them throughout this lesson.



} footer { font-size: 80%; text-align: center; } h1 { font-family: arial, helvetica, geneva, sans-serif; } nav { background: #d8d8d8; font-weight: bold; float: left; height: 420px; }

8. Once you have inserted this code, save your changes.

9. Open index.htm in your Web browser. It should resemble Figure 2-3.

Figure 2-3: Structuring a page using CSS


In this lab, you used CSS to structure an HTML5 page.

In the following lab, you will use CSS with the <img> element to align images relative to text on your Web page. Suppose your project manager has notified you that several images will be incorporated into a Web page you are developing. You will need to experiment with aligning the images and text. Proper alignment of page components in relation to each other is an important part of Web design that can greatly improve — or degrade — a page's appearance and effectiveness.



Lab 2-3: Positioning images relative to text using CSS

In this lab, you will use CSS to position images and text.


2. Editor: Open index.htm.

3. Scroll down to the first <article> element and insert the HTML code exactly as shown (in bold): … <article> <h1>Our Mission</h1> <img class="floatright" src="css/menu_icon_default.jpg" height="114" alt="Silhouettes of Habitat for Humanity workers"/> …

4. Scroll down to the second <article> element and insert the following as shown (in bold): … <article> <h1>Why We Build</h1> <video class="floatright" height="150" controls="controls"> …

5. Save the index.htm file.


7. In the habitat.css file, insert the positioning properties exactly as shown (in bold): /* STYLE SHEET FOR INDEX.HTM */

body { font-size: 80%; font-family: arial, helvetica, geneva, sans-serif; } footer { font-size: 80%; text-align: center; clear: both; } h1 { font-family: arial, helvetica, geneva, sans-serif; } nav { background: #d8d8d8; font-weight: bold; float: left; height: 420px; } .floatright { float: right; clear: right; }

8. After you have inserted this code, save your changes.


OBJECTIVE 2.6: Positioning content with CSS



Figure 2-4: Habitat page with CSS positioning


In this lab, you used CSS to position content on your HTML5 page.

CSS Positioning Schemes As you have learned, positioning content on a Web page is one of the most important uses for CSS in your Web designs.

In addition to providing the top, bottom, left and right properties, CSS provides various ways to render the position of block-level elements. These schemes (described in Table 2-4) are selected by using the position property for an element.

Table 2-4: CSS positioning schemes

CSS Positioning Scheme Description

Static The normal, or default, position of the element within a page

Relative The element is relative to others on a page, usually because of the top, bottom, left and right properties

Absolute The element appears to float above the document and can be positioned as needed

It is completely removed from the rest of the page flow

Fixed The element remains in the same position when the page is scrolled

Inherit The element inherits its position from the parent element

OBJECTIVE 2.7: CSS positioning schemes

NOTE: The properties of top, bottom, left, right and inherit help position all block-level elements.




Exercise 2-5: CSS positioning schemes for block-level elements

The CSS Box Model The CSS Box Model allows designers to configure the space around each HTML element. It represents each HTML element as a rectangular box. Without this box, HTML elements would overlap or lay against one another. CSS is used to configure the boxes.

The Box Model is straightforward: Each element is surrounded by four rectangular boxes that can be configured to create space and a border. The four boxes are the content, the padding, the border and the margin, as described in Table 2-5.

Table 2-5: CSS Box Model

CSS Box Description

Content The content within an HTML element

Padding Surrounds the content

Defines the space between the content and the border of an element

Border Surrounds the padding

Defines a border, such as a line, around an element

Margin The outermost box

Defines only the amount of space between the border and the surrounding elements in the HTML document

Figure 2-5 shows the rectangular boxes that comprise the CSS Box Model.

Figure 2-5: CSS Box Model

As you know, you configure the width and height of the content box (i.e., the HTML element) using CSS. CSS also configures the padding, border and margin. Table 2-6 describes these properties. You have already seen the margin property used in some examples throughout this lesson.

OBJECTIVE 2.8: CSS Box Model

®



Table 2-6: CSS Box Model properties

Box Type Properties Individual Side Properties

Padding padding:[top right bottom left]

padding-top:

padding-right:

padding-bottom:

padding-left:

Border border:[width style color] border-top: [width style color]

border-right: [width style color]

border-bottom: [width style color]

border-left: [width style color]

Margin margin:[top right bottom left]

margin-top:

margin-right:

margin-bottom:

margin-left:

If you need to calculate the full size of an element, do not forget to add the padding, border and margin to your total width and height.

To learn more about the CSS Box Model, read the W3C Box Model specification at www.w3.org/TR/CSS2/box.html.

In the following lab, you will modify a Web page using the CSS Box Model properties. Suppose your supervisor looks at the Habitat For Humanity page you are working on and comments that the page looks too busy. She suggests you add some white space between the elements to make the page more aesthetically pleasing. You decide to implement the request using CSS positioning techniques.

Lab 2-4: Modifying elements using CSS margins, borders and padding

In this lab, you will modify elements on an HTML5 page using the CSS margin, border and padding properties.



3. In the habitat.css file, insert the padding, margin and border properties exactly as shown below in bold: /* STYLE SHEET FOR INDEX.HTM */ article { padding: 10px; } body { font-size: 80%; font-family: arial, helvetica, geneva, sans-serif; border-style: solid; border-width: 5px; border-color: #d8d8d8; }

NOTE: Be aware that adding margins, padding or a border increases the overall size of an element.

NOTE: You can review terms relevant to positioning in Activity 2-1: Identifying CSS positioning terms.

OBJECTIVE 2.8: CSS Box Model



footer { font-size: 80%; text-align: center; clear: both; border-top-style: solid; border-top-width: 5px; border-top-color: #d8d8d8; margin-top: 0; padding: 0; } h1 { font-family: arial, helvetica, geneva, sans-serif; margin-top: 5px; margin-bottom: 0px; } header { border-bottom-style: solid; border-bottom-width: 5px; border-bottom-color: #d8d8d8; } nav { background: #d8d8d8; font-weight: bold; float: left; height: 420px; padding-right: 24px; margin-right: 10px; } .floatright { float: right; clear: right; margin: 10px; }

4. After you have inserted this code, save your changes.


Figure 2-6: Habitat page with CSS borders, margins and padding




In this lab, you used CSS to add borders, margins and padding to your HTML5 page.

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 2

Case Study Legacy Styling Sadie works for a large enterprise organization as a Web designer. The company site uses current technologies and techniques, but some of the internal departments still use Web applications that have not been updated in a long time.

The accounting department needs a new intranet page to post accounts payable information. Sadie's supervisor assigns her to build the page with HTML5.

When Sadie researches the project, she realizes that the accounting department still uses Microsoft Internet Explorer 8 with Windows XP. They will not upgrade to Windows 7 or 8 because they rely on an older, incompatible computer program for their accounting tasks.

* * *

Consider this scenario and answer the following questions:

• Does Internet Explorer 8 support HTML5?

• Is there a way to implement HTML5 and still create a functional site?

• Is there a way to ensure consistent styling on this page regardless of older Internet Explorer browsers that most of its users will have?

• Should Sadie tell her supervisor that this task is impossible?

®



Lesson Summary

Application project CSS style sheets are important for consistency within your HTML files. If another Web designer knows the style sheet and works with other pages on the site, any changes they make will be consistent with your work.

Another important point is having consistency within your style sheet. A consistent style sheet is easier to read, interpret, update and maintain, especially if other developers may also be working with it.

Create a brief CSS style guide that consists of eight bullet point entries. Go online, view various CSS style sheets, and select your favorite rules. Consider the following formatting and organizational items:

• Will your style sheet include indentations within the CSS code?

• Will you allow capitalization?

• Will you alphabetize your CSS entries?

• Will you require blank lines between entries?

Skills review In this lesson, you reviewed the basics of Cascading Style Sheet (CSS) technology. You learned about style guides and the benefits and previous versions of CSS. You also learned how to accommodate older, pre-HTML5 browsers, such as Internet Explorer 8. You learned CSS style anatomy and terminology, CSS syntax and proper CSS structure. You formatted an HTML5 page using CSS, you implemented page layout with the new HTML5 structure elements, and you created a Web page with liquid layout. Lastly, you studied HTML5 positioning schemes and the CSS Box Model.

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

2.1: Explain the function and purpose of the Cascading Style Sheets (CSS) technology.

2.2: Explain the importance of using style guides when designing sites and documents.

2.3: Define common CSS terms and syntax.

2.4: Apply CSS styles to format pages.

2.5: Develop and apply page layouts with CSS.

2.6: Use CSS to position content and apply document flow.

2.7: Define common CSS positioning schemes.

2.8: Use the CSS Box Model.



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 2.01 Review Objective 2.05 Review




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

Lesson 2 Review 1. What is a CSS selector?

2. What are two benefits of using CSS?

3. What HTML attribute allows inline CSS to be applied within some HTML document tags?

4. What term is used to describe the grouping of a CSS selector, property and value?

5. Name all the alignment options available for aligning images relative to text.

®

2lesson 2: using cascading style sheets (css) …...2lesson 2: using cascading style sheets (css)...

Documents