1. HTML5 Level I
Session II - Chapter 4 How to use CSS to Format the Elements of a Web Page

2. Session Outline How to provide CSS to web pages
CSS with HTML5 Semantic Tags
How to Specify Measurements and Colors
Code Selectors
Working with Text
In this session we will complete five exercises.
Exercise 1 covers how to provide CSS in a web page.
Exercise 2 covers how to use CSS with HTML Semantic Tags
Exercise 3 covers How to Specify Measurements and Colors
Exercise 4 covers how to use Code Selectors
And
Exercise 5 covers Working with Text
9/20/2018
Copyright © Carl M. Burnett

3. Three Ways to Provide Stylization
External Style Sheet (External)
<link rel="stylesheet" href="styles/main.css">
Embed the styles in the head section (Embedded)
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 87.5%; }
h1 { font-size: 250%; }
</style>
Apply styles to a single element (Inline)
<h1 style="font-size: 500%; color: red;">
Valley Town Hall</h1>
There are three methods of providing stylization to a web page.
The first method is to use an external style sheet to provide the stylization rules. The link element in the head section of the web page is used to identify the external style sheet to be used. In this example the main.css file is identified using the href tag.
The second method to provide stylization is to embed the stylization rules in the head section of the web page document. When this method is used the actual CSS code is written in the head section. To begin the CSS code an opening <style> tag is used and to close out the style code a closing </style> code is used. Stylization rules can then be placed in between these tages. In this example we have a body style rule and a h1 style rule.
The last method that can be used to provide stylization is to embed the code inline with the html element or tag. In this example the h1 tag has a style rule for the font size embedded into the tag. Here the use of the style= signifies that start of the style rule.
9/20/2018
Copyright © Carl M. Burnett

4. Head element - Two Style Sheets
<title>San Joaquin Valley Town Hall</title>
<link rel="stylesheet" href="../styles/main.css">
<link rel="stylesheet" href="../styles/speaker.css">
</head>
The sequence in which styles are applied
First external style sheet
Last external style sheet
When there are more that one external style sheet applied to a web page there is a sequence used to apply the style sheets. In this example there are two external style sheets used – a main.css and a speaker.css.
The sequence that these style sheets would be applied is the first followed by the second.
9/20/2018
Copyright © Carl M. Burnett

5. How Cascading Works 1. Default rule (Browser default)
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)
5. !important rule for web page (head section)
6. !important rule for user style (inline style)
This takes us to the rules that determines how styles are applied. Once reason CSS is called Cascading Style Sheets is because there are rules for the application of many different styles that can be applied to a web page.
The cascading rules work like this.
The first stylization rule is provided by the default browser rules. This is based on the browser style that is defined when the browser first opens. In this case, if no CSS rules have been defined then the browser uses the standard style rules of the HTML elements. However, if style rules are part of the web page then the application of the styling rules cascade to the next level or the 2nd level to the external style sheet.
At this point is there are multiple style sheets, then the first would be applied followed by the second style sheet and so on.
The third cascading level is the embedded internal style sheet style section in the head section of the web page.
The fourth cascading level is the inline embedded style that is part of the HTML element.
There are also two important rules regarding using styling in a web page that override any other style rules.
The fifth cascading level is when an !important directive rule is embedded into a web page in the head section. This rule overrides all other styling rules to include inline styles.
The sixth and final cascading level is when an !important directive rule is embedded a specific inline style. This rule overrides all other styling rules.
9/20/2018
Copyright © Carl M. Burnett

6. CSS with HTML Semantic Tags
Older browsers cannot interpret HTML5 elements
article
aside
figure
header
nav
section
JavaScript for HTML5 Semantic Tags
<head>
<script>
document.createElement(article);
document.createElement(aside);
document.createElement(figure);
document.createElement(footer);
document.createElement(header);
document.createElement(nav);
document.createElement(section);
</script>
</head>
CSS for HTML5 Semantic Tags
article, aside, figure, header, nav, section {
display: block; }
Older browsers cannot interpret the new HTML5 semantic tags. These tags include article, aside, figure, header, nav, and section.
To enable these browsers to understand this new tags several methodologies have been created to enable older browsers to interpret this tags.
One way of enabling a browser tis to add a JavaScript to the head section. This JavaScript script creates a document element for the new HTML5 sematic tags. The document elements are made part of the document tree enabling the browser to interpret the tags when they called in a CSS routine.
The CSS code to instantiate the HTML5 tags are listed here.
9/20/2018
Copyright © Carl M. Burnett

