Tutorial 4

Advanced CSS,
Positioning & Tables

Table of Contents
Table of Contents...................................................................................................................1
1. Introduction........................................................................................................................2
2. Span & Div..........................................................................................................................3
2.1 Span...............................................................................................................................4
2.2 Div..................................................................................................................................5
3. Margins & Padding...........................................................................................................10
4. Borders.............................................................................................................................13
4.1 Border Style, Width & Color..........................................................................................13
4.2 Border Radius...............................................................................................................14
5. Positioning........................................................................................................................15
5.1 Static Positioning..........................................................................................................15
5.2 Fixed Positioning..........................................................................................................15
5.3 Relative Positioning......................................................................................................16
5.4 Absolute Positioning.....................................................................................................17
6. Animation..........................................................................................................................18
7. Tables................................................................................................................................19
7.1 Creating a Simple Table...............................................................................................20
 7.2 Table Borders...............................................................................................................21
7.3 Table Headings............................................................................................................21
7.4 Spanning (Merging) Columns and Rows......................................................................22
7.5 Formatting Tables.........................................................................................................24
7.6 Table Alignment............................................................................................................26

1. Introduction
Now that you understand the basics of HTML this guide intends to expand your knowledge
with styling your work. By applying the techniques in this guide, as well as looking beyond
into sources such as w3Schools, you should be able to elevate the design of your website.
For this guide we will start on a new html document to demonstrate the different techniques,
however you are welcome to use these on your own work.

To start, you will need to create a Workshop 5 folder, and then create a new html
document called index.html and a new CSS document called style.css.

Make sure to save the two documents in the Workshop 5 folder as shown in Figure 1 below.

Figure 1: Workshop 5 folder with an index.html files and a style.css file saved
2
Now copy the following code into your index.html folder.

Figure 2: Base code in index.html file that will be used throughout the workshop
Save your HTML file and run the browser. Your webpage should look as such:

Figure 3: Browser appearance of Base code in index.html file.

This will be used throughout the workshop.

2. Span & Div

Span and Div are used to group together a chunk of HTML and combine some information
onto that chunk, most commonly with the attributes class and id, to associate the element
with a class or id CSS selector.

The difference between span and div is as follows:

3
 1. a span element is in-line and usually used for a small chunk of HTML inside a line,
such as inside a paragraph.
2. a div element (i.e. division) is block-line that is basically equivalent to having a line-
break before and after it, which is used to group larger chunks of code.

2.1 Span
While <div> allows you to divide your webpage up into pieces you can style individually,
<span> allows you to control styling for smaller parts of your page, such as text.

For example, if you always want the first word of your paragraphs to be red, you can wrap
each first word in <span></span> tags and make them red using CSS. Let’s try this. Within
you HTML code, let’s wrap “Student Learning” with <span> </span> tags as follows:

Figure 4: Adding <span> </span> tags within paragraphs

Next, we are going to style the words within the span tags using CSS. Before we do this,
check that you have correctly linked your HTML document to your CSS document. Check
that the following line of code in your <head> tags:

Figure 5: CSS link in the html document.

Now, save your index.html file and go to your new style.css file. Using CSS styling we are
going to edit the words “Student Learning” wrapped in your <span> </span> tags. Type the
following code into the CSS document:

Figure 6: Styling the span tags in CSS

Now, save both of your files and run the browser from your HTML document. Your webpage
should now look like this:

4
 Figure 7: Browser appearance of styled words using Span

2.2 Div
The div element is a block level element used for grouping HTML elements. One of the most
versatile structure tags. Short for "division," <div> allows you to divide your page into
containers, i.e., different pieces. This is very effective when used with CSS. You can
also format the style of a div container using width, height, and background-color
properties.

Let’s begin by adding <div> tags around the Student Learning heading. We will identify the
div as a unique element by using an ID and naming it “header”. Add the following div tags
around your <h1> tags (remember to use opening and closing tags!!):

Figure 8: div tags around the <h1> tags

Now, save your HTML document and go to your CSS file.

Note: if you run the browser now, you will see that the above code has not changed
anything. This is because we have not done any styling yet!

Go to your CSS file and enter the following #header function to style the div in the HTML.
You do not need to use the same colours, the ones used here are just some examples:

5
 Figure 9: Styling the div in the CSS

You will notice that the header has a hashtag ‘#’ at the start. This is because we have used
an ID in the HTML document. Remember from the CSS workshop guide that IDs must
always be declared with a ‘#’.

