Tag Archives: div

HTML5 and CSS3, Video

Rounded corners on a div

This tutorial explains how to add rounded corners to divs on a web page. The image below shows an example of a div with rounded corners.

Screen Shot 2015-05-14 at 7.26.54 pm

You may like to add rounded corners to images, buttons, divs or other elements on your page. They don’t just have to be added to divs.

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

Here is the HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Rounded corners</title>
 <link rel="stylesheet" href="resources/stylesheet13.css"/>
</head>
 
<body>
 <div class="round_box">
 <p>This box has rounded corners</p>
 </div>
</body>
</html>

Here is the CSS code:

.round_box{
 background-color:#31D457;
 width:250px;
 text-align:center;
 padding: 30px 20px;
 border-radius:20px;
}

Here is the CSS code that shows how to specify the border radius for each individual corner:

.round_box{
 background-color:#31D457;
 width:250px;
 text-align:center;
 padding: 30px 20px;
 border-top-left-radius:20px;
 border-top-right-radius:20px;
 border-bottom-left-radius:20px;
 border-bottom-right-radius:20px;
}
HTML5 and CSS3, Video

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:"<--";
}

 

HTML5 and CSS3, Video

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 😉
    HTML5 and CSS3, Video

    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;
}
    HTML5 and CSS3, Video

    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;
}
    HTML5 Canvas, Video

    Simple animations using JavaScript

    This tutorial explains how to use the HTML5 canvas element and JavaScript to animate a div in a webpage. Below is a preview of what the animation will look like. Scroll down to see the code.

    animdiv

    Refer to the comments in the code below to find out what is happening on each line.

    <html>
<head>
<title>My animation</title>
<style type="text/css">
 
#animatedBox{
 /* simple box */
 position:absolute; /* The element is positioned relative to its first positioned (not static) ancestor element */
 top:30px; /* This is the position of the box from the top */
 width:200px; /* This is the width of the box */
 line-height:20px; /* This is the height of the box */
 background:#58FA82; /* This is the background colour of the box */
 border:1px solid #0B610B; /* This is the border thickness and border colour of the box */
 padding:10px; /* This is the padding amount around the text in the box */
 
 /* Hint: Get colour codes from http://html-color-codes.info/ */
}
 
</style>
<script type="text/javascript">
 
var box ; // create the variable we will use as the object to animate
 
function doMove() {
 box.style.left = parseInt(box.style.left)+1+'px'; // parseInt parses a string and returns an integer, moves 1 pixel from left
 setTimeout(doMove,20); // call doMove in 20 milliseconds
}
 
function init() {
 box = document.getElementById('animatedBox'); // get the "box" object
 box.style.left = '0px'; // set its initial position to 0px
 doMove(); // call the doMove function to start animating!
}
 
 
window.onload = init; // load the init function when the page loads
 
</script>
</head>
 
<body>
 
<div id="animatedBox">
 <b>My animation</b>
</div>
 
</body>
</html>

    Next tutorial: Animating (moving) an image using JavaScript