CS2 Lab 3 2024, CSS 🃏

CS2 2024

Due Date: Thursday, October 17, 2024

Need help? Remember to check out Edstem and our Website for TA help assistance.

Important Note: This lab has a larger amount of background and introduction information as compared to previous labs. As always, we recommend that you read through everything and refer back to it as you complete the tasks.

Lab Goals 🎰

We’ve already learned how to use HTML, a markup language for describing how content on web pages should be laid out. However, you might have noticed that the pages you created looked like they came from the early 90s. This week, we’re going to continue working with HTML, but this time we’re going to do it with style. It’s time for CSS!

Background 🎰

Be sure to read all background notes, as they are vital to do the assignment.

But wait a second…what is CSS?

CSS (Cascading Style Sheets) is the modern way to style a web page. If you want to color some text, change the position of a link, or even change the cursor when you hover over an image, you use CSS. Back in the 90s, people used HTML tags to change the font and color of a web page, but this resulted in a mess where the structure and information of a web page was mixed in with how it should look. The W3C (World Wide Web Consortium), which is the body that controls HTML and other web related standards, created CSS as a solution to more easily manage the look and feel of websites.

HTML acts as the important structural foundation of your site, while CSS works with the design.

Note: these are separate languages, and should be kept in separate files! While HTML files end in .html, CSS files end in .css.

CSS Selectors 🎰

An important concept within CSS is the selector. Selectors are used to determine what part of your web page you want a style to affect. They allow you to pinpoint elements both specifically or generally. While there are many different types of selectors, these three are the most common and most important to know:

Tag Name 🃏

This is the most general selector as it affects the type of tag selected. Each HTML element (for example, <h1>, <p>, <li>, <body>) can be selected with CSS by using the tag name without the angle brackets (< and >). For example, you can select all of the <p> tags in your webpage by using the element selector p.

Example: “Make all paragraphs red and right-aligned”

In the HTML file:







<p>
I love blackjack.
</p>

<p>
I love poker.
</p>

In the CSS file:




p {
    color: red;
    text-align: right;
}

This will make the font of the two paragraphs ("I love blackjack." and "I love poker.") red and right-aligned on your webpage.

Tag ID 🃏

This is the most specific tag. All HTML tags have a property called “id”. When using the id property with an HTML tag, it must be unique (ids used for tags must be different from other ids used with other tags).

To select a tag with the HTML ID my_id (id=”my_id”), write #my_id in your CSS file. The # lets the browser know that it is applying to an id rather than anything else. Select by ID when you need a style once only (any more than that and you’re repeating yourself when you could use a different selector instead).

Example: “Make the second paragraph of this page use a 35px font”.

In the HTML file:



<p id="second" >
Paragraph text here.
</p>

In the CSS file:



#second {
   	font-size: 35px;
}

This will set the text "Paragraph text here." to be 35px.

Class 🃏

This is the middle ground between tag ids and tag names. Classes allow you to apply styling to something more specific than a general name tag, but more general than an id tag. Different tags can use the same class.

