CS-318

Lab 03 Cascading Style Sheets

Goal

Continue practicing HTML
Understand the structure of CSS declarations
Style HTML elements with color, background-color, font-family, font-size, font-weight, text-align, margin, and padding

Learn

Cascading Style Sheets or CSS is a stylesheet language used to describe the presentation of a document written in HTML.

h1 {
    color: red;
    font-size: 5rem;
}

The example CSS is telling the browser to render the heading 1 the color red and 5 rems tall.

Anatomy of a CSS declaration, broken down.
Anatomy of a CSS Declaration

In order for a browser to render the HTML with custom styles, a link must be created between the HTML and CSS document. This is done with a <link> element in the <head>. A link element has two required attributes, a relationship attribute and hyperlink reference attribute.

The href attribute specifies the file path of the stylesheet.
The rel attribute specifies that the file's relationship to the HTML document is a stylesheet.

<link rel="stylesheet" href="styles.css">

CSS Selectors

Define the elements to which a set of CSS rules apply.

Selects all paragraphs on the page.

p{
   color:red;
}

Group Selector, selects all heading 1, 2, and 3 on the page.

h1, h2, h3{
    color:yellow;
}

Descendent Selector, selects all paragraph that are in the main element.

main p{
   color:blue;
}

Child Selector, selects only paragraphs that are immediate descenders of the main element.

main>p{
    color:purple;
}

Adjacent Selector, selects paragraphs that immediately follow a heading 2.

h2 + p{
    color:pink;
}

CSS Properties

CSS property anatomy
Anatomy of a CSS property

CSS properties consist of a property name, followed by a colon, then a value, and closed with a semi-colon.

Color

color:#fff;

Color defines the font color.

Four common value types for this property:

Predefined Color Name Values list of predefined values
Hex color codes are a hashtag followed by 6 numbers or letters
RGB colors are written at three sets of numbers (0-255) separated by commas
RGBA colors are the same colors as rgb but with alpha (opacity) included. They are written as three numbers (0-255), and a number (0-1, 1 is opaque ) separated by commas

Background-color

h1{
   background-color:blue;
}

Background-color defines the background color of the selector.

Four common value types for this property:

Predefined Color Name Values list of predefined values
Hex color codes are a hashtag followed by 6 numbers or letters
RGB colors are written at three sets of numbers (0-255) separated by commas
RGBA colors are the same colors as rgb but with alpha (opacity) included. They are written as three numbers (0-255), and a number (0-1, 1 is opaque ) separated by commas

Font-Family

font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

Specifies a prioritized list of one or more font family names and/or generic family names for the selected element. It is best to have a list of more than one font as not all browsers support all fonts. This will ensure your design will look good across all browsers.

Font-Size

font-size:small;
font-size:16px;
font-size:160%;
font-size:3em;
font-size:3rem;

Sets the size of the elements font. This property is also used to compute the size of em.

Values for font-size:

Absolute sizes: xx-small, x-small, small, medium, large, x-large, and xx-large
Percentages are relative to the parent element's font size. So if a paragraph tag is inside a main tag, and the main tags font-size is 100 pixels and you set the paragraphs font-size to 50%. It will be 50 pixels.
Pixels this is ideal when wanting to be pixel perfect, however different browsers and devices read them differently so proceed with caution.
EMs these are dynamic and like percentages are based on the relative font-size of the parent of the element.
- Browsers default to 16px equals 1em on the body tag
REMs are similar to ems and percentage in that their size is relative, but rems are only relative to the html root tag not the direct parent of a tag. Rems too default to 16px equal 1rem on the html tag.

REM VS. EM

Experiment
Try changing the em to rem on the paragraph. You should see the paragraph change dramatically in size from (2x24px)=50px to (2x50px)=100px. This happens because em uses the parent containers font-size (the <main>), then when you change to rem it uses the font size of the <html>. We will primarily be using rem in this class for the simplicity. When using em if you change a font-size on a parent container you could potentially ruin your initial CSS values.

