Tag Archives: html5

Using colour gradients and patterns

The code below shows how to use linear and radial gradients to fill rectangle shapes.

The three shapes will look like this (linear gradient on top left, radial gradient on top right, image pattern on bottom left side):

Screen Shot 2015-05-08 at 6.53.39 pm

Watch the video below and then scroll down to see the sample code.

Here is the code:

<!DOCTYPE html>
<html>
<head>
 <title>Gradients and patterns</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
 <script>
 var patternImage = new Image();
 patternImage.src = "pattern.png";
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 var gradient = ctx.createLinearGradient(0,0,150,0); // x1, y1, x2, y2 
 gradient.addColorStop(0, "red");
 gradient.addColorStop(0.5, "yellow");
 gradient.addColorStop(1, "green");
 ctx.fillStyle = gradient;
 ctx.strokeStyle = "blue";
 ctx.fillRect(0,0,150,75);
 ctx.strokeRect(0,0,150,75);
 
 var gradient2 = ctx.createRadialGradient(350,100,0,350,100,200);
 // ctx.createRadialGradient parameters are x1, y1, r1, x2, y2, r2
 gradient2.addColorStop(0, "yellow");
 gradient2.addColorStop(1, "blue");
 ctx.fillStyle = gradient2;
 ctx.strokeStyle = "blue";
 ctx.fillRect(250,0,200,200);
 ctx.strokeRect(250,0,200,200);
 
 var pattern = ctx.createPattern(patternImage, "repeat");
 ctx.fillStyle = pattern;
 ctx.strokeStyle = gradient;
 ctx.lineWidth = 20;
 ctx.fillRect(20,150,200,200);
 ctx.strokeRect(20,150,200,200);
 }
 window.onload=draw;
 </script>
</head>
<body>
 <canvas id="myCanvas" width="500" height="400">
</body>
</html>

Next tutorial: Simple animations using JavaScript

Styling lists

In one of the earlier tutorials we looked at how to create lists in a HTML web page. In this tutorial we will look at how to style both ordered and unordered lists using CSS code. We can style lists by changing circles to other shapes such as squares or arrows, or we can make lists ordered by letter instead of number, as an example.

Take a look at the example below where the order list has been styled to use letters instead of numbers, and the unordered list has been styled to use squares instead of circles.

Screen Shot 2017-04-14 at 4.41.21 pm

By adding the code display:inline; for the li element in your CSS code you can also show list items horizontally instead of vertically, as seen below.

Screen Shot 2017-04-14 at 4.43.34 pm

Watch the video below and then scroll down to see the sample code.

Here is the sample HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Styling lists</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet12.css" type="text/css"/>
</head>
<body>
 <h2>Cities</h2>
 <ol class="cities">
 <li>Sydney</li>
 <li>Melbourne</li>
 <li>Brisbane</li>
 <li>Perth</li>
 </ol>

 <h2>Countries</h2>
 <ul class="countries">
 <li>Australia</li>
 <li>France</li>
 <li>Canada</li>
 <li>New Zealand</li>
 </ul>
</body>
</html>

And here is the sample CSS code:

ol{
 list-style-type:lower-alpha;
 color:blue;
}

ul{
 list-style-type:square;
 color:green;
}

You can also add the following to your CSS code if you want list items to display horizontally:

li{
display: inline;
}

CSS nth-child selector

In a couple of the previous tutorials we looked at child selectors and pseudo classes. In this tutorial, we will move on to the nth-child selector. The nth-child selector is used to select every element that is the nth child of a parent. For example, you could apply a style to every 2nd paragraph (every 2nd child) in a div. When using the nth-child selector, ‘n’ can be a number, a keyword or a formula.

In the example below we can change the colour of every 5th paragraph inside a div called ‘mydiv’. Because ‘n’ is 5, every 5th element will be selected.

#mydiv p:nth-child(5){
 color:red;
}

Here is an example of a keyword being used to apply a background-color style to odd paragraphs inside a div:

#mydiv p:nth-child(odd){
 background-color:green;
}

Watch the video below to see some of the different numbers, keywords, and formulas that can be used with the CSS nth-child selector. Then scroll down to see the sample code.

Here is the HTML sample code:

<!DOCTYPE html>
<html>
<head>
 <title>CSS nth-child() selector</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet11.css" type="text/css"/>
</head>
<body>
 <div id="mydiv">
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 </div>
</body>
</html>

And here is the CSS code showing just the ‘even’ selection example from the video:

#mydiv p:nth-child(even){
 background-color:black;
 color:white;
}

Make sure you watch the video to see more examples of the numbers, keywords and formulas you can use with the nth-child selector. This video is also available here on my YouTube channel.

Styling your links

By default, links on your website will usually be blue and when the pages are linking to have been visited, the links will turn purple. However, we can customise the style of links. For example, we can change the colour or text decoration when a link has been visited, when the mouse hovers over a link, or when the mouse is clicking on a link.

The different link states that we can apply styles to are:

  • a:link (an unvisited link)
  • a:visited (a visited link)
  • a:hover (when the mouse is hovering over a link)
  • a:active (while the mouse is clicking on a link

Take a look at the animated example below. We have links which are orange and with no underline. However, when the user moves their mouse over these links they change to a dark blue colour and are underlined.

styledlinks

Watch the video below and then scroll down to see the sample HTML & CSS code and some further notes.

Here is the HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Styling links</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet10.css" type="text/css"/>
</head>
<body>
<h1>Styling links</h1>
<p>By default, links on your website will usually be blue and when the pages are linking to have been visited, the links will turn purple. However, we can customise the style of links. For example, we can change the colour or text decoration when a link has been visited, when the mouse hovers over a link, or when the mouse is clicking on a link.</p>
 
<a href="#one">One</a><br>
<a href="#two">Two</a><br>
<a href="#three">Three</a><br>
<a href="#four">Four</a><br>
<a href="#five">Five</a><br>
 
<h1> <a name="one"></a>One</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<h1> <a name="two"></a>Two</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<h1> <a name="three"></a>Three</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<h1> <a name="four"></a>Four</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<img src="resources/canada.jpg" width="300" height ="200"/><a name="five"></a>
 
 
</body>
</html>

And here is the CSS code:

a:link{
 color:#FF8000;
 text-decoration:none;
}
 
a:visited{
 color:#FF8000;
 text-decoration:none;
}
 
a:hover{
 color:#B45F04;
 text-decoration:underline;
}
 
a:active{
 color:#DF3A01;
 text-decoration:underline;
}

Just a few rules to take note of:

  • There is an order when specifying the style for several links
  • When specifying the style for several links, a:hover must come AFTER a:link and a:visited
  • a:active must always come after a:hover

Linking to the same page

We have already looked at how to link pages on a website. However, we can also link to different sections of a single web page. For example, if you have a long web page with lots of content, you can have a table of contents with links allowing the user to click on a link which will take them to a certain part of that web page.

You can link to other elements on a web page such as a heading, paragraph, div, or image. In this tutorial, we will look at how to link to different headings and images on a web page.

The example in the image below shows some links which when clicked will take the user to the corresponding headings with different sections of content. This example obviously looks a bit plain but using some CSS code we can style the links, headings and the rest of the content. You could also add some more code for a scrolling transition effect.

Screen Shot 2017-04-14 at 4.33.25 pm

Watch the video below which explains how to link to content on the same page, and then scroll down to see the sample code.

Here is the HTML code for the example shown in the video:

<!DOCTYPE html>
<html>
<head>
 <title>Linking to the same page</title>
 <meta charset="utf-8"/>
</head>
<body>
<h1>Linking to sections on the same page</h1>
<p>We have already looked at how to link pages on a website. However, we can also link to different sections of a single web page. For example, if you have a long web page with lots of content, you can have a table of contents with links allowing the user to click on a link which will take them to a certain part of that web page. You can link to other elements on a web page such as a heading, paragraph, div, or image. </p>
 
<a href="#one">One</a><br>
<a href="#two">Two</a><br>
<a href="#three">Three</a><br>
<a href="#four">Four</a><br>
<a href="#five">Five</a><br>
 
<h1> <a name="one"></a>One</h1>
<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. 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. 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. 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. 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>
 
<h1> <a name="two"></a>Two</h1>
<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. 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. 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. 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. 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>
 
<h1> <a name="three"></a>Three</h1>
<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. 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. 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. 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. 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>
 
<h1> <a name="four"></a>Four</h1>
<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. 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. 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. 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. 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>
 
<img src="resources/canada.jpg" width="300" height ="200"/><a name="five"></a>
 
 
</body>
</html>

Pseudo classes

Pseudo classes are used to specify a special state of a particular element. For example, the first letter in every paragraph could be a different size, or a link changes colour when the mouse cursor moves over it. Pseudo classes are built into CSS. You can’t just make your own pseudo classes. In this tutorial we will look at styling first letters and first sentences of paragraphs, how to style the first and last child of a parent, and also how to add content before and after the existing content in an element.

Watch the video below to see how to use pseudo classes in your CSS, then scroll down to see the sample code for the different examples.

The HTML code below is for the first example in the video (styling the first letter and styling the first sentence in paragraphs):

<!DOCTYPE html>
<html>
<head>
 <title>Pseudo classes</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet8.css" type="text/css"/>
</head>
<body>
 
<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. 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. 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. 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>
 
</body>
</html>

And here is the CSS code for the first example:

p:first-letter{
 font-size:150%;
 font-weight:bold;
 color:red;
}
 
p:first-line{
 color:blue;
}

This is the HTML code for the second example (styling first child and last child, and styling before and after):

<!DOCTYPE html>
<html>
<head>
 <title>More pseudo classes</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet9.css" type="text/css"/>
</head>
<body>
<p>This is a paragraph</p>
<div id="parent">
 <p>The quick brown fox jumped over the lazy dog.</p>
 <p>The quick brown fox jumped over the lazy dog.</p>
 <p>The quick brown fox jumped over the lazy dog.</p>
 <p>The quick brown fox jumped over the lazy dog.</p>
</div>
</body>
</html>

And here is the CSS code for the second example:

#parent p:first-child{
 color:green;
 text-decoration:underline;
 font-weight:bold;
}
 
