WDD 130: Web Fundamentals

W02 Learning Activity: An Introduction to CSS

Overview

CSS (Cascading Style Sheets) is a stylesheet language that defines the style and presentation of an HTML document. CSS rules select elements from the document and contain style and layout declarations.

Prepare

Watch the following video:

CSS Syntax

CSS rules are made up of a selector and a declaration block { }. The selector is the HTML element(s) you want to style and the declaration block contains one or more declarations separated by semicolons (;). Each declaration includes a CSS property name and a value, separated by a colon (:). The declaration block is enclosed in curly braces.

CSS Rule Example

The following CSS rule selects all the <h1> elements and sets four properties:

• the background color of all the <h1> elements to dark blue
• the text color of the content of all the <h1> elements to white
• padding or space around the text content of 16 pixels
• the text is aligned to the center of the <h1> block

h1 {
  background-color: darkblue;
  color: white;
  padding: 16px;
  text-align: center;
}

Here is how an <h1> with this style renders on the page:

WDD 130: Web Fundamentals

Activity Instructions

In this activity, you will add some style declarations to your course home page. Currently your home page, index.html, has default styling applied by the browser that renders the page. For example the <h1> element is styled as larger and bolder. In this activity, we will apply custom styling.

Write some CSS

1. Open the styles.css file located in the styles folder of your wdd130 folder.
2. Add the following CSS rules:

   nav {
     background-color: darkblue;
     padding: 10px;
   }

   This CSS rule selects the <nav> element and applies two style declarations.

   1. The background color will be the color "darkblue", which is a valid, named color.
   2. Padding, or area between the content and border is set to 10 pixels for readability.

   nav a {
     color: white;
     display: block;
     padding: 20px;
   }

   This CSS rule selects all the <a> (anchor / link) elements in the HTML that are inside the <nav> element and applies the following declarations:

   1. The text color will be white.
   2. The display will change from the default of inline to block.
   3. Each anchor tag will have padding of 20 pixels.

   h1 {
     color: darkblue;
   }

   This CSS rule selects the <h1> (heading 1) element and applies the following declaration:

   1. The text color is set to darkblue.

   img {
     width: 150px;
     height: auto;
     border: 1px solid black;
     padding: 2px;
     box-shadow: 0 0 30px gray;
   }

   This CSS rule selects all the <img> (image) elements and applies the following declarations:

   1. A set width with a height that will adjust dynamically to fit the image's aspect ratio.
   2. A border shorthand that sets the width, type of border, and color of the border.
   3. Padding between the image and the border.
   4. A box shadow around the image border with zero offset and a 30px blur in gray.

   p {
     padding: 10px;
   }

   This CSS rule selects all the <p> (paragraph) elements and applies the following declaration:

   1. Padding between the paragraph content and the border is set to 10 pixels.
3. Be sure to save your styles.css changes.

Link the CSS file to the HTML page

1. Open the index.html file and add the following line to the end of the <head> section of the HTML document right before the </head> ending tag.

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

2. Test the application of the style to your homepage by using Live/Five Server. To do this, right-click the file name in the Explorer Panel in VS Code and select Open with Live/Five Server.
3. Make corrections if needed.

Publish and Test

1. In the VS Code Source Control area, publish/upload these additions and changes by committing with a message and syncing to your wdd130 GitHub Pages remote site.

   Publishing your activity work is good practice, and repeating the steps will make the process routine. The commit message gives the change some context and does not need to be overly detailed.

2. Open up your GitHub Pages rendered URL to test the page in your browser.