Project #3 - CSS (Cascading Style Sheets)

If you are new to CSS, this project may be more time-consuming for you than Project 2. There are many pages of lecture notes with links to online resources. You will need to allow time to visit these pages to get answers for the short answer questions. The online Lecture Notes and the W3Schools website should be relevant reference materials for this project.

You may need to take time to practice beyond what is required for the project. It is your responsibility to take the time necessary to become comfortable with the terminology and rules that are part of creating CSS code that follows standards to produce clean, valid coding. By the end of this project you should understand how to:

Lecture notes for activities can be found by visiting project instructions online from the class web page so you can click on these links:



Lab Activity

File Management:

Create a new folder. Name it: css

Copy your project1.html, project2.html, html5.html web pages and all of the images used in project 2 into your new css folder.

CSS coding to add formatting

Open a new document using your text editor program to create a new page that will be your external stylesheet. Save the new file into your css folder. Name it: style3.css

Link the external style sheet to your website

Add style rules to your External Stylesheet

Read the Lecture Notes for CSS to learn the terms for the different parts of CSS coding: selector, property, value, and declaration.

When learning how to create style rules, I recommend adding one property at a time, saving it to your stylesheet and then viewing the web page to see the effect. If your style rule names a default value, you will not see a change (Example: font-family has a default in most browsers to display Times New Roman, serif fonts). The style rules for this project are all tag rules, corresponding to a specific HTML tag element in your pages. Most of them have more than one declaration. After adding a style rule to your stylesheet, save the stylesheet and refresh your web page to see if the properties are displaying. Troubleshoot your code for accurate syntax if the properties do not display. See lecture notes for more details about CSS syntax. CSS syntax requires very strict adherence to proper spacing and punctuation. Read all the lecture notes to learn more about these requirements and what the coding represents.

See examples of coding in the lecture notes to help you understand the format and the way to include the declarations correctly.

On your stylesheet page, add style rules for the selectors and properties shown in the chart below. Shading in the table below has been added to help define the properties that go with each selector. For readability and easy editing, it is recommended to put each declaration of the style rule on a new line. It isn't required for valid coding, but it IS recommended and you SHOULD use this format for this course. Example of what the syntax looks like using a style rule with two declarations:

table {
font-family: Tahoma, Helvetica, sans-serif;
background-color: #FFFFFF;

}

Things that you should learn from the lecture notes and the examples will help you create accurate coding. For example: In the font-family value, the names of the font-families are separated by commas. All declarations end with a semicolon. In the margin value, the four values must be separated by a space and they must be in the proper order. The first value represents the top margin, the second value represents the right margin, the third value represents the bottom margin and the fourth value represents the left margin. Note that all values for margin settings include a number. If the number is anything except zero, it must also include a unit of measurement like em, px or %. The numeric value and the unit of measurement (em, px or %) must not have any space between them. Some of the numeric values in the table below for your style rules include decimal points. Be sure to include the decimal points in those values. It makes a huge difference when you say you want .25em of space or 25em of space. The "em" unit of measurement respresents the height of the letter M for the default font. 25em of space is the equivalent of 25lines of text. Using .25em as a measurement is the equivalent of 1/4 the size of one line of text. In the color codes given below, the color will not display if you forget to use the # with the number code. In all of the codes below, the " 0 " is the number zero (not the letter " o " ). For " accessibility " guidelines, you will notice that the " em " unit of measurement is used when the selector that is being formatted relates to text. The " px " unit of measurement is typically associated with graphic elements like images and borders. You will learn more about how these different units of measurement work as you continue through the course.

Use this table to determine the properties and values to include for each selector in your style rules for your style3.css stylesheet. Syntax has to be perfect for the style rule to work. Be sure to save your stylesheet after adding each rule and view your web page to see if each property has been applied.

When adding the style rules to your external stylesheet for this project, use the chart given below these instructions. Using the information from the chart:

Selector property value (and explanations)
body font-family Use a sans-serif font-family list. Include two font-family names plus the generic name in your font-family list. The two font-family names must both be from the sans-serif category. See Lecture Notes about Font Family and examples at W3Schools font page: http://www.w3schools.com/cssref/css_websafe_fonts.asp
margin 4em 15% 0 15%
background-color #D7DFDD
color #000000
(All zeros)
h1 text-align center
letter-spacing .25em
border-bottom 8px double #04665F
( The "0" in the color code is a zero.)
padding-bottom .3em
margin-bottom 2em
p line-height 1.25em
img border 4px solid #04665F
padding 15px
background-color #5E584E
color #FFFFFF
h2 margin-top 2em
color #04665F
background-color #FFFFFF
padding .4em
border-top 12px double #D7DFDD
border-bottom 12px double #D7DFDD
a color #000099
font-weight bold
background-color #D7DFDD
ul margin-left 5em
li list-style-type square
padding-bottom .3em
abbr border-bottom 2px dotted #000000