HTML

<main> <p>This is a child</p> </main>

CSS

p{ font-size:2em; } main{ font-size:24px; } html{ font-size:50px; }

Preview

Font-weight

font-weight:bold;
font-weight:600;

Sets the weight (or boldness) of the font. The ability to bold or lighten fonts depends on the font you are using.

Values for font-weight:

Predefined values, bold or normal
100, 200, 300, 400, 500, 600, 700, 800, 900

Text-align

p{
    text-align:center
}

Sets the horizontal alignment of block elements

Values for text-align:

Left
Right
Center
Justify

Margin

p{
    margin:1rem;
    margin:1rem 2rem;
    margin:1rem 2rem 3rem;
    margin:1rem 2rem 3rem 4rem;
}

Sets the margin area (outside of the element) on all four sides of an element. Margin can be specified using one, two, three or four values.

One value applies to all four sides.
Two values applies to top and bottom, then left and right.
Three values applies to top, then left and right, then bottom.
Four values applies to top, then right, the bottom, then left (clockwise).

Values for Margin:

Percentages, are relative to the parent element's width. So if a paragraph element is inside a main element, and the main element's width is 100 pixels and you set the paragraph element's width to 50%. It will be 50 pixels.
Pixels.
Ems, these are dynamic and like percentages are based on the relative font-size of the parent of the element. Browsers default to 16px equals 1em on the body tag
Rems, are similar to ems and percentage in that their size is relative, but rems are only relative to the html root tag not the direct parent of a tag. Rems too default to 16px equal 1rem on the html tag.

Padding

p{
    padding:1rem;
    padding:1rem 2rem;
    padding:1rem 2rem 3rem;
    padding:1rem 2rem 3rem 4rem;
}

Sets the padding (inside the element) on all sides of the element. Padding can be specified using one, two, three or four values.

One value applies to all four sides.
Two values applies to top and bottom, then left and right.
Three values applies to top, then left and right, then bottom.
Four values applies to top, then right, the bottom, then left (clockwise).

Values for Padding:

Percentages, are relative to the parent element's padding. So if a paragraph element is inside a main element, and the main element's padding is 100 pixels and you set the paragraph element's width to 50%. It will be 50 pixels.
Pixels.
Ems, these are dynamic and like percentages are based on the relative font-size of the parent of the element. Browsers default to 16px equals 1em on the body tag
Rems, are similar to ems and percentage in that their size is relative, but rems are only relative to the html root tag not the direct parent of a tag. Rems too default to 16px equal 1rem on the html tag.

Practice

Experiment

Try using the different selectors formats to change the font color of specific elements.

Change the paragraph after the heading 1 to blue.
Change the paragraph in the div (this is a container element) to green.
Finally change the second heading 2 to purple.

HTML

<main> <h1>Heading 1</h1> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h2>Heading 2</h2> <h2>Heading 2</h2> <h3>Heading 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <div> <p>Massa vitae tortor condimentum lacinia quis vel eros. Duis at tellus at urna condimentum mattis pellentesque id nibh. Natoque penatibus et magnis dis parturient montes nascetur ridiculus mus. In iaculis nunc sed augue lacus viverra vitae.</p> </div> </main>

CSS

p{ color:red; }

Preview

Experiment
Try changing the color values in the CSS below.

HTML

<h3>Congratulations</h3> <h4>You Win</h4> <p>Claim your prize below</p> <a href="https://www.uwec.edu/">Your Prize</a>

CSS

