Unit04 Introduction to CSS

Overview

Now the fun part begins where you can add some color and style to your pages using an external CSS file. You will practice modifying the built in selectors like p and h1 as well as using classes to target various parts of your web page. You will learn to use font colors, spacing, font families, borders etc. Once you have added all the required CSS style information you will need to then use an FTP program to transfer your pages from your local computer to the web host computer. Be sure that you check your work on the server by opening your URL and clicking through your pages. What you see is what we grade. We will be checking your work using the w3c validator, so you should as well.

Vocabulary

CSS

Used to control a web site’s text color, background colors, borders, spacing, headers, links and positioning of elements.

Inline Style

Used within the HTML to apply a unique style for a single element. BAD idea!

Internal Styles

Used in the head of a web page to uniquely style a single page

External Style Sheet

One file controls the entire website, this is best practice.

Cascade Order

Controls which rule applies when there is a conflict. Levels of specificity.

Validation

Tools to insure that your CSS is correctly formed.

Tools

• Check your page using the Markup Validation Serivce
• Check your page with the W3C CSS Validator
• Check the color contrast of your site using another tool
• Check the color contrast of your site using the WAVE tool
• Use my Module 4 AutoGrader to check your own work before submitting.

Objectives

At the end of this module, you should be able to...

• Identify the three different ways to apply CSS (in line, head, external).
• Identify the benefits of an external style sheet.
• Create CSS that controls default HTML tags.
• Create CSS that controls classes.
• Add a Google font using an API.
• Identify and build a proper size touchable button.
• Style a border and border radius.
• Implement colors and background colors.
• Demonstrate design principles (Proximity, Alignment, Repetition, Contrast, Wayfinding, Visual Tangent).
• Validate your page with three different tools.
• Upload your pages to a server using FTP.

Tasks

• Read about Line That Up: Proper Alignment in Web Design by Carrie
• Read Web Style Guide: Navigation and Wayfinding by Patrick & Sarah
• Read three ways to insert CSS by w3schools
• Read CSS selectors by w3schools
• Read CSS Pseudo-classes by w3schools
• Read ID Selectors on w3schools
• Read class selectors on w3schools
• Read padding by w3schools
• Read margin by w3schools
• Read borders by w3schools
• Read color property on w3 schools
• Read CSS list-style-type by w3schools
• Read CSS units on w3schools
• Read font property on w3schools
• Read why use link over @import when referencing external fonts by Steve

Download

Watch

• Canvas Videos
• Watch 1600_4a-Unit Overview
• Watch 1600_4b-All About Color
• Watch 1600_4c-Typography on the Web
• Watch 1600_4d-Using CSS Selectors
• Watch 1600_4e-Wrap up CSS
• Watch 1600_4f-Follow Along Intro
• Watch 1600_4g-Setup Files
• Watch 1600_4h-Style the Header
• Watch 1600_4i-Style the Navigation Bar
• Watch 1600_4j-Style the Main Tag
• Watch 1600_4k-Style the Footer
• Watch 1600_4l-Upload
• Watch 1600_4m-Contrast
• Watch 1600_4n-Avoid these Problems

Assignment Example

View the index page example.

View the tools page example.

Assignment Checklists

Follow Along Activity(5 pts)

• Follow along with videos in this unit to create you own version of the "Torpid Traveler" Website.
• Rename the completed assignment folder as "04follow-along".
• Upload this folder to your GitHub account and make sure the link works.
• Submit a link to your site in Canvas.

Unit04 Introduction to CSS (10 pts)

Now that you have two linked pages, you are ready to add some styling. In this assignment you will attach an external style sheet to both HTML pages and write some CSS rules that make your page come alive. Remember the color scheme from unit 2. Well now it’s time to get those HEX numbers.

External Style Sheet

• External CSS attached using link

Font Family Use

Type is important as it sets the mood of your page. Instead of using with the default fonts on the end users system, let's try a Google font. NOTE: You are not allowed to use the Google Font Face "Oxygen" because that is the one I used in the example. Use the one from your design document.

• A Google font has been linked in the head of your document
• A CSS font-family property is present in the CSS file
• At least two different font weights are used
• At least two different font sizes are used

Styling Tags

Style basic HTML tags.

• Styling for the body tag is present
• Styling for the heading 1 tag is present
• Styling for the heading 2 tag is present
• Styling for the paragraph tag is present
• Styling for the navigation tag is present

Comments

Include CSS comments (different than HTML) in your style sheet.

• Include CSS comments in your style sheet

Styling Lists

Write style rules that alter the bullets displayed on your lists.

• Change the bullet type for a list
• Use padding and margin to style the lists
• Style the definition list

Borders

Please demonstrate you can use borders in your work by implementing the following.

• Style a border using (color, type, thickness)
• Add a border radius

Navigation

Turn the ul used for page navigation into a horizontal list.

• Flexbox is used to display menu items horizontally
• Default navigation link underline has been removed
• Insure menu items are at least 48 px tall
• Insure way-finding is working

Pseudo Classes

Add a pseudo class that affects the links in the content of your page.

• CSS incudes a hover state for the anchors

Use of Color

Please also include these additional things in the CSS of your document.

• Background color used
• Color used

Validation

Please insure your site passes both validation tests.

• CSS passes a validator
• HTML passes a validator

Upload to GitHub

Upload your assignment to a GitHub repository

• Create a folder called "04intro-css" and put the two html files inside it.
• Upload this folder to your "dwdd1600" repository.

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.

• Pass
• Fail