Validate your CSS code. Go to:

http://jigsaw.w3.org/css-validator/


Create an embedded style sheet

Open the web page (in your text editing program) that you created for project 1. (The one for Web Career Information)

Place your cursor in the <head> section of the page. On the line following the <link> tag, add the code required to insert an embedded stylesheet using the <style> </style> element. An embedded style sheet will only apply the style rules to the current page.

< style type=" text/css " >

</style>

Inside the <style> element, add one style rule to format the <img> element. Add three declarations to the style rule to include properties to set:

Save the page. View the page and compare how the "Next" button image looks different on this page. Embedded style rules listed in a <style> element apply to only the page they are on. Adding the <style> rules AFTER the <link> tag to the external stylesheet allows you to apply the external stylesheet and then overwrite the values for the img selector with the embedded style properties.


Project2.html page screenshot
This is provided so you know approximately what the formatting results of your pages should look like. (Line endings of text content will be different based on monitor size and screen resolution.) The formatting for the content on both pages should look similar to this page if the style rules are applied properly. Click on the thumbnail image below to view the full size view of the page.

Screenshot for Page 2

(Note how the "Next" button image is styled differently on the project 1 page because an embedded style rule is used in the head section to overwrite the style rule that is on the external stylesheet.)

screenshot

If your pages do not have the formatting, go back to your style rules and troubleshoot. If you need help, upload all of your pages and send me the URL of the page you have questions about. You must also ask a specific question and give details about what is happening that you don't understand. I will help you troubleshoot one error at a time. You must ask a specific question AND identify what code you want me to look at. If you send a request for me to " look over your code " without identifying a specific problem or presenting code for me to look at, I will send a reply email asking for more information. If you do not send the URL for me to be able to view your work on the server, I will not troubleshoot for you until you do send a URL. For example: If you notice that the CSS coding says your <h1> element should be centered and you are not seeing it centered in your page, you would tell me that and indicate what code you believe corresponds with the problem and send the URL so I can view ALL of your code. You should send something that looks like this for me to troubleshoot:

Problem code:
h1 {text-align=center;}

URL to view all code:
http://www.csit.parkland.edu/~login#/webcoding/project1.html

After being able to view your work and see your coding, I would indicate to you that the above code is not working because your syntax includes an equals sign where there should be a colon like this:

Corrected code:
h1 {text-align: center;}

Validate your web page using the W3C validator for HTML 5 and CSS.
If you don't understand validation errors listed, please let me know what validation error is listed FIRST on the errors list. Validation errors should be corrected and the page revalidated, one at a time.


More practice using CSS

After completing the style3.css stylesheet, use the Save As command to use it as a starting point for a new stylesheet.
Name the new stylesheet: changestyle.css

You will make some changes to the property values to change the look of the html5.html page that you have in your website.
Add a <link> element in the <head> section of your html5.html page to attach your stylesheet named: changestyle.css
Save your web page and view it in the browser to see the styles applied. Your page should look like your other pages at this point.

Screenshot for HTML5 page You will be changing some of the properties in your changestyle.css stylesheet to change the look of the html5.html page.
Click on the thumbnail

 

 

Open your changestyle.css stylesheet to make changes to it.

Color codes to be used include:

Gray = #CCCCCC
Gold = #FFCC33
Green = #006633image to the left to view the screenshot of the html5.html page to help determine the changes that need to be made in your style rules on your changestyle.css stylesheet. Tips are given below the screenshot to help you get started:

You will also need to change the padding for the level 1 heading to make it larger and even on the top and bottom. Change the style rule for the level 1 heading so it does not display with a border. Delete the words " Web Design" from this heading.

For the abbr style rule, make the border bigger and change the color to green.

Other style rules that will need changes to border, color, or background-color include: body, h1, h2, img, and a

(These colors will not pass the Juicy Studio color contrast check. Don't worry about that for this page.)


Upload files to server (after you receive feedback for Project 2)

Upload your css folder (which should contain the project1.html, project2.html, html5.html 4 image files, style3.css, and changestyle.css)
When uploading be sure that you do not put your css folder inside the webcoding folder. It should be copied to the server at the same level as the webcoding folder.
Your URL for this project should not include webcoding.


Submitting Project

Take Quiz 3 in Cobra.
Use the Dropbox for Lab 3 in Cobra to submit the URL of your page. With the Add File button, attach your style3.css stylesheet.

To determine your URL, remember that all URLs will begin with:
http://www.csit.parkland.edu/~yourusername#/
After the user name, you must add the name of the folder. After the folder name, you must add the name of the file.

Reminder:
If you are unable to successfully publish your web page to the CSIT server, please make a zip folder for all of the files for the project and send it to me as an attachment using your Parkland student email account to send to my rwhobrey@parkland.edu account (not Cobra). If you are having difficulty with the uploading procedure, you must make an appointment or stop by office hours to get help.