7. Normalizer.css Ensures all browsers have a base stylesheet.
CSS does the following:
Preserves browser defaults.
Normalize HTML styles.
Correct browser bugs and inconsistencies.
Improve usability.
Complete Exercise 1

8. Exercise 1 1. Download Normalizer.css file.
Right-Click Download v4.1.1 Button on Normalizer site.
Choose “Save Link As”
Save normalize.css in the styles directory of your dev site.
2. Include link to normalizer.css file in head section of your index (home) page.

9. Modernizr JavaScript library Detects HTML5 and CSS3 features
Based on user’s web browser
Modernizr 3.3.1
Another method, and the most preferred method, is to update your web page with all the necessary fixes for all browser and all functions by using a plug-in call Modernizer.
- Modernizr is a small JavaScript library.
- It detects the availability of native implementations of HTML5 and CSS3 features for next-generation web technologies.
Modernizr does actual feature detection to reliably discern what the various browsers can and cannot do. It tests for over 40 next-generation features, all in a matter of milliseconds. It adds classes to the html element that explain precisely what features are and are not natively supported.
It provides a script loader so you can pull in polyfills to backfill functionality in old browsers. A polyfil is a collection of JavaScript code. Polyfills – a term coined by Remy Sharp to describe JavaScript shims that replicate the standard API found in native features of new browsers for those older browsers without such features. html5shiv.js is one such polyfill. Modernizer also updates other items thru shims and fallbacks to enable older browsers the ability to interpret many newer HTML5 technologies. Modernizr runs quickly when a webpage is loaded to detect what features are support by the browser. It then creates a JavaScript object with the results, and adds classes to the html element for you to key on in your CSS.
You can also design and generate a custom Modernizer plugin for only those HTML5 API’s and functions you want on include in your website. Or you can download the entire Modernizer plugin with all functionalities. Version is the latest build. [Go to Modernizer Website] - Listed here are all the HTML5 API and functions you can specify in your specialized Modernizer build.
Modernizer can also be extended to include test, prefixes and events.
Modernizer can also be designed to include additional JavaScript for non-core functionalities that you may want to include in your Modernizer file.
Modernizer files are created in a minified version and can be generated to produce a non-minified version.
So let see how we can generate a custom Modernizer file.
9/20/2018
Copyright © Carl M. Burnett

10. Exercise 2 Create a Specialized Modernizr File.
Select some functions.
Generate Minified version.
Download and place in your test site.
Create a Specialized Non-Minified Modernizr File.
Convert to non-minified version.
Download Modernizr and Install File
Download Modernizr ver file to JavaScript directory in Dev Site. (link on Website)
Include link to Modernizr ver file in Head section of index page.
Notice that the default Modernizer build includes the html5shiv v3.7, Modernizr.load, and Add the CSS Classes. You will want to keep these for you specialized file. But I also want to add HTML5 Audio, HTML5 Video, and the Geolocation API.
Once I select the functions I want to include I can generate the customized minified version of the Modernizr file. Once the file is generated the download button will appear and I can download the file to save and use on my website.
Notice in the window it provide you with what the script looks like.
If I click the “Don't Minify Source” checkbox it will automatically generate a non-minified version of the build. This non-minified version can also be download.
Now its your turn to do this exercise.
Go to the Modernizer site and Create a Specialized Modernizr File. Select some functions you want o add to the file. Generate a Minified version and them Download to file and place it in your test site.
Also Create a Specialized Non-Minified Modernizr File. Convert to minified version into a non minified version. Then Download the file and place it in your test site.
Once you have completed this exercise come back a restart the video.
9/20/2018
Copyright © Carl M. Burnett

11. How to Specify Measurements and Colors
CSS Units and Measurement Values
CSS Color Values
CSS Colors
CSS Color Names
CSS Color HEX
When you want to specify a measurement in CSS there are various units and values that can be used.
[Go to W3C Website] Here on the W3C website are the units of measurement and the values that can be used to specify a measurement.
The units include percentages, inches, centimeters, em, milimeters, ex, points, pica and pixels.
Each unit can specify a numerical value. [Back to Presentation]
[Go to W3C Website] Colors can also be specified in CSS by using the Color name, RGB colors, RGBA colors, HSL colors, HSLA colors and the hexadecimal value. [Back to Presentation]
[Go to W3C Website] On this chart the colors are shown with their respective hex and RGB values. Because there are 255 different RGB combinations, that means there are potentially 16 million different colors that can be specified. [Back to Presentation]
[Go to W3C Website] If you want to see the color sorted by name you can use this chart. [Back to Presentation]
[Go to W3C Website] If you want to see the color sorted by hex value use this chart. [Back to Presentation]
9/20/2018
Copyright © Carl M. Burnett