Now, save your CSS file, and run the browser from your HTML file. Your webpage should
now look as presented in Figure 10. You can see that the section around the “Student
Learning” heading now has a background colour.

Figure 10: Browser appearance of a div background color

Tip: The Importance of Divs:

6
 DIVs will become very useful in your website project, as you will likely have multiple <h1>
tags across the different HTML pages. You can only have 1 CSS page, so when you
declare the function:
h1 {
}

in your CSS file, it is going to style ALL <h1> tags across all HTML files!

By using a div, you can style a single tag or section on your page (e.g., your navigation
bar, your main content sections, and/or a footer on your webpage) without affecting any
other sections across your webpage.

Now, let’s use the div tags a bit more.

Enter the following div tags in the HTML file to split the page into containers. Make sure that
all <div> tags have a closing tag:

7
Figure 11: Adding 4 new <div> tags with IDs “container”, “navigationbar”, “content”,
and “footer”

Note: Make sure you can identify the opening and closing <div> </div> tags as illustrated in
Figure 11. It is possible to miss one closing tag and if that happens you will encounter errors.

Remember that if you run the browser you will see that the above code has not
changed anything. This is because we have not done any styling yet!

8
Now, go to your style.css file and add all of the following functions (you do not need to use
the same colours, the ones used are just some examples):

Figure 12: Selecting and styling Divs using their IDs in CSS

Now, save both your CSS file and your HTML file. Run the browser (from the index.html
file) and you should have something like this:

Figure 13: Browser appearance of styled Divs

9
Note: Width and Height - The width of the container sizes will decrease when the browser
window is smaller. This is because we have used percentages ‘%’ for the width in the CSS.
The height will not change however, as we have defined the size with pixels ‘px’ instead. We
encourage you to play around with the sizing! Now, here is an explanation of what we have
styled to help you further understand how we have styled the containers:

Figure 14: Identifying where the div, span and h1 styles are placed in the web page

To make the layout of our current page more polished, we will employ the properties of
“Margin” and “Padding”

3. Margins & Padding

Margins and padding are the two most commonly used properties for spacing-out
elements. A margin is the space outside something, whereas padding is the space inside
something. Choosing where the element goes is the job of positioning, which you will learn
afterwards.

First, change the h1 function in the CSS to the following:

Figure 15: Margin in the h1 function changed. Padding added.

When you save and run the browser, we can see that this leaves a 35-pixel width space
around the ‘Student Learning’ header (the white space) and the header itself has additional
space around it from the 40-pixel width padding (the box within which that the heading is
in). As the font-size hasn't been changed the size of the text will be the same. See Figure
16.
10
 Figure 16: Margin and Padding affecting the “Student Learning” heading

Note: Above we have used a generalised margin which in turn impacts all sides of the
heading section. The four sides of an element (top, bottom, right, and left) however, can also
be set individually using the following terms instead:

For the margin:

● margin-top: (pushes the element away from the top of the page)
● margin-bottom: (pushes the element away from the bottom of the page)
● margin-left: (pushes the element away from the left of the page)
● margin-right: (pushes the element away from the right of the page)

The same goes for the padding of sections (bulks or fattens up the actual section):
● padding-top: (expands the top of the element)
● padding-bottom: (expands the bottom of the element)
● Padding-left: (expands the left of the element)
● Padding-right: (expands the right of the element)

Ultimately, the margin refers to the space around the area, while the padding refers to the
area itself.

Within the CSS file, margins and paddings can be defined individually with specific values.
For example, the padding for the h1 {} function could look as indicated in Figure 17:

11
 Figure 17: Padding with specific values for each side

Note: Instead of writing down each property separately, you can use the short-hand
method:
 One value such as 35px; to specify an equal margin/padding on every side
 Two values such as 35px 25px; to specify the top & bottom (first value) and right
& left (second value) margin/padding.
 Three values such as 35px 25px 20px; to specify the top (first value), right & left
(second value) and bottom (third value) margin/padding.
 Four values such as 35px 25px 20px 15px; to specify the top, right, bottom and
left.

For example, change your h1{} function in the CSS to the following:

Figure 18: Simplified margin and padding

What is presented in Figure 18 is exactly the same, but a simplified version of the following:

Figure 19: Expanded /specific values for margin and padding

