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

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 tag c. The background-image selector in the tag d. The img property

3. What is liquid layout?

© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 Lesson 2: Using Cascading Style Sheets (CSS) Technology 2-3

Cascading Style Sheets (CSS)

OBJECTIVE As a Web designer, you know that there is more to creating a good Web page than posting 2.1: CSS technology 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 Cascading Style Sheets (CSS) is a Web design technology that enables developers to Sheets (CSS) A W3C language for determine how the HTML elements in their Web pages will display, giving a page or entire applying structure site a particular "look and feel." and formatting instructions to HTML CSS instructions can be: pages and other markup language documents. • 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.

NOTE: CSS benefits include: Have you experienced any • Consistency — CSS easily gives an entire site a consistent look and feel. benefits from using CSS in your past • projects? How has Easy change management — You have the ability to change the look and feel of an CSS helped you? Do entire site by simply changing one part of a single line of code, rather than having to you think it is change possibly thousands of lines in hundreds of Web pages. absolutely necessary? Are If all pages on your site are linked to the same external style sheet, then one simple there situations when it is not change to the style sheet will change all associated elements across the site. For example, necessary? if you want to change your

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

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

OBJECTIVE A style guide or style manual is a set of standards for the writing and/or design of 2.2: Style guides 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.

© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 2-4 Advanced HTML5 and CSS3 Specialist

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.

© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 Lesson 2: Using Cascading Style Sheets (CSS) Technology 2-5

• 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

Multipurpose • The rel attribute is required and defines the relationship between the HTML Internet Mail Extensions (MIME) document and the linked document. Defines the file type, such as text or • The type attribute specifies the linked document’s MIME type. video, and the extension, such as • The href attribute specifies the location of the linked document. css or mp4, for a user agent or The external CSS file to which you link is a separate text file with a .css file name browser. 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 block. For example:

© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 Lesson 2: Using Cascading Style Sheets (CSS) Technology 2-11

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 section of the HTML, rather than page- wide in the section. For example:

Introduction

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

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

1. Windows Explorer: Copy the Lesson02 folder from your student lab files to your Desktop. NOTE: Using a percentage 2. Editor: Access the Lab_2-1 folder and open the css\habitat.css file. Insert the text- value (%) for font formatting declarations exactly as shown in bold below: size helps maximize flexibility for display, which is especially /* STYLE SHEET FOR INDEX.HTM */ important for adapting to mobile body { devices. The value font-size: 80%; will be the specified font-family: arial, helvetica, geneva, sans-serif; percentage (in this } case, 80%) of the font's default size, footer { which is generally 16 font-size: 80%; points. 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 element in the section as shown in bold below to attach the style sheet to this HTML page:

© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 2-12 Advanced HTML5 and CSS3 Specialist

Tech Note: The name of the style sheet file is habitat.css. In the href attribute, you specify the location of this file in your file structure, so in this case you specify href="css/habitat.css" because the habitat.css file resides in a folder named css. If the style sheet were in the same folder as the HTML file, you would give the location as href="habitat.css".

5. After you have inserted this code, save your changes to index.htm.

6. Browser: Open index.htm. It should resemble Figure 2-2.

Figure 2-2: Text formatted using CSS

7. Close your Web browser and text editor.

In this lab, you used CSS to format text in an HTML5 page.

With practice, you can embellish your HTML pages quickly and easily by using CSS to add graphical elements and styles.

Class and id selectors class selector Sometimes you must apply a specific style to a group of elements. In other cases, you A selector that specifies CSS styles need to apply a style only to one unique element. CSS allows you to customize your own for a group of element styles using the class and id selectors. elements. id selector The class selector A selector that The class selector specifies a CSS style that you can apply to a group of elements. For specifies CSS styles for one unique example, you can apply a font color style to several elements at once, such as headings, element. paragraphs and footers.

© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 Lesson 2: Using Cascading Style Sheets (CSS) Technology 2-13

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:

Right-aligned heading level three

Right-aligned paragraph

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

elements are affected:

CSS file:

h3.right { text-align: right; }

HTML file:

Right-aligned heading three

Not affected. Only H3s receive the style

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:

This paragraph has red text

Not affected

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.

© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 2-14 Advanced HTML5 and CSS3 Specialist

® 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-3: CSS styles and selectors

Page Layout with CSS

OBJECTIVE Web page layout is the placement of all page elements — including text, images, 2.5: Page layout headings, navigation menus and so forth — relative to each other. A good page layout with CSS makes the page aesthetically pleasing, and easy to scan, read and navigate. Following are 2.6: Positioning some layout guidelines to consider when designing your Web pages: content with CSS • 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.

document flow Positioning content on a page is similar to positioning document structure elements. It is In CSS, the arrangement of important to pay attention to content positioning, because this creates the document content elements flow for your page. Document flow describes how your content is positioned: Does it fall on a page and how from top to bottom in stacks, or does some content float to one side or the other? the space is used. 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:

© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 Lesson 2: Using Cascading Style Sheets (CSS) Technology 2-15

• Fixed-width layout —achieved by assigning specific pixel widths to elements using the HTML5 structural elements or the

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.

® 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-4: Page layout with CSS

Document structure elements and page layout In the previous lesson, you learned the new document structure elements:

,

,

,

,

,

and

. 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

element:

• Learn more
• Volunteer
• Advocate
• Donate

NOTE: This HTML code can be controlled through an external style sheet. The following style Remember that the sheet entry defines formatting for the section of code (the nav selector) created by the

tag is in the HTML file, and the

element in the preceding HTML sample: nav selector is in a style sheet. Also, the nav { HTML

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

© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 2-16 Advanced HTML5 and CSS3 Specialist

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

element in the HTML document:

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

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:

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."

© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 Lesson 2: Using Cascading Style Sheets (CSS) Technology 2-17

NOTE: Table 2-3 describes the CSS values that you can use to align images to text. Aligning images relative to text using Table 2-3: CSS values for aligning images to text CSS can be tedious and can sometimes produce Alignment Option Description CSS Class Code Example unsatisfactory results. Test your site bottom The default alignment CSS file: on as many screens The bottom of the image is aligned .bottom {vertical-align: and browsers as with the baseline of adjoining text baseline;} possible.

HTML file: middle A vertical — not horizontal — CSS file: alignment option .middle {vertical-align: This value aligns the middle of the middle; margin: 5px;} image to the baseline of adjoining text HTML file: top Aligns the top of the image with the CSS file: top of adjoining text .top {vertical-align: top;}

HTML file: left Floats the image to the left of the CSS file: text paragraph into which the .floatleft {float: left; tag is inserted margin: 5px;} The top of the image will align with the left and top of the adjoining text HTML file: right Floats the image to the right of the CSS file: text paragraph into which the .floatright {float: right; tag is inserted margin: 5px;} The top of the image will align with the right and top of the adjoining text HTML file: NOTE: Notice that when If you do not want floating elements before or after a paragraph (or any element), you can the "left" or "right" value is specified, use the clear property: the image is aligned vertically to the top • clear: left — prevents floating elements on the left side. by default. • 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:

© 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 2-18 Advanced HTML5 and CSS3 Specialist

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

OBJECTIVE In this lab, you will use CSS to structure the layout in an HTML5 page. The

2.5: Page layout with CSS element will float left of the

elements.

2.6: Positioning 1. Windows Explorer: Open the Lab_2-2 folder in your student lab files. content with CSS 2. Editor: Open index.htm. NOTE: The lab files for all 3. Scroll down to the first

element and insert the HTML code exactly as shown labs in this lesson in bold: build upon one another from one … lab to the next. You

may want to keep

Our Mission

the original habitat.css files … open from the previous lab and 4. Scroll down to the second

element and insert the following code shown in use them throughout this bold: lesson. …

Why We Build