Computer Science 318

Fundamentals of Web Design

Lab 03 Cascading Style Sheets



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.

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


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

h1, h2, h3{

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

main p{

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


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

h2 + p{

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 defines the font color.

Four common value types for this property:



Background-color defines the background color of the selector.

Four common value types for this property:


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.



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

Values for font-size:


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.


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


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




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:



Sets the horizontal alignment of block elements

Values for text-align:


    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.

Values for Margin:


    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.

Values for Padding:



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

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


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


p{ color:red; }


Try changing the color values in the CSS below.


<h3>Congratulations</h3> <h4>You Win</h4> <p>Claim your prize below</p> <a href="">Your Prize</a>


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


Try changing the values of the background colors below.


<h3>Congratulations</h3> <h4>You Win</h4> <p>Claim your prize below</p> <a href="">Your Prize</a>


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); }


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.


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


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


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

Couple of things to check in GitHub Desktop.

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.



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

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



margin - Use rem for the value's unit

padding - Use rem for the value's unit

Final Steps

Validate your HTML.

Lint your CSS at

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.