Link CSS files to HTML Document
  1. Open up the index.html file
  2. Add this code to the index.html file within the <head> tag:
    3. 
<head>
<meta charset="UTF-8">

<title>Color Website | Home</title>

<!--This code links external CSS files to this document-->
<link href="css/mobile_styles.css" rel="stylesheet" type="text/css">
<link href="css/tablet_styles.css" rel="stylesheet" type="text/css">
<link href="css/desktop_styles.css" rel="stylesheet" type="text/css">
<link href="css/main_styles.css" rel="stylesheet" type="text/css">

<!--All code above the closing HEAD will NOT be visible-->
</head>

    The code references the exact names of the files we created, as well as references the location of those files:

  3. Make sure all of your files and folders are named correctly. Save all files.
  4. If you haven't already, make sure you have changed the title to an appropriate (unique) name.

    5. The CSS you just created...EXPLAINED

    We included Classes to the CSS you just wrote. Classes can be applied to many objects in an HTML document, while ID tags that are used for div(s) can only be applied to one (1) ID per HTML page.

    For example

    img {max-width: 280px; max-height: 280px;}

    This style applies to all images (img) in that HTML page.

    #footer img {width: 60px; height: 60px;}

    This style applies to all images (img) within the #footer ID in that HTML page.

    p {font-family: Times, “Times New Roman”, serif; font-size: 1em; line-height: 1.2em; color: #000000;}

    This style applies to all text in a paragraph (p) unless a different CSS Selector specifies different declarations in that HTML page.

    a This style applies to all links (a) unless a different CSS Selector specifies different declarations in that HTML page.

    a:hover This style applies to all links (a:hover) when they are hovered over unless a different CSS Selector specifies different declarations in that HTML page.

    ul This style applies to all unordered lists (ul) unless a different CSS Selector specifies different declarations in that HTML page.

    li This style applies to all list items (li) unless a different CSS Selector specifies different declarations in that HTML page.

    nav li a:hover {background-color:#373232;}

    This style applies to all list items, that are links in the #nav ID when you hover over them.

    .nav_color1 {background-color: #ED1515;}

    This style can be applied to one navigation link to make the background a unique color.

    .nav_color3 {background-color: #FCCD08; color:black;}

    This style can be applied to another navigation link to make the background a unique color and the text color “black”.