Normally, there's an ad running in this spot, but you're using an ad blocker. To help support our blog, which provides free tutorials for everybody, we just ask that you whitelist or follow us on facebook, twitter, or subscribe using the form to the leftabove. Thank you!

    Learning CSS for Designing Websites

    Now that we've learned the basics of HTML, we'll be learning CSS to give our website some style. It's important that you go through the prerequisites because you'll need an index.html web page to work with. If you're not interested in learning HTML, just download the complete source files from that tutorial.

    System Requirements

    • A 32-bit or 64-bit computer with at least 8GB of RAM. 16GB or more is recommended.
    • At least 50GB of free disk space.
    • A web browser.

    Source Files

    Download the complete working files, by clicking here.

    HTML and CSS Files

    After completing the steps in our HTML tutorial, we should have the following in front of us:

    ▸ my-first-html-website/
    ▾ my-first-html-and-css-website/
      ▾ css/
          style.css
      ▾ images/
          codebox_systems_blog_logo.png
        index.html
    ▸ my-first-html-css-and-js-website/
    

    In the source files, our index.html file now loads a separate CSS file. However, in the example here, we're going to add the CSS styles to the top of the page, so that we're able to make edits in the code window, below:

    Notice that we've added a <style> tag within the <head> tag. Remember, anything inside the <head> tag loads before the page is displayed, so all of the CSS will be processed before the contents are revealed to the user. There are actually four main methods for adding CSS to the page, which we go over in a separate article.

    For now, let's get an understanding of each CSS code block:

    CSS Basics

    For this tutorial, we'll be focusing on styling html elements by tagname. We will not be defining CSS classes or ids to uniquely target elements. Don't worry about what any of that means yet.

    CSS Inheritance

    html {
      padding: 0;
      margin: 0;
    }
    

    We start by setting the padding and margins for the top level html tag. CSS styles are heirarchical, so anything you add to the parent elements get inherited by all the child elements unless those children override them with their own CSS properties.

    Fonts

    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
    }
    

    Fonts are set with the font-family property, and utilize a fallback a system, which allows us to define the fonts we want from left to right. If the leftmost font isn't available, the next font in succession will be loaded. This is why it's important for the rightmost font to be of a generic family like serif or sans-serif.

    We've also defined font-size for the first time, indicating that the browser should set the size to 14px for all elements inside of the body tag.

    Links

    a {
      color: #ff0000;
      text-decoration: none;
    }
    
    a:hover {
      color: #000;
    }
    
    a:visited {
      color: #0000ff;
    }
    

    By default, HTML links come with their own special formatting. They are purple, underlined, and change the mouse cursor to a pointer when the user hovers over them. By overriding these default properties, our links are now red without underlines, black on mouseover, and blue after visiting.

    Defining Properties for Multiple Elements At Once

    h1, h2, h3, h4, h5, h6 {
      color: #40acfe;
    }
    

    We're allowed to use commas to lump all the elements for which one CSS property should define.

    CSS Units

    h1 {
      font-size: 1.5em;
    }
    
    h2 {
      font-size: 1.2em;
    }
    
    img {
      width: 25%;
    }
    
    p {
      font-size: 12px;
    }
    

    CSS allows for a variety of units. Colors can utilize hexadecimal color values or standard color names such as "red" and "blue". Numeric values can use any of the following as long as the browser supports it:

    • em
    • ex
    • %
    • px
    • cm
    • mm
    • in
    • pt
    • pc
    • ch
    • rem
    • vh
    • vw
    • vmin
    • vmax

    Nested Targeting

    ul li {
      font-size: 12px;
    }
    

    We can also target specific child elements by using spaces to go down the hierarchy. So in this example, we're only targeting list elements that live withing unordered lists. Ordered (numbered) list itemes will not have their font-sizes affected.

    Conclusion

    That conclused this CSS tutorial. This is just the first part in a series so look forward to tutorials where we deep dive into more advanced CSS concepts.

    Did you like this tutorial? Help us pay for server costs by following us on Facebook, Twitter, and subscribing below, where you'll get post notifications, training webinar invites, and free bundles.