12. CSS Colors W3C Example CSS Colors by Hex, RGB and Name
In this exercise you can change the color of a HTML element in CSS by changing the hex , RGB and name.
Notice that each line has a background color set by a inline CSS rule.
If I want to change the color of the first line to light blue using the hex code I would use #00FFFF. When I make this change it changes the background to light blue.
If I want to change the color of the second line to green using the RGB color values I would use #0,255,0. When I make this change it changes the background to green.
If I want to change the color of the third line to purple using the color name I would use Purple. When I make this change it changes the background to Purple.
Now try this yourself.
Once you have completed this exercise come back a restart the video.
9/20/2018
Copyright © Carl M. Burnett

13. CSS Code Selector Tester
CSS Code Selectors
All Elements - *
By Element Type h1 p
By id
#mainsection
By Class
.maintag
CSS Code Selectors
CSS Code Selector Tester
CSS code selectors are “keys” that are used to select elements to stylize.
[First Bullet] If you want to stylized all the elements of a web page you can use the star to select all elements.
[Second Bullet] You can also select selected HTML elements like the h1 and p tags.
[Third & Fourth Bullet] One of the great things you can do with CSS selectors is to select a ID tag or a Class tag to be stylized. An ID tag is selected with the hash tag, and a Class tag is selected with a dot.
[First Button - Go to W3C Website]
There are other CSS selectors that can also be used. Let look at the W3C site to see some of the additional selectors that can be used.
As you can see form the table there are many selectors. The listing provides an example of the selector and a description of what the selector is. It also provides you what version of CSS it applies to. This is important because if a browser does not support a version of CSS, then you need to ensure theta the Modernizer JavaScript file updates the web page to support that version of CSS.
As you can see there are a lot of selectors that can be used to apply CSS stylization. [Minimize Browser]
But how can you tell if you can use the selector?
[Second Button - Go to W3C Website]
Once way is the use the W3C CSS Code Selector tester to see what selectors work.
If you want to know if a selector will work for you the W3C CSS Code Selector tester is the perfect tool to use.
This tool lets you visually see which element can be selected and this will provide you a visible way to know how a selector works. Let say we wanted to see how a paragraph first-child works. We can select it here, and it will show us what part of a web page it will activate styling.
Notice in this case it shows that all the first p elements of a web page are selected.
If we select the p:first-letter it shows that the first letter of all p elements of a web page are selected.
9/20/2018
Copyright © Carl M. Burnett

14. Combinator Relational Selectors
Descendant - Selects all <p> elements inside <div> elements
div p
Adjacent Sibling - Selects all <p> elements that are placed immediately after <div> elements
Div + p
Child - Selects all <p> elements where the parent is a <div> element
Div > p
General Sibling - Selects any <p> elements where the child is sibling to a <div> element (CSS3 only)
Div ~ p
W3C Example
There are also capabilities to include more than one selector by using a combinator relational selector.
There are four CSS3 combinator relational selectors that can be used.
[First Bullet] The first combinator is a descendant selectors. The descendant selector selects all element that are descendants of a specified element. The following code would select all <p> elements inside <div> elements.
[Second Bullet] The next conbinator is an Adjacent Sibling selector. The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Sibling elements must have the same parent element, and "adjacent" means "immediately following". The following code would selects all <p> elements that are placed immediately after <div> elements
[Third Bullet] The next conbinator is a Child selector. The child selector selects all elements that are the immediate children of a specified element. The following code would select all <p> elements that are immediate children of a <div> element.
[Last Bullet] The last combinator is a General Sibling selector. The general sibling selector selects all elements that are siblings of a specified element. The following code would select all <p> elements that are siblings of <div> elements.
[First Button - Go to W3C Website]
Now let see how this work in practice. We’ll go over to the W3C site and try it out.
In the first example we have a combinator that is a descendant selector. Notice that in the style section the div p code changes the background-color to yellow. And over here in the results all the paragraphs of the div tag have a background color of yellow. If we were to add another paragraph to the div like this ……. And then resubmit it, the results if four paragraphs that have the background color of yellow.
In the next example we see the effect of using a Child conbinator selector. Notice that in the results on the first two paragraphs have the background color of yellow.
In the next example we see the effect of using an Adjacent Sibling conbinator selector. Notice that in the results the first paragraphs after the div tag is stylized with a background color of yellow.
In the last example we see the effect of using an General Sibling conbinator selector. Notice that in the results the first and second paragraphs after the div tag is stylized with a background color of yellow.
[Minimize Browser]
Now try these for yourself.
Once you have completed this exercise come back a restart the video.
9/20/2018
Copyright © Carl M. Burnett

