Tag Archives: properties

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 😉

    CSS Font properties

    In this tutorial we will look at how to use CSS font properties in an external style sheet. We will look at how to change the font-weight (eg. normal or bold), font-style (eg. normal or italic), font-size (eg. 12pt, 10px, 1em or 100%), font-family (eg. Arial or Tahoma), font-variant (eg. normal or small-caps), and the line-height. We will also look at how to add comments to our CSS.

    There are two ways that we can change the values for different font properties:

    • On multiple lines
    • On one line

    When we specify the font properties over multiple lines, it will look like this:

    Font properties on individual lines in CSS file.
    Font properties on individual lines in CSS file.

    When we specify the font properties on one line it looks like this (note that there are required property values and some order to the values – watch the video to find out more):

    Font property values on one line in a CSS file.
    Font property values on one line in a CSS file.

    Watch the video below and then scroll down to find out more about web-friendly fonts and to see the sample code.

    The sample code below is for a CSS file with the font property values specified on multiple lines:

    p{
     font-family: Georgia;
     font-weight: bold;
     font-style: italic;
     font-size: 1em;
    }

    Here is the code for a CSS file with the font property values specified on one line – much neater, right? A line of comments has been added to show the order of the values.

    p{
     font: italic bold 1em Georgia; /* font-style, font-weight, font-size, font-family */
    }

    And here is the code for the HTML file that references the stylesheet.css file:

    <!DOCTYPE html>
    <html>
    <head>
     <title>CSS font properties</title>
     <meta charset="utf-8"/>
     <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
    </head>
     
    <body>
     <h1>This is a heading.</h1>
     <h2>This is a smaller heading</h2>
     <p>This is a paragraph</p>
     <p>This is a paragraph</p>
    </body>
     
    </html>

    Font-size units:

    It is important to have an understanding of the four different units for the font-size property. The four different units are:

    • em – the em is scalable and is used in web documents. An em is equal to the current font-size of the web document. For example, if the document size is 12pt, then 1em will be equal to 12pt. 2em would therefore be equal to 24pt. You can also use decimals eg. 1.5 em. Ems are popular on the web because they are mobile-friendly and are used in ‘responsive’ web design.
    • px – Pixels (px) are fixed-size units that are designed for media that will be read on a screen. 1 pixel is the equivalent of one dot on the computer screen. The downside of pixels is that they do not scale to fit mobile devices or screen readers for the visually impaired.
    • pt – Points (pt) are usually used for print media and are also fixed-size units that cannot scale to fit mobile devices. 1 pt = 1/72 of an inch.
    • % – Percent (%) unit is like the em unit as it is also scalable. Eg. the current font size of 12pt = 100%.

    In summary, the em and % units are really what you want to use for the font-size property, especially if you wish to develop mobile-friendly or responsive websites.  Stay away from px and pt as they do not scale for mobile devices. Try getting used to using em and % instead. Find out more information on font-size units here.

    And lastly, here is an overview of some of the web-safe fonts that you can include in CSS:

    Serif fonts:

    • Georgia, serif
    • Palatino Linotype
    • Book Antiqua
    • Palatino, serif
    • Times New Roman

    Sans-serif fonts:

    • Arial
    • Helvetica, sans-serif
    • Arial Black
    • Gadget sans-serif
    • Comic Sans MS
    • Impact
    • Charcoal
    • Lucida Sans Unicode
    • Tahoma
    • Geneva
    • Trebuchet MS
    • Verdana

    Monospace fonts:

    • Courier New
    • Courier, monospace
    • Lucida Console
    • Monaco, monospace

    Text shadows

    Another effect you might like to use (not mentioned in the video) is a text shadow using the text-shadow property. The text-shadow property has four different attributes separated by spaces.

    The first attribute is the horizontal shadow (how much the shadow is to the left or right of the text). A positive number (eg. 3px) will display a shadow to the right of the text and a negative number (eg. -3px) will display a shadow to the left.

    The second attribute is the vertical shadow (how much the shadow is above or below the text – this can also be a positive or negative number).

    The third attribute is the blur radius (how much blur you want for the shadow). And the last attribute is the colour for the shadow.

    Here is some sample CSS code for a text-shadow with a horizontal shadow of 3px, vertical shadow of 3px, blur radius and 5 and the colour blue for the shadow.

    text-shadow: 3px 3px 5px blue;

    And this is what it would look like:

    text-shadow-effect-css

    Objects, properties and methods in JavaScript

    Object-oriented programming is a type of programming where programmers can define not just the data type of a data structure,  but also the different types of operations (or functions) that can be applied to a data structure. Under this model, a data structure is an object which consists of both data and functions. Programmers can create relationships between different objects. For example, objects can be given characteristics that belong to another object.

    Programming languages which support object-oriented programming include Java, C++, Python, Visual Basic .Net, Ruby, and of course JavaScript.

    In Javascript, an object is something that can have properties and a method is an action that you can perform on an object. A property is something about an object (eg. the length of a string).

    Watch the video below first, and then scroll down to view the sample code.

    In the example below,  the sentence is the object, the length is the property of the object, and the method is the action used to convert the string to uppercase letters. Look at the sample code below to see how properties and methods are used on objects.

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="utf-8"/>
     <title>JavaScript - Objects, properties and methods</title>
     <script type="text/javascript">
     
     /* Remember that JS is an object-oriented language. 
     An object is something that has properties in JS.
     A method is an action you can perform with an object.
     A property is something about an object (eg. the length of a string).
     
     In the example below, sentence is the object, length is the property of the object and method is the
     action used to convert the string to uppercase letters.
     To work with properties, we use the syntax objectname.propertyname 
     A method will always be followed by brackets eg. objectname.methodname()
     A method will sometimes require parameters.
     */
     
     var sentence = "Hello world";
     // This is an example of using a property
     document.write(sentence.length,"<br/>"); // the <br/> tag is simply used to make a new line here
     // This is an example of using a method.
     document.write(sentence.toUpperCase());
     
     //With document.write , document is the object and write is the method.
     
     </script>
     
    </head>
    <body>
     
    </body>
    </html>

    Next tutorial: Using the getElementById() method