#parent p:last-child{
 color:red;
 text-decoration:none;
 font-style:italic;
}
 
#parent p:before{
 content:"-->";
}
 
#parent p:after{
 content:"<--";
}

 

Child selectors

In this tutorial we will have a look at the parent/child relationship in CSS. All elements in an HTML document can be both parents and children, except for the body which can only be a parent. A div can be a child of the body or another div. A paragraph, heading, or other element can also be a child of the body or another div.

For example, if you place a <h1> heading inside a div, then the div is the heading’s parent and the body would be the div’s parent. This is called the parent/child relationship in CSS. We can use child selectors in CSS to apply styles to elements that are a child of another element such as a div or table. The image below illustrates the parent/child relationship in CSS.

The parent/child relationship in CSS.
The parent/child relationship in CSS.

The video below shows how to use child selectors in CSS to apply styles to child elements in an HTML web page. Watch the video below and then scroll down to see the HTML and CSS code.

Here’s the HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Child selectors</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet7.css" type="text/css"/>
</head>
<body>
<div>
 <p>This paragraph has a parent div.</p>
</div>
<p>This paragraph does not have a div as a parent.</p>
<div id="myparagraph">
 <p>This paragraph is a child of another div.</p>
</div>
<p>This is another paragraph without a parent div.</p>
</body>
</html>

And here’s the CSS code:

p{
 color:blue;
}
 
div p{
 color:red;
}
 