h3{ color:red; } h4{ color:#00ff00; } p{ color:rgb(162, 205, 14); } a{ color:rgba(162, 205, 14, .5); }

Preview

Experiment
Try changing the values of the background colors below.

HTML

<h3>Congratulations</h3> <h4>You Win</h4> <p>Claim your prize below</p> <a href="https://www.uwec.edu/">Your Prize</a>

CSS

h3{ color:red; background-color:blue; } h4{ color:#00ff00; background-color:#bb007b; } p{ color:rgb(162, 205, 14); background-color:rgb(14, 62, 05); } a{ color:rgba(162, 205, 14, .5); background-color:rgba(14, 62, 05, .8); }

Preview

Experiment
Try adjusting the rem value on both padding and margin to see how it interacts within the space. Also, try adding more than one value to margin and padding to see how it is added to various sides of the element.

HTML

<p>The cow jumped over the moon</p>

CSS

body{ background-color:red; } p{ background-color:limegreen; margin:1rem; padding:1rem; }

Preview

Open GitHub Desktop (you may need to download the program again if the computers get wiped.)

Couple of things to check in GitHub Desktop.

Check to see if it says Pull Origin in the top right tab. If it does, click Pull Origin. Why? A pull occurs if you or a collaborator made a change to the repository and pushed the changes. ALWAYS MAKE SURE TO PULL BEFORE CODING!
If the computers were wiped you made need to reclone your repository to the computer.

With your cs-318 repository selected, Click open in Visual Studio code.

Create a new folder called lab03

Create a new file called index.html in the lab03 folder

Type a ! in Visual Studio Code. You should see a popup box. Hit enter. Your HTML document should be setup.

Hint: This will only work if the document is already saved as an html document.

VSC Shortcut

This lab is a pick your own topic lab. Select a topic that is interesting to you that you would like to make a web page about. You can use copy and images about the topic from other sources. This is not report you need to write, just an exercise on using CSS. So don't worry about copyrights.

Give your document a title

Create a new document in your folder. Give it the file name styles.css

In the head of your HTML document add the following <link> element to connect the CSS and HTML together.

<link rel="stylesheet" href="styles.css">

Use all of the HTML elements below to build a web page about your topic.

<header> - used for main navigation and topic

<main> - used for main unique content on a web page

<nav> - used for main navigation on a page

<h1> - most important heading

<h2> - second most important heading

<h3> - obviously the third most important

<a> - At least 1 anchor (you can link to an outside url about the topic)

<p> - At least two paragraphs. You can use a <br> tag to break up one <p> into multiple paragraphs.

<img> - At least 1 image

<ul> - unordered list with at least 5 items

<ol> - ordered list with at least 5 items

<li> - item within a list

Use all of the CSS properties below to style a web page about your topic. Use each property at least twice.

background-color

color

font-family - use any of the predefined values available in Visual Studio Code

font-size - Use rem for the value's unit

font-weight

text-align

margin - Use rem for the value's unit

padding - Use rem for the value's unit

Final Steps

Validate your HTML.

Navigate to W3C Validator
Select the validate by file upload tab at the top of the page

Lint your CSS at Jigsaw.w3.org

Now look at GitHub Desktop. You should see all of your files listed out in the left column.

GitHub Desktop files listed

Now you are going to commit your changes.

With all of the files checked. Fill out the Summary field in the bottom left and then click Commit to main.
Committing is staging the files, so they can be pushed to the repository hosted at GitHub.

GitHub Desktop Summary field.

Now you want to push your changes to the Repository. Now if you access the repository from another computer Lab03 will be there. After you push in the top right of the nav it should say "Fetch Origin" instead of "Push Origin"

GitHub Push Origin

Your are Done with Lab03

Are you someone who needs to double check that it worked? If you want to make sure the push was successful click on the "View on GitHub" button from GitHub Desktop. It will open up your repository in the browser. From there you should be able to see all of your files.

...What if I need to make a change after pushing?

So let's say you have already pushed but noticed an error. No worries, this is easy to fix.

In visual studio code make any changes you need to. Once you are done making corrections. Save.

Go back to GitHub Desktop. You should see your changes to the documents listed there.

GitHub fixing an error.

Fill out the Summary field again. I suggest saying what you fixed. For example: "Fixed paragraph error on Sea-Jellies"

Click "Commit to main"

Click "Push Origin" and you are done.