Exercise 2: CSS Basics

CSS Styling and Web Fonts

Using external CSS you will style the HTML elements of your sandbox web page. You will work with layout on the next exercise. The page will probably still be hideous. (:

1. Open a new document in Visual Studio Code.

2. Before you begin, save the file in your 360 site root folder and name it stylesheet.css

3. Open the index.html file and link the stylesheet.css to it within the <head> of the document:

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

4. In the stylesheet.css file, apply all of the following styles to the HTML elements in your webpage. (Search for the following required properties on W3Schools CSS Properties to see the possibilities and proper syntax. You can also reference this Cheat Sheet.)

W3Schools CSS Syntax help

Example syntax on external css document:

body {
background-color: #00ff00;
font-family: 'Roboto', sans-serif;
}

TEXT-RELATED STYLES (can apply to any element that has type in it) 

  1. font-family (choose a web font and add some backups separated by commas. see help at bottom of page for adding web fonts.)
  2. font-size (only use em units for practice. It is based upon the default  font size of the parent element. The default body size is 16px. 16px=1em, 32px=2em)
  3. color (use RGB or Hex, examples: rgb(0,0,255) or  #00ff00 )
  4. line-height (use a number that will be multiplied with the current font-size to set the line height. Example would be 1.5 or 2. )
  5. text-align 
  6. text-transform 

LINK-RELATED STYLES (apply to anchor tags)

  1. text-decoration (you can remove the underline from anchors with this. This can also be used on basic text.)
  2. (the following 4 states of an anchor tag must be in the following order for link’s hover state to work)
    1. a:link  (the way a link looks on the page originally)
    2. a:visited (the way a link looks after it has been clicked and visited)
    3. a:hover (the way a link looks when being hovered)
    4. a:active (the way a link looks while being clicked)

LIST-RELATED STYLE (apply to unordered or ordered lists)

  1. list-style-type (you can choose the type of bullet point or have none)

DIVISION or SECTION-RELATED STYLES (can apply to divs, nav, header, footer, or the entire body a.k.a. full visual page)

  1. width (only use % to practice)
  2. height (only use % to practice)
  3. padding (only use % to practice)
  4. margin (only use % to practice)
  5. border-style (must choose the style first or the border won’t show up)
  6. border-width (use pixels for borders since they aren’t relative usually)
  7. border-color (use RGB or Hex) 
  8. background-color (use RGB or Hex)
  9. background-image (set up the correct path from this css document to the image.) example:   url("images/paper.gif");
  10. background-repeat (choose if you want it to repeat or not)

WEB FONT INCLUSION

GOOGLE FONTS

Customize your website by adding a web font using Google Fonts.

Go to fonts.google.com and click on the font family you wish to use. Then click on Select This Style next to the fonts you want. Click on the top right icon for “View your selected families.” A side panel should slide out, copy the link code into the head of your HTML document. It should look something like this:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

Then copy the provided CSS from the same Google panel and paste it into your external CSS document. This will be your font-family for whatever HTML element you wish to style. Here is an example:

body { font-family: 'Roboto', sans-serif;}

ADOBE TYPE KIT

Go to https://fonts.adobe.com/fonts. Click on a typeface of your choice. On the top right of the typeface page – click on “Add to Web Project”. Choose a web project to add it to or make a new one. Doesn’t really matter what it is – you are just trying to copy the code in the next step. Click Save. Copy the provided code in the <head> of your html document.

example: 

<link rel="stylesheet" href="https://use.typekit.net/drh2ufi.css">

Then add the appropriate font family in your CSS document.

example:

font-family: new-order, sans-serif;
font-weight: 400;
font-style: normal;