15. Combination of Selectors
Class within Element
ul.speakers
Multiple Selectors
h1, h2, h3
Attribute Selectors
*[href]
a[href]
input [type=“submit”]
There are times when you will want to combine selectors. To do that there are many methods to accomplish this CSS coding.
[First Bullet] The first is to combine a HTML element with a specific class. In this example a unordered list element that has a class name of “speakers” is combined to allow the CSS to stylized only the UL tag within a class of speakers.
[Second Bullet] You can also combine multiple HTML elements into one selector. In this example the h1, h2, and h3 tags are combined. The rule to do this is to ensure each tag is separated with a comma.
[Last Bullet] Another combination method that can be used is to specify a HTML element attribute and select the attribute to be stylized.
In this example we use a global selector that only targets href attributes. In this case, only hyperlink references would be stylized.
In the next example only a anchor tag HTML element with a href attribute would be stylized.
And in the last example any input element or button with the type value = to submit would be stylized.
9/20/2018
Copyright © Carl M. Burnett

16. CSS Pseudo-Class Selectors
Syntax –
Selector:pseudo-class {
property:value; }
Selector.class:pseudo-class {
property:value; }
Selector
Example
Description
:link a:link Selects all unvisited links
:visited a:visited Selects all visited links
:active a:active Selects the active link
:hover a:hover Selects links on mouse over
:focus a:focus Selects the input element which has focus
CSS pseudo-class selectors are used to add special effects to some selectors. Classes represent conditions that apply to the elements on a web page.
The syntax for a pseudo-class selectors begins with the HTML selector followed by a colon, then the pseudo-class and then the property and value you want to set.
This can also be done for a .class. The syntax for a .class pseudo-class selectors begins with the HTML selector and the class followed by a colon, then the pseudo-class and then the property and value you want to set.
So let take a look at the CSS pseudo-class selectors.
The first is the link selector. This selects all unvisited links.
The next is the visited selector. This selects all visited links.
The next is the active selector. This selects the active link.
The next is the hover selector. This selects links on mouse over.
The last is the focus selector. This selects the input element which has focus.
9/20/2018
Copyright © Carl M. Burnett

17. CSS3 Pseudo-Class Selectors
Example
Description
:first-child a:first-child Selects every <p> elements that is the first child of its parent
:last-child a:last-child Selects every <p> elements that is the last child of its parent
:only-child a:only-child Selects every <p> elements that is the only child of its parent
W3C Example
CSS3 pseudo-class selectors are used to refer to specific relationships.
Let’s take look at each one of these selectors.
The first-child pseudo-class selector selects every first child of its parent.
The last-child pseudo-class selector selects every last child of its parent.
The only-child pseudo-class selector selects the only child of its parent.
The syntax that is used is the same syntax that is used for CSS pseudo-class selectors.
[First Button - Go to W3C Website]
Now lets take a look at these selectors in action.
Let’s scroll down to the Anchor pseudo-classes example and launch the “try it yourself”.
In the code window you see the style rule in the head section of the document. The style rules assign a different color to a links based on its action.
When we see what happens in the results page we can see the link is red. If we hover over it, it changes to purple and if we activate it, it changes to blue.
Once the link had been activated it becomes green which is the visited color.
If we go back to the exercise page and scroll down there are four additional exercises that provide examples of CSS3 examples. There are three examples of the first-child pseudo-class selectors and one example of the language pseudo-class selector.
[Minimize Browser]
Now try these examples out for yourself.
Once you have completed this exercise come back a restart the video.
9/20/2018
Copyright © Carl M. Burnett

