Learn Web Design!

Part 2: CSS and Hypertext References

Cascaded Style Sheets (CSS)

CSS files will let you style your HTML content in various ways. You can change the position, size, color, and other aspects of your content. Some very common CSS attributes to play with are:

  • padding (padding-left padding-right padding-top padding-bottom)
  • margin (margin-left margin-right margin-top margin-bottom)
  • color, font-size and font-family
  • background-color
Let's revamp that index.html file! Replace the current content with this code block: 

<!DOCTYPE html>
<html>
 <head>
    <link rel="stylesheet" href="css/style.css"></style>
  </head>
  
  <body>
    <h1>Hey World!</h1>
    <p class="make-me-huge">Large text</p>
    <p class="make-me-centered">Centered text</p>
    <p class="make-me-huge make-me-centered">Large centered text</p>
    <p class="make-me-red make-me-centered">Red Centered Text</p>
    <a href="#greeting">Greeting</a> Jumps to an element in the same HTML file with a specified ID<br>
    <a href="http://google.com">Google</a> Link to an absolute URL<br>
    <a href="test.html">Visit my other page!</a> Link to another HTML file stored locally

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <p id="greeting">Hey there, scroll up!</p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 </body>
</html>

Now with your text editor, make a new file called 'styles.css' in your 'css' folder.
In that .css file, add this content: 

h1 {
  color: green;
}

.make-me-red {
  color: red;
}

.make-me-huge {
  font-size: 40px;
}

.make-me-centered {
  text-align: center;
}

#greeting {
  text-align: right;
  color: gray;
  font-weight: 700;
  font-size: 40px;
}

Lastly, create a file name 'test.html' in your root folder.

As you can see by opening the 'index.html' in your browser, CSS files style your content, while hrefs link other files and web pages to your HTML page. Classes and IDs are used to specify which content get affected by the stylesheets. IDs must be unique (IDs in the same HTML file must be different) while classes can be applied to multiple parts of your HTML. The format is '.yourclasshere' and '#youridhere' in regards to setting up your CSS files.

Images

Images can be included into your web page in a similar manner. As with HTML files/websites, you can include images you have locally, or images already available on the Internet by copying the URL. Instead of 'href', the attribute is called 'src'. 

<!--PNGs and GIFs are also allowed--> 
<img src="img/your_image.jpg">
<!--or-->
<img src="http://lorempixel.com/400/200/">

Recap

  • CSS styles your HTML
  • Classes and IDs declare which elements are styled and how
  • Classes can be casted on multiples elements in the same HTML file
  • A particular ID may only be used on one element in an HTML file
  • href links CSS and HTML files to your page
  • href can also jump to an element with a specific ID
  • You can link both local HTML files and ones already on the internet
  • Same story for images, except src is the attribute, not href