Note: The Box Model - Margins, padding, and borders are all part of what’s known as The
Box Model, which allows us to visualise the role of each property. The Box Model works like
this: in the middle you have the content area, surrounding that you have the padding,
surrounding that you have the border and surrounding that you have the margin. It can be
visually represented as shown in Figure 20:

12
 Figure 20: The box model depicting the properties.

4. Borders
4.1 Border Style, Width & Color
Within CSS you can add borders to text sections, divs, images etc. You can also style
borders and change their width and color using 3 key properties:
border-style, border-width & border-color
For border-style there are many options to choose from e.g. ‘dotted’, ‘solid’, ‘dashed’,
‘groove’. Of these options the most professional looking one would most likely be ‘solid’ as
this is just a solid line border.

To put all three into practice, change your #header section to the following:

Figure 21: Creating a dotted border for the header section.

Now, save your file and run the browser. You should have the following outcome:

Figure 22: Dotted border displayed in the browser.

To save on time you can actually write these shorthand in a single line with the following:
13
 Figure 23: Simplified border code for the header.

If you run your HTML file, this should have the same outcome as the previous code.

4.2 Border Radius

Border radius is used to give a rounded corner to elements. You do not have to have a
border applied to an element to use border radius.

Figure 24: Elements with and without border radius

We can apply it to our heading with this extra code:

Figure 25: Adding border-radius to a header section in CSS

Now, save your file and run the browser. You should have the following change on the
corners of the dotted border:

Figure 26: Border radius – appearance in a browser

Note: Keep in mind this sort of heading isn’t necessarily the professional standard we would
like to see for your assessments, so make sure you apply these techniques appropriately!
5. Positioning
14
The CSS positioning properties allow you to position an element. It can also place an
element behind another and specify what should happen when an element's content is too
big.

Elements can be positioned using the top, bottom, left, and right properties. However, these
properties will not work unless the position property is set first. They also work differently
depending on the positioning method.

When positioning, you have the ability to set the type of positioning. There are four different
positioning methods:
position: static;
position: fixed;
position: relative;
position: absolute;

You also have the ability to edit four properties: top, left, right & bottom. This will become
clearer as you begin to apply them. If you do have any difficulties, w3schools has a handy
guide for this as well.

5.1 Static Positioning

HTML elements are positioned static by default. A static positioned element is always
positioned according to the normal flow of the page. Static positioned elements are not
affected by the top, bottom, left, and right properties. While it’s useful to know what it is, it
isn’t necessary to use in your project.

5.2 Fixed Positioning

An element with fixed position is positioned relative to the viewport of the browser window
(what you can see i.e. if something was at the bottom of the page and you had to scroll down
to see it, it is not in the immediate viewport). It will not move even if the window is scrolled.

To make the header fixed, we will define its position in the CSS as indicated in Figure 27:

Figure 27: Creating a fixed position for an element

Note: Do not add an entirely new #header {} into your CSS, simply edit the current
one. There should be no ‘double-ups’ of functions.

Now, save your file and run the browser. You will notice that header is now fixed at the
top, overlapping the other elements of the page as shown in Figure 28:

15
 Figure 28: Header with fixed position displayed in browser.

This is a common function used by websites. Often the navigation bar at the top of the
screen will remain at the top of the screen no matter whether you are at the top or bottom of
the page. So, while it doesn’t look fabulous in this example, it is a useful tool to use,
particularly if you want a section such as a navigation bar to remain visible while scrolling.

5.3 Relative Positioning

A relatively positioned element will have its position adjusted away from its normal
position, with the properties top and left. Firstly, make sure you have removed or
commented the position: fixed code from your #header in CSS. Now we will apply
some relative positioning to the h2 element. Go to your HTML file and add class=“left”
inside your opening h2 heading “What is Student Learning” as follows:

Figure 29: Adding a class selector in the h2 tag

Now, save your HTML file. If you run the browser, you will see nothing has been changed
yet. This is because we have not done any styling in the CSS yet!

To add the ‘Relative Positioning’ style to the selected class, go to your CSS file and add the
following code:

Figure 30: Altering the position of the selected <h2> tag in the CSS

16
When applied correctly, this should result with the <h2> heading “What is Student Learning”
indented from the left as shown in Figure 31 below:

Figure 31: Relative positioning of a header – browser appearance

As you can see above, the heading has moved 40 pixels from where it was originally.
Let’s try something different. In your CSS file, change the 40px to -40px. Your code should
now look like this:

Figure 32: Altering the position of the <h2> in the CSS

Now, save your file and run the browser. You should have the following change to the
position of the <h2>:

Figure 33: Relative positioning of a header – browser appearance

5.4 Absolute Positioning

An absolute position element pulls a box out of the normal flow of the HTML and delivers it
to a fixed position. It is similar to the fixed value in that it sticks it to an exact spot, however it
can go out of the viewport of the browser, such that a viewer would need to scroll down to
see it. The absolute box can be placed anywhere on the page using top, right, bottom and
left.

To try it out we will edit the footer of the website.

Add the positioning code position: absolute; and top: 1000px; to the to the
#footer as shown in Figure 34 below:

17
 Figure 34: Adding ‘absolute positioning’ to the footer

Now, save your file and run the browser (remember to run the browser from the HTML
file). You’ll find that on your website you’ll now have to scroll down to see your footer!
Evidently, this is an extreme example meant to illustrate the function of absolute positioning.
So, it would be best not to do something like this in your actual project!

Try it! Try experimenting with the design. Add different fonts, colors, sizes or just playing
around with the formatting.

6. Animation
In the latest version of CSS, animating elements is possible. There are two main ways of
animating elements. We will go through the use of transition-duration to animate
elements. Basically, transition duration defines the length of time it takes for the style of an
element to change. The effect is that the change is shown smoothly over a period of time.

How transition is written:

transition-duration: 0.5s;
The ‘0.5s’ stands for 0.5 seconds, you could make it as long as you want e.g. ‘2s’ for 2
seconds.

To begin, let’s change the background-color of the #header function to white (this is so the
visual effects are vivid when we apply the transition duration property.

Figure 35: #header background color changed to white.

Now, add the transition code above to the #header function:

Figure 36: Transition duration code added to header

18
Now, we will need to also use some sort of pseudo-code to change the style. This will allow
us to continue adding style elements for the header.

In CSS, add a new function of the #header, specifying it with pseudo-code ‘hover’. You
should be familiar with these elements from the navigation bar in Workshop Guide 2. This
should be written as shown in Figure 37 below:

Figure 37: Changing the style of the header to create a transition animation

Now you will notice that when you hover your mouse (using the cursor) on the header the
background colour of will transition in less than half a second smoothly to a red colour and
remains like that whilst your cursor is hovering on top of it. If you remove your cursor, the
colour transitions smoothly in less than half a second to white.

Try it! Now you can play around with animations like this to make your Website interesting!
Remember to apply this appropriately (for instance, if the effects affect readability or viewing
your content then this would be marked down in your project).

7. Tables
Tables are commonly used in web pages to organise information in a structured and
attractive way. They consist of cells that are composed of both rows and columns, very
similar to the type of table you may find in Microsoft Word.

However, creating a table in HTML is somewhat more complicated because you must divide
the information into rows and columns in your HTML document. HTML tables can be a little
difficult but don’t be put off! They are one of the most effective ways of presenting
information on your page.

Note: W3schools is a very handy site and gives a good example on how to create a table.
You can click the buttons ‘try it yourself’ to see the code they used to create their table –
here’s the link: http://www.w3schools.com/html/html_tables.asp

19
7.1 Creating a Simple Table
Tables are made up of three basic sets of tags:

 The table tag which defines the beginning and end of a table <table> </table>
 The tr (table row) tag defines the beginning and end of individual rows <tr> </tr>
 The td (table data) tag which defines the individual cells <td> </td>. This tag refers
to the content of the cell (which could be anything from text and images, to other
tables etc.)

Firstly, lets add some space below the content div using CSS so that we can place our table
there. To do this we can use the margin-bottom property as shown in Figure 38 below:

Figure 38: Adding space below a content div using margin-bottom property in CSS

Now, let’s try a simple table with two columns and three rows:

Figure 38: HTML code for a basic table and appearance in a browser

At the moment, the table is very basic. It will not have any lines around it. We will need to
style it to create a desired look.

7.2 Table Borders

20
The border property is used to specify that you want a border to be shown. If you do not
specify a border size, then the table will be displayed without any borders.

Using the border property, lets select table in CSS and add the following values:

Figure 39: Adding border property and some styling values to a table

You may also want to have borders around all of your cells. To do this, you must format both
your table and table cells like this:

Figure 40: Adding border property to cells

7.3 Table Headings