18. CSS Pseudo-Element Selectors
W3C Example
Syntax –
Selector::pseudo-element {
property:value; }
Selector.class::pseudo-element {
property:value; }
Selector
Example
Description
::first-letter a:first-letter Selects the first letter of every <p> element
::first-line a:first-line Selects the first line of every <p> element
::before a:before Inserts content before every <p> element
::after a:after Inserts content after every <p> element
CSS pseudo-element selectors are used to select specific portions of text for stylization.
The syntax for this CSS code is almost identical to the pseudo-class code.
The syntax for a pseudo-element selectors begins with the HTML selector followed by a double colon, then the pseudo-element and then the property and value you want to set.
This can also be done for a .class. The syntax for a .class pseudo-element selectors begins with the HTML selector and the class followed by a double colon, then the pseudo-element and then the property and value you want to set.
[First Button - Go to W3C Website]
Now, lets take a look at the CSS pseudo-element selectors.
The first-letter pseudo-element selector selects the first letter of its parent.
The first-line pseudo-element selector selects the first line of its parent.
The before pseudo-element selector can be used to insert some content before the content of an element.
The after pseudo-element selector can be used to insert some content after the content of an element.
Now lets take a look at these selectors in action.
The first-letter and first-line have specific properties that can be used to stylize the text or line.
The properties that can be applied to the first-line are listed here.
And the properties that can be applied to the first-letter are listed here.
If you scroll down a little further you see two additional examples of the before and after pseudo-element selectors.
[Minimize Browser]
Now try these examples out for yourself.
Replace some of the properties and values for the first-letter and first-line pseudo-element selectors.
Also try the exercises for the before and after pseudo-element selectors.
Once you have completed this exercise come back a restart the video.
9/20/2018
Copyright © Carl M. Burnett

19. Working with Text Font Families Serif – Times New Roman
San Serif - Arial
Monospace – Courier New
Cursive – Lucida Handwriting
Fantasy - Impact
The font family of a text is set with the font-family property. There are many different types of font families.
This list includes Serif, Sans Serif, Monospace, Cursive and Fatasy font families.
When you define a font family to be used in a web page there should be several font names as a "fallback" font for the page. If the browser does not support the first font, it tries the next font. Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
9/20/2018
Copyright © Carl M. Burnett

20. How to Specify a Font Family
font-family: Arial, Helvetica, san-serif;
font-family: “Times New Roman”, Times, serif;
font-family: “Courier New”, Courier, monospace;
Web Safe Font Combinations
W3C Example
The way you specify the font family you would like to use is to declare the primary font you want, then a secondary or third font and then the font family.
[First Bullet]
In this example we are declare two fonts to be used. The first is Arial, then Helvetica, and then the font family. In the case, san-serif.
[Second Bullet]
In the next example we declare a serif font family.
[Last Bullet]
In the last example we declare a monospace font family.
[First Button - Go to W3C Website]
If you’re not sure about the combinations you should use to declare a font family you can use this website to see what are web safe fonts to use. Here they identify San-Serif font families, Serif font families, and Monospaced font families.
In this example we have a stylization rule that uses a pseudo-class to define the font family. Two families have been defined by class. The classes are serif and sanserif. Each class is further defined by fonts to be used in the font family.
In the HTML code for the web page the classes are used to stylize each paragraph by font family.
Now replace one of the font families with another font family and see the results. You can also add another monospace font family if you want.
[Minimize Browser]
Once you have completed this exercise come back and restart the video.
9/20/2018
Copyright © Carl M. Burnett

21. How to Specify a Font Size
font-size: 12 pt;
font-size: 150%
font-size: 1.5 em;
You can also specify the font size of a font. The size can be an absolute size like 12 points or pixels or it can be specified in relative terms. When specifying in relative size we use a percentage.
This enables the font to size itself based on the device that will display the web page.
9/20/2018
Copyright © Carl M. Burnett

22. Other Font Styling Properties
CSS Font Styling Properties
font-style: normal | italic | oblique | initial | inherited
W3C Example
font-variant: normal | small-caps | initial | inherited
CSS Font Variant Properties
font-weight: normal | bold | bolder | lighter | number | initial |
inherited
CSS Font Weight Properties
There are other font styling properties that can be used to stylize a font.
[First Button - Go to W3C Website]
The font styling properties are listed for you here. One of the items you need to check is the version of browser supports this CSS font styling rules. Listed here are the versions of the major browsers and what version support font styling using these properties.
You can also experiment with the “Play It” feature to see how the font changes look in different browsers.
[Minimize Browser]
[Second Button - Go to W3C Website]
The font variant is another font property that can be specified in CSS. Again, one of the items you need to check is the version of browser to see if it supports this CSS font variant styling rules.
You can also experiment with the “Play It” feature to see how the font variant changes look in different browsers.
[Third Button - Go to W3C Website]
You can also specify the font weight properties. Also check is the version of browser to see if it supports this CSS font weight styling rules.
[Exercise Buttons]
There are three exercises you can do to make changes to font style, font variant, and the font weight properties.
Once you have completed these exercises come back and restart the video.
9/20/2018
Copyright © Carl M. Burnett

