Skip to content

A2 - Intro to CSS

CSS, which stands for Cascading Style Sheet, is a language used alongside HTML to add just about every visual effect imaginable to our web pages.

For a demonstration, do the following:

  • Run update within your Google Drive folder for this class to download the new files

  • Open Visual Studio Code

  • Open a2-demo.html and also open its live preview. While the live preview should look a lot different than assignment #1, the only difference in the HTML file is the addition of this line (it's the fifth line from the top): 

    <link rel="stylesheet" href="a2-demo.css">
    What this line does is tell the web browser to look for the file a2-demo.css for instructions on how to style the web page.

  • Next, open the file a2-demo.css. It has five sections, each described by a comment above it (comments in CSS are enclosed in /* ... */ and are ignored by the web browser - their purpose is to help describe the code to someone reading it).

  • Inside each section are lines of the form

    property_name: value;
    We'll go through this together in class, but you may be able to understand some of it just by reading it through. For example, the first line within the body section is: 
    color: gold;
    This tells the browser that all text within the document body should be gold.

Reference for CSS

A good place to go for beginners is here.

While you certainly don't need to know all the details, these are good pages on this site to look at:

If you want help on a specific property name you see, it is useful to Google css followed by the property name. For example, a web search for css text-decoration will provide detailed information.

Tip

Visual Studio Code will help you by providing a list of valid values for a property name. Try erasing the value beside one of the properties, so you're left with something like this:

font-weight:

Then press Ctrl+Space in the blank space to the right of this to bring up a suggestion box.

Your Task

  1. Close all open documents in Visual Studio Code.

  2. Open a1.html and also open its live preview.

  3. Insert the following line into a1.html after line 4 (with the <title> tags): 

    <link rel="stylesheet" href="a2.css">
    Your song lyrics should now be styled in the same way that my demo was.

  4. Open a2.css, and modify the values to customize the look to your liking.

  5. As an extension, you could look through the documentation linked above for new properties to add.