You can select all tags in your HTML file that are members of a class (class="my_class") by writing .my_class (that's a period before “my”) in your CSS file. The . lets the browser know that it is applying CSS to a class. Select by class when you want to apply the same style to multiple elements that don’t have the same tag, or multiple elements with the same tag but not EVERY element with that tag.

Example: “Given a page with four headings (<h2> tags), make the first and third appear on yellow backgrounds.”

In the HTML file:















<h1 class="odd-heading">
    Heading 1
</h1>

<h2 class="even-heading">
    Heading 2
</h2>

<h3 class="odd-heading">
    Heading 3
</h3>

<h4 class="even-heading">
    Heading 4
</h4>

In the CSS file:



.odd-heading {
    background-color: yellow;
}

Note that the selector in the CSS file uses a . before its name (odd-heading) because it's a class.

Common CSS Properties

Property Name	Description	Accepted Values
`color`	Sets the text color	Color names (red, green, teal), RGB values (rgb(x, y, z), or hexadecimal values (#FFFFFF, #FFCC33)
`text-align`	Aligns text	left, right, center, justify
`font-size`	Sets the size of the text	Values in px or em (12px, 2em)
`font-weight`	Sets the weight of text	normal, bold, bolder
`text-decoration`	Sets decoration added to text	underline, overline, line-through, none
`font-family`	Specifies the font family for text	Generic font names or descriptions (“times”, “courier”, “arial”, “serif”, “cursive”)
`background-color`	Sets the background color of an element	Color names (red, green, teal) or hexadecimal values (#ffffff, #FFCC33)

Other CSS properties you might find interesting are those relating to an element’s position on a page (top, bottom, left, right, and position) and cursor (which specifies the type of cursor to display). A large list of CSS properties (and brief descriptions of what they do) can be found at W3Schools.

A Few (Small) Things to Remember about Coding in CSS:

Lines that set a property must end with a semicolon (;) in CSS.
Styles are inherited by everything within a tag, unless overridden by a more specific style - so styles defined on the <body> tag will be applied to everything on your page unless otherwise specified.

Tasks 🎰

Setup 🃏

The lab is broken down into two main tasks: reading and writing.

Task 1 Use this sample HTML and CSS to answer the 7 questions below (note, you can just write down the answers to these somewhere, as long as you will be able to show them to a TA):

Questions:

What color do you expect the body to be filled in with?
What font do you expect the h2 headings to have?
What color and size will the third paragraph's text be?
Do the paragraphs with class information have the same CSS?
In what way are IDs and classes different?
Whenever you hover over the h2 headings, they will change color. What color do they change to (https://www.w3schools.com/cssref/sel_hover.asp might be useful)?
Despite efforts to hide the second link, whenever you hover over the "hidden" link the cursor changes to a click cursor. What property of the cursor in the hidden-link class would you have to change (this requires you to look into: https://www.w3schools.com/cssref/pr_class_cursor.asp)?

Task 2 Double click your "CS2" folder on your desktop, and create a folder for "CSS". Then, create a new folder inside called "CSS Lab". All your files for the lab should live in this folder.

Task 3 Download the lab3.html for this lab, and put it in your "CSS Lab" folder you just created!

Task 4 Open up your "CSS Lab" folder by dragging the folder into Visual Studio Code, or by opening up Visual Studio Code, clicking "Open" under the "Start" header, and finding the folder in your file system.

Reminder: You can view your HTML page on a web browser by right-clicking the name of the HTML file and clicking Open With → Live Server, or by dragging the file into Chrome. Chrome is the recommended browser for this lab, and future projects.

Task 5 Make a style.css file in the same folder and link it to the lab3.html from above.

How do you make and link a CSS file?

In order to style our HTML page, we must create a new .css file, and then link it to our HTML page. To do this:

Create a file with the .css file extension (such as myFileName.css) in the same folder where your .html file is saved.
Inside the <head> tag of every HTML page you want to use that CSS for, add a link tag telling the browser to load your file and treat it as CSS.

<link rel="stylesheet" type="text/css" href="myFileName.css" />

Another Note: It is also possible to embed CSS in your HTML page directly with a <style> tag (see section Internal CSS). This is not recommended because it makes it hard for you to reuse the same CSS in multiple pages without having to copy-paste it.

View the 90s-looking website that we have given you in Google Chrome (remember you can open index.html using the Live Server extension in VSCode). Consider how you might modify the elements on this page to make it look more visually appealing. The rest of the lab will cover how to do this: Don has given you specific instructions to make his grand casino's website as aesthetic as possible! 🎰

Let's begin by looking at heading of the page, specifically the following block of code:






     <div>
        <div> <!-- This needs a CSS selector.-->
            <h1>Don's Grand Casino</h1>
        </div>
        <div id="title-bottom"></div>
    </div>

Task 6

Give the 1st nested div holding the h1 tag a selector. Think about what kind of selector you should use, id, class, or just select off of div. Don only wants this one div to be styled a certain way.

Once you add a selector to that div, add the selector to your CSS file, and give it the following properties:

Don wants the background color to be thistle.
Don wants the div to have some space inside, and make things less cramped. Give the div padding, a property used to add more whitespace within a div. A padding of value 1% should be good!
Don wants the h1 header within the div to be centered. Use the text-align property to center the text.

Task 7 Don needs you to change every h1 tag on his website. Add an appropriate selector to the CSS file, and give it the following properties:

A color with a value of purple.
A font-size of a value 5em.

Feel free to play around with font-sizes. em is a unit of measure that is calculated on the size of the window. What does 1em look like? What does 20em look like?

Task 8 Did you know that you can use divs to create colorful and decorative elements on the page?

Don set up a div, and gave it the id of title-bottom, but he needs you to give it some style.

Please add the selector title-bottom to the CSS file, and give it the following properties:

A height of 1vh.
A background color of purple.

What's vh? vh is another unit of measure based on the height of the window. 100vh will take up the whole window, while 50vh will take up 50% of the window.
There's a similar unit for width: vw. 100vw will give a tag the width of the entire page, while 50vw will give a tag 50% of the width of the whole page.

Checkpoint: Your page should now look like this:

Recall how to open an HTML page in the browser from the HTML Lab.

Let's look at this next block of HTML code, containing two divs, and some nested tags:


















 <div>
        <h2>About</h2>
        <p>Founded in 1999, Don's Grand Casino offers the most thrilling gambling experience in Rhode Island!</p>
</div>
<div>
        <h2>Games</h2>
        <ul>
            <li>
                Roulette
            </li>
            <li>
                Poker
            </li>
            <li>
                Slots
            </li>
        </ul>
</div>

Task 9 Don wants both of those above divs to have the exact same style.

Give both of those divs a CSS selector. Think: what selector should you add to the html code to make both divs follow the same style rules, without impacting other divs?

Add that selector to your CSS file, and give it the following properties:

background color of cornsilk
padding of 1%.

Finally, let's take a look at this section:

    <div>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/13-02-27-spielbank-wiesbaden-by-RalfR-093.jpg/640px-13-02-27-spielbank-wiesbaden-by-RalfR-093.jpg" />
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Gda%C5%84sk%2C_Poland_%28Unsplash_GikVY_KS9vQ%29.jpg/640px-Gda%C5%84sk%2C_Poland_%28Unsplash_GikVY_KS9vQ%29.jpg" />
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Slot_machine.jpg/640px-Slot_machine.jpg" />
    </div>

Task 10 Don needs these pictures fixed!

First, he wants them horizontally aligned.

Have you noticed that so far in HTML, it seems like everything is laid out vertically?
We're about to teach you one of the most powerful attributes of the CSS language!

Flex Boxes are attributes used to make divs lay things horizontally as opposed to vertically.

We can make a div a Flex Box by giving it the attribute display: flex;.

Give the div holding the three images a selector you find appropriate, add that selector to the CSS file, and give it the property needed to turn it into a flex box! You should now see the three images laid out horizontally on your browser!

Task 11 The images are way too big!

Add appropriate selectors to the img tags, and then add that selector to your CSS file.

Think, what tag can you use to be shared across three elements, and make the same changes?

You can choose how to size the images!

Two properties can be controlled: width and height. Remember we learned before that we can use px as a unit of measure, or vw for width and vh for height.

Size the images so that they visually look better on the screen.

Note: Something doesn't look right? Don’t forget to link the HTML page to the css! (See "Setting up a CSS file" above). You may find it necessary to add ID’s and/or classes to some of the provided HTML elements.

Hand-In 🎰

To Hand-In Lab 3:
Come to hours and show your TA two things for checkoff:

Your answers to the "reading" section.
Your stylized lab3.html and style.css.

Congrats! You just finished your CS2 CSS lab!

If you have any issues with completing this assignment, please reach out to the course HTAs: cs0020headtas@lists.brown.edu

If you need to request an extension, contact Professor Stanford directly: don.stanford@gmail.com