23. Indenting and Aligning Text
CSS Text Align Properties
text-align: center | right | left
W3C Example
text-indent: length| % | initial | inherited
CSS Text Indent Properties
vertical-align: length | % | baseline | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherited
CSS Vertical Align Properties
There are also text alignment styling properties that can be used to align text.
The text align properties are listed for you here. One of the items you need to check is the version of browser supports this CSS text alignment rules. Listed here are the versions of the major browsers and what version support text align styling using these properties.
You can also experiment with the “Play It” feature to see how the text align changes look in different browsers.
The text indent is another text alignment property that can be specified in CSS. Again, one of the items you need to check is the version of browser to see if it supports this CSS text indent styling rules.
You can also experiment with the “Play It” feature to see how the text indent properties look in different browsers.
You can also specify the vertical alignment of images using the vertical-align properties. Also check is the version of browser to see if it supports this CSS vertical-align properties rules.
You can also experiment with the “Play It” feature to see how the image vertical-align properties look in different browsers.
There are three exercises you can do to make changes to text alignment, text indent, and image vertical-alignment properties.
Once you have completed these exercises come back and restart the video.
9/20/2018
Copyright © Carl M. Burnett

24. Decorating Text Text-transform Properties W3C Example
text-transform: none | capitalize | uppercase | lowercase | initial | inherited;
Text-transform Properties
W3C Example
text-decoration: none | underline | overline | line-through | initial | inherited;
Text-decoration Properties
text-shadow: h-shadow | v-shadow | blur | color | none | initial | inherited;
Text-Shadow Properties
There are also text transformation properties that can be used to transform text.
[First Button - Go to W3C Website]
The text transformation properties are listed for you here. One of the items you need to check is the version of browser supports this CSS text transformation rules. Listed here are the versions of the major browsers and what version support text transformation using these properties.
You can also experiment with the “Play It” feature to see how the text transformation changes look in different browsers.
[Minimize Browser]
[Second Button - Go to W3C Website]
The text decoration another text property that can be specified in CSS. Again, one of the items you need to check is the version of browser to see if it supports this CSS text decoration styling rules.
You can also experiment with the “Play It” feature to see how the text decoration properties look in different browsers.
[Third Button - Go to W3C Website]
You can also specify the text shadow using the text shadow properties. Also check is the version of browser to see if it supports this CSS text shadow properties rules.
You can also experiment with the “Play It” feature to see how the text shadow properties look in different browsers.
There are three exercises you can do to make changes to text transformation, text decoration, and text shadow properties.
Once you have completed these exercises come back and restart the video.
9/20/2018
Copyright © Carl M. Burnett

25. Image Floating Properties
float: none | left | right | initial | inherited;
Image Floating Properties
W3C Example
There are also image floating properties that can be used to specify whether or not a CSS element box should float.
[First Button - Go to W3C Website]
The image floating properties are listed for you here. One of the items you need to check is the version of browser supports this CSS image floating rules. Listed here are the versions of the major browsers and what version support image floating using these properties.
You can also experiment with the “Play It” feature to see how image floating properties changes look in different browsers.
[Minimize Browser]
There is an exercise you can do to make changes to image floating properties.
Once you have completed these exercises come back and restart the video.
9/20/2018
Copyright © Carl M. Burnett

26. Student Exercise 3 Complete Exercise 4-1, page 164
The basic.html file listed in Exercise 4-1 is located in the templates folder on your developmental site.
Students will upload test files to live site.
Students will preview in browser test files.
Download link for files for Exercise 4-1 on website
9/20/2018
Copyright © Carl M. Burnett

27. Class Review Next – Session III
How to use CSS to Format the Elements of a Web Page
CSS with HTML Semantic Tags
How to Specify Measurements and Colors
Code Selectors
Working with Text
Next – Session III
Chapter 5 - How to Use the CSS Box Model for Spacing, Borders, and Backgrounds
Welcome back.
This completes the fifth and final exercise of Chapter 4.
The next session is session 3. We will cover chapter 5 - How to Use the CSS Box Model for Spacing, Borders, and Backgrounds
Thank You
9/20/2018
Copyright © Carl M. Burnett