#myparagraph p{
 color:green;
}

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 😉

    ID Selector

    In the previous tutorial, we looked at a few different types of CSS Selectors and we used the class selector to apply a style to all elements that used that class name. In this tutorial, we will look at the ID selector.

    The ID selector is used when we want to apply a style to a single element. An ID is unique for each element. We can use a class for multiple elements but we should only ever use an ID for a single element. If we use the same ID for multiple elements, problems will start to occur especially when using JavaScript code.

    An HTML element can be given an ID like in the example HTML code below:

    <p id="blue">This text is blue</p>

    The ID style is specified in the CSS code and a hashtag (#) is placed before the ID name.

    #blue{
           color:blue;
    }

    Watch the video below to see how you can use IDs in your HTML and CSS. Then scroll down to see the sample code.

    Here is the sample HTML code (it references a CSS file called stylesheet6.css in the resources directory):

    <!DOCTYPE html>
    <html>
    <head>
     <title>IDs</title>
     <meta charset="utf-8"/>
     <link rel="stylesheet" href="resources/stylesheet6.css" type="text/css"/>
    </head>
     
    <body>
     <p id="blue">This is a blue paragraph</p>
     <p id="green">This is a green paragraph</p>
     <p id="red">This is a red paragraph</p>
    </body>
     
    </html>

    And here is the sample CSS code:

    #blue{
     color:blue;
    }
     
    #green{
     color:green;
    }
     
    #red{
     color:red;
    }

    We will be looking at more selectors in upcoming tutorials. Happy coding!

    Class Selector

    Selectors are used to select elements in a  web page that you want to style. There are many types of CSS selectors including:

    • Element selector – element selectors select all of the elements in a web page with the specified element name (eg. p, h1, h2).
    • Class selector – class selectors apply a style to all of the elements that use that class. Eg. a style of green text with a yellow background could be applied to multiple paragraphs that use that class name.
    • ID selector – ID selectors are unique for each element and are used when you want to apply a style to just one element on a web page.
    • and many more.

    If you have completed the previous tutorials, then you have already used element selectors. In this tutorial we will focus on using the class selector. A class selector can be used when you want to apply a style to all of the elements that use that class name.

    When we uses classes, we specify the class name in the element tag. In the example below, a paragraph is using the ‘blue’ class:

    <p class = "blue">This text is blue</p>

    Then, in the CSS code you need to define the class by placing a period/full stop before the class name. A period means that this will be a class:

    .blue{
           color:blue;
    }

    Watch the video below to see how you can use classes in your web pages. Then scroll down to view the sample code.

    Here is the sample HTML code:

    <!DOCTYPE html>
    <html>
    <head>
     <title>Classes</title>
     <meta charset="utf-8"/>
     <link rel="stylesheet" href="resources/stylesheet5.css" type="text/css"/>
    </head>
     
    <body>
     <p class="red">This paragraph will be red</p>
     <p class="green">This paragraph will be green</p>
     <p class="blue">This paragraph will be blue</p>
    </body>
     
    </html>

    And here is the sample CSS code (in a seperate style sheet called stylesheet5.css in the resources directory:

    .red{
     color:red;
    }
     
    .green{
     color:green;
    }
     
    .blue{
     color:blue;
    }

    In the next tutorial, we will take a look at the ID selector.

    Background images and colours

    This tutorial explains how to add a background image to divs and the body section of your web page. It also explains how to have fixed background images (that don’t scroll with the content of your web page) and change the placement of background images. You will also see how to add background colours behind background images.

    In the example image below, there is a div inside the body of the page. The body has a background image (a greyish gradient) while the div has a light green background.

    Screen Shot 2017-04-14 at 4.30.34 pm

    Watch the video below and then scroll down to see the sample code.

    Below is the sample code for the HTML file. If you add more content to your page so that the page can scroll down, you will notice that the background image doesn’t move because it is set to a fixed position in the CSS code. Note that the HTML code refers to CSS in a separate stylesheet file (called stylesheet4.css and stored in a resources folder).

    <!DOCTYPE html>
    <html>
    <head>
     <title>Background images</title>
     <meta charset="utf-8"/>
     <link rel="stylesheet" href="resources/stylesheet4.css" type="text/css"/>
    </head>
     
    <body>
     
     <div>
     <h1>This is a heading</h1>
     <p>This is a paragraph</p>
     </div>
     
    </body>
     
    </html>

    Here is the sample code for the CSS file (it’s called stylesheet4.css and stored in a resources folder):

    body{
     background-image:url("nepal.png");
     background-color:blue;
     background-repeat:no-repeat;
     background-attachment:fixed;
    }
     
    div{
     width:450px;
     height:300px;
     background-image:url("canada.jpg");
     background-repeat:no-repeat;
     background-position:center top;
    }

    Divs and Spans

    The div and span tags are made for CSS. A div is a section or a ‘division’ in a web page. A div can be thought of as a block. On the other hand, a span is used to group inline elements in an HTML web page. For example, a span could be used to change the style of just a few words from a paragraph or heading.

    Divs and spans are unnoticed and do not change the way a page displays until you use CSS to apply styles to them. If a div or span exists in a HTML document but no style is applied to it in a CSS style sheet, then the appearance of the web page will not change.

    Take a look at the example below. A div contains a line of text and some of that text is within a span. This means the text in the div can have a specific style (eg. green background and border), while text inside the span (which is inside the div) can have a different style (eg. light blue background and red border).

    Screen Shot 2017-04-14 at 4.27.21 pm

    The video below shows how to add divs and spans to a web page. It also shows how to change the border, background colour, width and height of a div; and how to change the text colour, background colour and text decoration inside span tags. Scroll further down to see the sample code.

    The HTML code below shows how to add divs and spans. Note that the HTML code references an external CSS style sheet. Make sure you make a CSS file and give it the same name as the reference in the HTML file. The CSS file in this example is called stylesheet.css.

    <!DOCTYPE html>
    <html>
    <head>
     <title>Div and Span</title>
     <meta charset="utf-8"/>
     <link rel="stylesheet" href="resources/stylesheet3.css" type="text/css"/>
    </head>
     
    <body>
     <div>
     <h1>This is a heading</h1>
     <p>This <span>is a</span> paragraph</p>
     </div>
    </body>
     
    </html>

    The CSS code below shows how to specify the width and height of a div and how to add borders and background colours to divs, and text colour, decorations, and background colours to spans.

    div{
     border:2px solid #00FF00; /* green */
     background-color:#FFFF00; /* yellow */
     width: 400px;
     heigth: 200px;
    }
    span{
     color:#2E64FE; /* blue */
     background-color:#FFFFFF; /* white */
     text-decoration:underline;
    }

    The box model and margins

    In the previous tutorials, we looked at the box model and how to add padding and borders to elements. In this tutorial, we will look at how to specify margins around boxes. Remember, padding is the transparent space around the content, borders go around the padding and content, and the margin is the transparent space around the outside of the border.

    You can use CSS code to add a margin to any element on your webpage. For example, if you want some space around a heading of h1 size you could add the code margin: 2px; to the h1 selector in your CSS code to add two pixels of space around a h1 heading. You can also be more specific eg. margin-left: 2px; if you only wanted margin spacing on the left side of an element.

    In the example image below, 50px of margin space has been added to the heading which has an orange background. The heading has a green border and is inside a div with a red border. The space between the green border of the heading and the red border of the div is the actual margin space (50px) around the heading. The space between the green border and the text inside the div is the margin space (20px). The green border is 5px thick and the red border is 2px thick.

    Screen Shot 2017-04-14 at 4.20.08 pm

    Watch the video below and then scroll down to see the sample code.

    Check out the sample code below to add margins to your elements.

    <!DOCTYPE html>
    <html>
    <head>
     <title>Box model and margins</title>
     <meta charset="utf-8"/>
     <style>
     body{
     margin: 0px;
     border: 2px red solid;
     }
     h1{
     background-color:orange;
     padding:20px;
     border-style:solid;
     border-width:5px;
     border-color:green;
     margin:50px;
     }
     h2{
     background-color:yellow;
     padding:20px;
     border: 3px dashed blue;
     margin-left:20px;
     margin-right:20px;
     margin-top:10px;
     margin-bottom:10px;
     }
     p{
     background-color:blue;
     padding:20px;
     border-top: 8px dotted red;
     border-left: 8px dashed yellow;
     border-right: 8px solid green;
     border-bottom: 8px groove black;
     margin:10px 30px 10px 30px; /*top right bottom left*/
     }
     </style>
    </head>
     
    <body>
     <h1>This is a box</h1>
     <h2>This is another box</h2>
     <p>And another box</p>
     
    </body>
     
    </html>

    The box model and borders

    In the previous tutorial, we looked at the box model and how to add padding around elements. In this tutorial we will look at how to add borders around elements (or boxes). We can change the thickness, colour and style of borders.

    Border styles include:

    • none
    • solid
    • dotted
    • dashed
    • double
    • ridge
    • groove
    • inset
    • outset

    The image below shows how a heading can have its own background colour and border style. In this example, the heading has been given a grey background with a green solid border using some simple CSS code.

    boxeg

    Watch the video below and then scroll down to see the sample code.

    Check out the sample code below to see how you can add borders to your own web page elements.

    <!DOCTYPE html>
    <html>
    <head>
     <title>Box model and borders</title>
     <meta charset="utf-8"/>
     <style>
     h1{
     background-color:orange;
     padding:20px;
     border-style:solid;
     border-width:5px;
     border-color:green;
     }
     h2{
     background-color:yellow;
     padding:20px;
     border: 3px dashed blue;
     }
     p{
     background-color:blue;
     padding:20px;
     border-top: 8px dotted red;
     border-left: 8px dashed yellow;
     border-right: 8px solid green;
     border-bottom: 8px groove black;
     }
     </style>
    </head>
     
    <body>
     <h1>This is a box</h1>
     <h2>This is another box</h2>
     <p>And another box</p>
     
    </body>
     
    </html>

    The box model and padding

    Every element inside a web page can be considered as a ‘box’. In CSS, we use the term “box model” when we’re talking about the design and layout of HTML elements. The CSS box model is basically a box that is wrapped around each element. The box model consists of:

    • Content – the text and images
    • Padding – clear, transparent space around the content
    • Border – a border that goes around the padding and content
    • Margin – clear, transparent space around the border

    When we use the box model, we can add padding, borders, and margins around the content in HTML elements such as headings and paragraphs. Every element inside your web page is actually a box. The image below shows the different parts of the box model.

    The HTML box model
    The HTML box model

    The video below introduces the box model and shows how to add padding to boxes. Watch the video below and then scroll down the page to see how you can add padding to elements in your web pages.

    The sample code below shows how to add padding. There are also some comments inside the /* and */ tags to help you remember the order of the widths for padding on each of the four sides of a box.

    <!DOCTYPE html>
    <html>
    <head>
     <title>Box model and padding</title>
     <meta charset="utf-8"/>
     <style>
     h1{
     background-color:yellow;
     padding:20px;
     }
     
     h2{
     background-color:green;
     padding-top:50px;
     padding-right:20px;
     padding-bottom:50px;
     padding-left:20px;
     }
     
     h3{
     background-color:orange;
     padding:10px 20px 10px 20px; /*top right bottom left padding */
     }
     p{
     background-color:blue;
     padding:10px 30px; /* top and bottom, left and right*/
     }
     
     </style>
    </head>
     
    <body>
     <h1>This is a box.</h1>
     <h2>This is another box.</h2>
     <h3>This is a box too.</h3>
     <p>And yep, this is also a box.</p>
     
    </body>
     
    </html>

    The next tutorials will show how to also add borders and margins to elements in your web pages.