Headings in a table are defined with the <th> tag. This renders the text in the cell bold. Table
headings can be added to any cell in the table. Simply replace the existing <td> tag to <th>.
Remember to add the appropriate closing tag </th>.

In your HTML file, replace cells 1, 2 and 3 with <th> </th> as follows:

Figure 41: Adding table headings to an existing table

Save and run the HTML file. You will notice that cells 1, 2 and 3 now have a bold font to
denote them as headers as shown in Figure 42:

21
 Figure 42: Table with headings

However, you will also notice that the borders for these headings have been removed. This
is because when we use table heading tags <th> </th> we also need to create borders
around those cells. To do this, we will add ‘th’ to the list of selectors for table in CSS as
shown in Figure 43 below:

Figure 43: Adding a border to Heading cells in CSS

When you save and run your HTML file, this should now give the following outcome:

Figure 44: Table with headings that have a border

7.4 Spanning (Merging) Columns and Rows

Spanning, or merging, of cells can work from left to right using the colspan attribute, and
top to bottom using the rowspan attribute.

The colspan attribute, which means “column span”, will span the cell over the number of
cells that is specified. If we want a table cell to take up the space of 3 columns instead
of 1, we can set the colspan attribute to 3. The number specified indicated how many
cells will be merged.

<td colspan=”3”> text </td>

Now, let’s try it. In the table we have created in HTML, edit the code as show in Figure 45.

**Write the code accurately. Note that only one cell needs to be created for Row 3.

22
 Figure 45: Creating a table with spanned rows

Now, when you save and run your HTML file, you will notice that row 3 spans across
columns 1, 2 and 3 as shown in Figure 46 below:

Figure 46: Column spanning - table appearance in a browser

The rowspan attribute is similar to colspan, except that it will span down rows rather
than columns. Again, the cells that it spans should be removed.

<td rowspan=”3”> text </td>

Adjust your table to add the rowspan attribute as shown in Figure 47 below:

**Note that cells <td> will not be created for “Row 3: Cell A” and “Row 4: Cell B” as this is the
area that the rowspan will take up or merge.

23
 Figure 47: Creating the table with cell spanning down.

Figure 48: Row spanning – table appearance in a browser

7.5 Formatting Tables

As you may have noticed, if we do not include text or borders in our table, the table will
appear invisible to us! A table can make a big statement, or it can be very subtle. In fact, the
table can have no border at all and be used solely as a layout device for controlling the
page. We can use CSS to style the table to look how we want.

CSS Tip:
As previously shown with the borders, when we start to set the properties for tables using
CSS it is useful to know that you can use more than one selector with a CSS rule, separated
by commas. This saves time because you don’t have to write out the same properties for
each part of the table you want styled. For example, to change the colour of the text for both
the h1 and h2 headings. You can also specify a specific width in pixels or specify a
percentage of the screen for the table to take up. It is better use pixels to define the width so
that all the content contained within the table behaves predictably (i.e. if using
percentages, then the width will vary depending on the size of your screen).

24
You can use the border width, height & colour; and background properties of the table
element like this:

Width & Height:

Figure 48: Changing the table border width and height

Border colour:

Figure 49: Changing the table border colour

Background:

Figure 50: Changing the table background colour

25
7.6 Table Alignment
Just like with images, a table can be aligned to the left, right or centre of your webpage. This
feature is especially useful when putting your page’s content in a table. Then you can align
the table to be in the centre of your page, spanning for example 75% of the browser’s
window width.

Note: If you want to align the text in the table, remember to use the text-align property
you learnt in Workshop 2!

To align the table to the left or right, use the float property. For example:

Figure 51: Floating Table to the right

This should have the following outcome:

Figure 52: Floating Table to the right – browser appearance

Note: you can also align the table to the centre, you can use the margin-left and margin-
right properties. This should have the outcome presented in Figure 54.

Figure 53: Aligning Table to the centre using margin properties

26
 Figure 54: Aligning Table to the centre – browser appearance

Now you are all good to go! Good luck with your Website Project.

Please read the Website Project Brief available on Blackboard and Start
working on your project, applying what you have learnt from ALL the
workshops.

There is no glossary for this guide as it is not part of the quiz assessments. For additional
definitions or if you are just curious and want to learn a little more, you can use w3schools
for HTML, CSS or JavaScript reference lists.

We hope that by this time we have picked your interest – INFO 226 goes in-depth in some of
the coding areas such as CSS and JS.

27