Tag Archives: styles

Creating a single-column CSS layout

This tutorial will use what we already know about HTML and CSS from the previous tutorials and introduce a couple of new concepts in order to create a basic layout for a web page.

In this tutorial we will use the following CSS properties that we looked at in the previous tutorial:

      • float property – with the float property, an element can be pushed to the left or right letting other elements on the web page wrap around it. It is often used to arrange images and for div layouts.
      • clear property – with the clear property, we can specify which side or sides of an element that are floating elements aren’t allowed to be. The float property can be set to none, left, right, both, or inherit (inherit from the parent element). Setting the clear property to ‘both’ for a div means that no other floating divs can be to the left or the right of this div.

    For this tutorial we will make a web page with a header, a navigation sidebar (or menu), the main content section, and a footer. The layout will look something like this:

    CSS layout
    The layout contains four divs: header, nav, section, and footer.

    Watch the video below and then scroll down to check out the sample HTML and CSS code.

    Here is the HTML code for the web page. There are four divs with the IDs header, nav, section, and footer. The CSS external stylesheet is in a resources directory and is called theme.css.

    <!DOCTYPE html>
    <html>
    <head>
     <title>Basic CSS Layout</title>
     <meta charset="utf-8"/>
     <link rel="stylesheet" href="resources/theme.css" type="text/css"/>
    </head>
    <body>
     
    <div id="header">
     <h1>My website</h1>
    </div>
     
    <div id="nav">
     <a href="#">Home</a><br>
     <a href="#">About</a><br>
     <a href="#">Products</a><br>
     <a href="#">Support</a><br>
     <a href="#">Contact us</a><br>
    </div>
     
    <div id="section">
     <h2>Welcome to my website</h2>
     <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
     <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
    </div>
     
    <div id="footer">
     Copyright....2015.
    </div>
    </body>
    </html>

    And here is the CSS code in the external stylesheet.

    #header{
     background-color:#0C60CE;
     color:#FFFFFF;
     text-align:center;
     padding:5px;
    }
     
    #nav{
     line-height:25px;
     background-color:#7D9DC7;
     height:300px;
     width:150px;
     float:left;
     padding:5px;
    }
     
    #section{
     width:500px;
     float:left;
     padding:10px;
    }
     
    #footer{
     background-color:#0C60CE;
     color:#FFFFFF;
     clear:both;
     text-align:center;
     padding:20px;
    }

    Tips:

    • You already know how to add background images to a div or body of a web page. Why not use an image for your header div’s background instead? Or try using gradients (something we will look at in a later tutorial).
    • Try adding a sidebar to the right and try using buttons for the menu instead of boring text links.
    • If you don’t know what a div is, then you’ve skipped some tutorials – go back here 😉

    Using CSS to style your webpage

    CSS stands for Cascading Style Sheets and is a style sheet language that is used to describe the look and style of web pages. CSS can be used to create a theme by modifying the layout, colours, and fonts.

    Without any special styling or formatting, the web pages that we create don’t look very exciting. That’s where CSS comes in! We can use CSS to change the colour of text and backgrounds, use different font styles, and change the layout and overall theme of our site. This tutorial explains how to use CSS in a webpage.

    There are three different ways of applying CSS:

    • Inline styling – the style attribute is applied within the HTML tag
    • Internal style sheet – style attributes are applied to selectors inside the head section of a webpage
    • External style sheets – style attributes are applied in a separate CSS file that can be used across a website

    Below is an example of how to use inline styling within a HTML tag:

    Inline styling
    Inline styling

    Below is an example of how to place the styling within the style tag inside the head section of a webpage:

    Adding CSS using the style tag in the head section.
    Adding CSS using the style tag in the head section.

    This video tutorial will focus on using inline styling and internal style sheets. The next tutorial will explain how to use external style sheets. Watch the video below to see how to use CSS and then scroll down to see the sample code.

    The sample code below shows how to use inline styling:

    <!DOCTYPE html>
    <html>
    <head>
     <title>Adding CSS to a webpage</title>
     <meta charset="utf-8"/>
    </head>
    
    <body>
     <h1 style="color:red">This heading is red.</h1>
     <h2 style="color: #FE2EF7; border: solid 1px">This heading is pink with a border</h2>
     <p style="color:blue">This text is blue.</p>
     <p style="color:green; background-color: yellow">This text is green on a yellow background</p>
    </body>
    
    </html>

    The sample code below shows how to use an internal style sheet:

    <!DOCTYPE html>
    <html>
    <head>
     <title>Adding CSS to a webpage using internal stylesheets</title>
     <meta charset="utf-8"/>
     <style type="text/css">
     p{
     color:blue;
     }
     </style>
    </head>
    
    <body>
     <p>This is a paragraph of text. Because a style has been applied using the p selector, this paragraph will be blue.</p>
    </body>
    
    </html>

    Tip:

    The sample code for inline styling uses the HTML colour code #FE2EF7 for the colour pink. You can use the names of colours  for basic colours such as ‘blue’ or ‘red’ but for other specific colours you will need to use the HTML colour code (a combination of letters and numbers after a hashtag). You don’t need to remember all the colour codes but it is good to remember  #000000 for black and #FFFFFF for white. You can see all the colour codes here.