1
This handbook accompanies the taught sessions for the course. Each section contains a brief overview of a topic for your reference and then one or more exercises.
Exercises are arranged as follows:
A title and brief overview of the tasks to be carried out;
A numbered set of tasks, together with a brief description of each; A numbered set of detailed steps that will achieve each task.
Some exercises, particularly those within the same section, assume that you have completed earlier exercises. Your teacher will direct you to the location of files that are needed for the exercises. If you have any problems with the text or the exercises, please ask the teacher or one of the demonstrators for help.
The exercises in this book are more than can usually be completed in the scheduled session. You can continue these exercises in your place of work, at home or at Computer8 sessions. Please see the back of this book for details about Computer8 sessions and information on downloading course materials for use at home.
1.2. Writing Conventions
A number of conventions are used to help you to be clear about what you need to do in each step of a task.
In general, the word press indicates you need to press a key on the keyboard. Click, choose or select refer to using the mouse and clicking on items on the screen.
Names of keys on the keyboard, for example the Enter (or Return) key are shown like this ENTER.
Multiple key names linked by a + (for example, CTRL+Z) indicate that the first key should be held down while the remaining keys are pressed; all keys can then be released together.
Text which you need to type in is shown like this.
Labels and titles on the screen are shown like this.
A button to be clicked will look like this or like this
The names of software packages are identified like this, and the names of files to be used like this.
3 ITLP
CSS Grid
HTML Boilerplate
1.4. Files Used
The files used are in exercise folders on the H drive labelled Exercise 1 through to 6. The Exercises themselves will tell you which files to open and with what
program.
1.5. Revision Information
Version Date Author Changes made
1.0 November
2011 Stephen Eyre Created
1.1 May 2012 Stephen Eyre Minor corrections and Exercise 7
1.5 Feb 2013 Stephen Eyre Additional exercise and new logos etc.
2.0 May 2014 Stephen Eyre Removal of CSS Grid and new exercises
2.1 Jan 2015 Stephen Eyre Minor corrections
1.6. Copyright
Stephen Eyre asserts his right to be identified as the author of this document and makes it and the accompanying PowerPoint presentation available for reuse under a Creative Commons licence (Attribution-NonCommercial-ShareAlike CC BY-NC-SA)
Screenshots are copyright of the respective software suppliers.
The Oxford University logo and crest is copyright of Oxford University and may only be used by Oxford University members in accordance with the University’s branding guidelines.
5 ITLP
1.1. The Exercises ... 2
1.2. Writing Conventions ... 2
1.3. Software Used ... 3
1.4. Files Used ... 3
1.5. Revision Information ... 3
1.6. Copyright ... 3
2 Contents ... 5
3 Introduction ... 7
3.1. What you should already know ... 7
3.2. What you will learn ... 7
3.3. Where can I get the tools I need? ... 7
4 Simple HTML5 and CSS3 ... 8
4.1. What is HTML5 ... 8
4.2. What is CSS3 ... 8
4.2.1. Browser compatibility and CSS3 ... 9
4.3. The example website ... 9
5 Starting from scratch or using templates ... 11
5.1. What are templates ... 11
5.2. Doing it yourself ... 11
5.2.1. Bootstrap ... 11
5.3. BlueFish: Your code editor ... 11
5.4. Other useful tools ... 14
6 The basic html site ... 15
7 Basic Styling in CSS ... 18
7.1. The CSS and how it connects to HTML ... 18
7.2. Class versus Identity ... 18
8 CSS for Layout ... 20
8.1. Divs ... 20
8.1.1. Using the DIV Tag ... 20
8.2. Box model ... 21
8.2.1. Box Types ... 21
9 CSS for Styling ... 23
9.1. Text ... 23
9.2. Text Shadow ... 24
9.3. Colours ... 25
9.4. Borders ... 25
10 Creating a Navigation Bar ... 28
10.1. Gradients ... 29
11 CSS Exercises ... 31
12 What next? ... 43
12.1. Useful web links ... 43
12.2. Downloadable Course Materials ... 43
12.3. Web design courses ... 43
12.4. Course Clinic ... 43
12.5. Other Courses ... 43
12.6. IT SERVICES Help Centre ... 43
7
This booklet accompanies the course delivered by IT Services , IT Learning Programme. Although the exercises are clearly explained so that you can work through them yourselves, you will find that it will help if you also attend the taught session where you can get advice from the teachers, demonstrators and even each other!
If at any time you are not clear about any aspect of the course, please make sure you ask your teacher or demonstrator for some help. If you are away from the class, you can get help by email from your teacher or from [email protected].
3.1. What you should already know
This session assumes that you are familiar with the basic features of websites and a little knowledge of html would be helpful. For example, you should be able to:
Locate and open websites
View and understand simple html files would be helpful Add and edit basic html would be helpful
The above tasks are covered in our Web Fundamentals course. The computer network in IT SERVICES may differ slightly from that which you are used to in your College or Department; if you are confused by the differences ask for help from the teacher or demonstrators.
3.2. What you will learn
This session covers the use of CSS in Web design. It concentrates on simple techniques of CSS. IT Services offers other courses that can help you with the design aspect of your websites (See section 10).
We will cover the following topics:
Using and specifying CSS documents in webdesign Creating simple effects using CSS3
Using gradients from other applications
3.3. Where can I get the tools I need?
Html and CSS including the latest versions can be written in simple text editors such as Notepad or TextEditor (on a mac), or edited in commercial software such as Dreamweaver. However there are some good middle ground tools that offer some of the luxuries of Dreamweaver whilst being free. The editor we use in this class is called BlueFish and is available at:
http://bluefish.openoffice.nl/index.html
Other tools used include a free gradient tool by Damien Galarza http://gradients.glrzad.com/
Firefox has some excellent web editing tools and these can be found at: https://addons.mozilla.org/en-US/firefox/addon/web-developer/
4 Simple HTML5 and CSS3
4.1. What is HTML5
Figure 1: the htl5 logo
HTML is a simple tag language that controls the structure of a document by defining content with function – headers, paragraph content, lists and other elements. Its main purpose is to provide the foundation of websites and although it was subsequently used to control design aspects, this was not its original purpose.
Not surprisingly, HTML is not a very efficient tool for controlling the way webpages look, and whilst web designers became quite creative with this re-deployment of HTML, there were always compromises and workarounds that used to result in pages loading slowly, especially when images were used to make the site's design look fresh.
Html 5 is a real attempt to move away from the compromises in previous versions and to lay out a clear content based tagging language that semantically
interpreted content but did not try to style it. HTML5 also has the most
comprehensive support thus far for video and audio so in future these elements can be incorporated straight into the core code.
9 IT Learning Programme look with attributes - colour, size etc. Every html element can be defined this way
and if a particular instance of html needs to look different, CSS will accept an ID tag or a class of object that will be listed in the CSS explicitly and have unique styling if necessary. Every aspect of a web page can be controlled and the most flexible way to do so is by using CSS.
CSS3 has added to the functionality and effects that could only previously be achieved using graphics packages can now be done natively in CSS3 – drop shadows, gradients, curved border corners etc.
Advantages compared to styling in html include: Controlling many pages with one style sheet Consistency in look across your site
Quick editing of an entire site Greater flexibility in layout Improved content accessibility
New effects such as drop shadows, gradients, and rounded corners
4.2.1. Browser compatibility and CSS3
Figure 3: Common Web browser icons
Working with any web standards such as CSS3 can be frustrating as you see older browser versions struggling to display the pages as you intended. A full list of browser compatibility can be seen in the link below but CSS3 has good support across all the latest browsers from chrome, Firefox, Safari, Internet Explorer and Opera.
http://www.w3schools.com/cssref/css3_browsersupport.asp
4.3. The example website
We will use a fully functioning example website for the lessons today. You can explore the website in the Exercise 1 on page 21. The website is styled using CSS for layout and effects such gradient backgrounds to the menu and curved borders around the main content areas. The site relies on a grid template to set it up after which, it is relatively simple to create the other features. The CSS styling is designed to be appealing but easy to manage and the stylesheet should be easy to use as a template that you might wish to build upon.
11 IT Learning Programme
5 Starting from scratch or using templates
5.1. What are templates
Templates allow you to build webpages that have certain things standardised before you start. General templates will deal with the common elements that make up a webpage – text, lists etc.
A layout template like Bootstrap will divide the page into easily manageable sections (like a table) that allows you to use as much or as little of it as you wish. They are generally grid like by design. You choose how much of the grid you want to reveal in your page. You may only need a few areas to put your information, or you might be planning something more complex – the grid will accommodate both designs.
Another important feature of a grid is that it is scalable. Many sites are now viewed on mobile devices and a good grid template will deal with how the page looks across a range of viewing devices.
5.2. Doing it yourself
Starting from scratch is a good idea for small sites and to develop skills but templates offer a lot of options that allow you to create bigger interactive sites with consistency. Using a template
5.2.1. Bootstrap
Using templates offer several distinct advantages and the most used template can be found at:
http://getbootstrap.com/
5.3. BlueFish: Your code editor
This class is using a code editor called Bluefish to create the files that generate the webpage. There are many choices available for editors, ranging from free, cross-platform open-source editors like Bluefish, to commercially available options such as Dreamweaver. Dreamweaver is comprehensively supported in the ITLP curriculum and has many sophisticated features that are not necessary for an introduction to CSS. Bluefish represents a simple but effective editor that allows us to clearly see the workflow from entering information in a style sheet and seeing the result in a browser.
Features include:
Fast - Bluefish starts very quickly and loads many files within seconds. A What You See Is What You Need interface
Can open many documents at same time.
Project support, enables you to work efficiently on multiple projects, and automatically restores settings for each project.
Multi-threaded support for remote files using WebDAV Powerful search and replace
In-line spell checker which is programing language aware Auto-recovery of changes in modified documents after a crash. File synchronisation
Many tools such as tabs to spaces, join lines, lines to columns, strip whitespace, etc.
Customizable programming language support:
In-line reference information (move your mouse over a function name or tag name) for various programming languages
Highlighting matching block start and end markers (both brackets and tags) Auto-completion and auto-tag-closing for many programming languages, with reference information, and even for nested languages (e.g. css and javascript inside html code that is inside a php document)
with included language definition files for: ASP .NET and VBS
C/C++ CSS
HTML, XHTML and HTML5 Java and JSP
JavaScript and jQuery Octave/MATLAB MediaWiki PHP Python Ruby SQL SVG Wordpress XML Bookmarks functionality
HTML toolbar and tearable menu's Fully featured image insert dialog
Thumbnail creation and automatically linking of the thumbnail with the original image
Multi thumbnail generation for easy creation of photo albums or screenshot pages
13 IT Learning Programme
Figure 5: The Bluefish editor - a good basic cross-platform html and css editor
5.4. Other useful tools
Firefox has some excellent add-ons for web development. The web developer tools are already mentioned but in addition to those tools, Firebug and Colourzilla are must-haves.
The free availability of such tools might appear daunting at first but there is no need to start using them all at once. Coding design in CSS is a process like s much else in design and there will be a time when it makes sense for you to explore tools rather than feel intimidated by countless options at the start. Being aware that browsers like Firefox will offer considerable help when you are ready is probably enough to start with.
Figure 6: Clicking on the Tools menu in Firefox leads to the Web Developer selection of add-ons
15 IT Learning Programme
6 The basic html site
The html contains the following sections:
The <head></head> material which is mainly meta data and mapping to CSS ands other external functions if appropriate
The <body></body> which contains the content of the displayed site. In our example site, the body has three sections; a header, a main area for the
changeable content, and a footer area for static material once again. These three sections are in <div> tags with the header and footer acting as <div> and the main section being a <div>. All three are called containers.
The following page has the home page's html laid out as it appears in the BlueFish editor in its final version. Try and identify each of the sections. Because there is no styling involved or nested tables to look through, the document is easy to read and clear. It simply lists the content in its order, on the page. In fact you can see what this pure html looks like after the html code in Figure 6
17 IT Learning Programme
7 Basic Styling in CSS
7.1. The CSS and how it connects to HTML
Html and CSS work together by the way html elements or specific instances of an html element are mapped to, and formatted in the CSS stylesheet. For instance, most html documents will have text headings - H1, H2 etc. These are then listed in the CSS stylesheet where they are defined in terms of the font, size, weight, and colour. Any further styling such as italicising is also defined as is any specific spacing using the padding property. So the html document points to the style sheet in which tags or identifiers for specific elements (see below) are explicitly mentioned. The style sheets then defines how that element or instance of the element is to be displayed. CSS can be entered in-line with the html, embedded at the top of a html page, or an external stylesheet can be referred to in the html file. This is the preferred way to style many webpages including today's example as it allows every element to be defined once in the stylesheet and for it to apply to every instance of the html.
If we define what a H1 heading should look line using in-line CSS, only that specific H1 tag will be affected. If we embed the CSS at the top of the html page, only H1 tags in that html page will be affected. But if we map all the html pages of a website to a single external stylesheet, then every H1 tag will be styled with the properties and values we have chosen.
If you want to define a specific instance of an element that is used many times in a html document, you have two choices. You can give the element a 'class' or to be even more specific you can give it an' identity'
The standard syntax for CSS is the following: selector {
property: value }
The selector is the element that is in the html, either as a tag such as ‘p’ or as a class of object, such as ‘right box’, or as a specified instance of an object – an object with an ID such as ‘footer’ for a div that will sit at the bottom of the page and have material suitable for that location (date, copyright information). The property is the aspect of the selector we wish to format – colour, placement, size etc.
The value is the specific measurement we are using to define the property: ‘red’ for a colour, ‘18px’ for a specific size, ‘left’ for placement.
19 IT Learning Programme ID for the element works well. This is a a way of tagging specific elements so they
can be styled separately from any other element.
The key difference in operation between classes and identities is that an identity must only be used once in a style sheet - it enables a unique styling for a single element. Classes may well be specialised forms of elements but they still might appear more than once - the use of class actually indicates you are interested in having the element in your document more than once with the same styling.
8 CSS for Layout
8.1. Divs
The DIV element defines logical divisions on your web page. It acts a lot like a P element, by placing newlines or carriage returns before and after the division. A division can have multiple paragraphs in it.
8.1.1. Using the
DIVTag
To use the DIV element, surround the area of your page that you want as a separate division with the <div> and </div> tags:
<div>
<p>contents of div</p>
</div>
If the area is unique on the page, you can add an id, e.g. <div id="myDiv"> or if there are many similar areas onthe page, you can add a class, e.g. <div
class="bigDiv">. Both of these attributes can then be selectted using CSS or
modified using JavaScript.
The DIV element allows you to define the style of entire sections of the HTML. You can define a division of your page as a callout and give that area a different style from the surrounding text. That area may have images, paragraphs, headlines, anything you wanted. The DIV element also gives you the ability to identify unique areas of your documents.
The DIV element is different from the HTML5 SECTION element because it does not give the enclosed content any semantic meaning. If you aren’t sure whether the block of content should be a DIV or a SECTION, think about what that content’s purpose is and why you need the DIV or SECTTION element.
If you need the element simply to add styles to that area of the page, you should use the DIV element.
If that area of the page has a specific semantic meaning or the contents can stand on its own like an article or or blog post, then you should use the SECTION element.
One thing to keep in mind when using the DIV element is that it breaks paragraphs. It acts as a paragraph end/beginning, and while you can have paragraphs within a DIV you can’t have a DIV inside a paragraph.
The most important attributes of the DIV element are: style
class id
21 IT Learning Programme To understand positioning in CSS you must first understand the box model. For
display purposes, every element in a document is considered to be a rectangular box which has a content area surrounded by padding, a border and margins. The illustration below shows these various parts.
Margins are always transparent. Borders come in different styles. Background settings for an element apply to the area just inside the borders which includes both the padding and content areas.
Figure 1 Figure 9: The CSS box model
In CSS margins, borders and padding are all optional but for purposes of calculating positions and sizes they are given a default width of zero if not specified. Different widths can be set for each individual side (top, right, bottom and left) if desired. Margins can even have negative values.
The width and height of each box is equal to the width and height of the outer margin box. Note that this is not the necessarily the same as the width and height of the content area.
A box can contain any number of other boxes, creating a nesting of boxes that corresponds to the nesting of page elements. The browser window serves as the root element for this hierarchy.
8.2.1. Box Types
There are two basic types of boxes, block and inline. Block boxes are generated by elements such as P, DIV or TABLE. Inline boxes are generated by tags such as B, I or SPAN and actual content like text and images.
The box type may also be set using the display property. Setting a value of block on an inline element, for example, will cause it to be treated as a block element. Note that if you set the display to none, no box is created. The browser acts as if the element did not exist. Likewise, any nested elements are ignored as well, even if they specifically declare some other display value.
There are other types of boxes which apply to special elements like lists and tables. However, these are ultimately treated as block or inline boxes for positioning purposes. As such, these other box types not covered here.
Block boxes act as a containing block for any boxes within them. For example, in this code:
<div> This is the first sentence. <p>This is the second sentence.</p> </div> the DIV element establishes a containing block for both the first string of text and the P element. The P element in turn creates a containing block for the second text string.
It's interesting to note that while the text of the first sentence in the above
example generates an inline box, there is considered to be block box surrounding it. These "anonymous" block boxes are used to simplify the positioning process. The result is that a block box will only contain either all inline boxes or all block boxes, even if some of those block boxes only act as a wrapper for an inline box. This containing block is used in determining both the position of the boxes within it and in some cases, the dimensions of those boxes. For example, if an element has a style setting of width:50%; its width will be set to half the width of its containing block.
For any element that is not absolutely positioned, the containing block is
considered to be the content edge of its most recent, block-level ancestor. If none exists, the browser window serves as the containing block. Absolutely positioned elements are discussed separately.
8.2.3. Positioning Schemes
There are three positioning modes or schemes in CSS2: normal, float and
absolute. Each has its own set of rules. Every box is positioned using one of these schemes but different boxes will use different schemes depending on their position and float style settings.
8.2.4. Normal Flow
Normal flow is the default scheme used for positioning. It applies to any element that does not specify position:absolute or fixed and is not floated.
In this scheme, block boxes flow vertically starting at the top of their containing block with each placed directly below the preceding one. Inline boxes flow horizontally from left to right.
You should note that vertical margins are collapsed in the normal flow. That is, instead of adding the bottom margin of a box to the top margin of the one
immediately below it, only the larger of the two values is used, as illustrated here. Horizontal margins, however, are never collapsed.
8.3. Float
23 IT Learning Programme
9 CSS for Styling
9.1. Text
In our example page we have a simple selection of text styles. Here's the Heading level 1 CSS definitions:
h1
{ font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
color: #26466d; text-align: center; padding: 15px; }
Figure 10: H1 style as set by the CSS
Firstly the h1 outsides the brackets defines the selector (the html element) the following styling in the bracket applies to - in this case the Heading level 1 text. In the brackets we have the properties of that selector and the values to display. Lets go through them:
The font family is the property which decides which font will display in the web browser. It is not as simple as dining a specific font. If that font is not available on the users computer, the heading will default to a standard font you may not want to use. It is safer and common practice to define the font specifically but to give more than one option in case that font is not an option, then to broaden the choices until you just define whether the font is serif or sans-serif. Serifs are the small semi-structural curves applied to some strokes of fonts such as Times new Roman and sans-serif is any font that does not have these - Arial would be a common example.
So in our heading 1 example, we give 3 specific fonts: Helvetica, Geneva, and Arial, SunSans-Regular.
Then we give a broader definition in case those fonts are not present:
Sans-serif which will select any font that is available that does not have serifs. The next property is the colour.' Color' is spelt without the 'u' in html which indicates the tags are Americanised in their use of English. The value can be given as RGB values, hexadecimal values (as used in this example website), or as the colour name itself in the case of basic choices such as red, black and white. The colour value for the H1 tag in this website is a medium dark blue and the hexadecimal number is '#26466d;'
The next property listed is the alignment of the text: center in this case. Note the American spelling of 'center'
The final property to be listed is padding. This is the amount of space around the text. You can explicitly give different values for each side of the text (left, right, top, bottom) but here we are satisfied with having the padding value constant
around the text.
In our Heading one that is the end of the properties and the heading 1 will appear in a web browser as Helvetica (first choice), a medium dark blue, centred, and with 15 pixels of space around the text. Many other properties and values can be entered to define headings and any other text element. Choices of font style such as italicising, and a background.
9.2. Text Shadow
Modern browsers that accept CSS3 standard can show text shadow effects that can allow the text to seem embossed as well bevelled. There are some fine examples of this technique at:
http://www.midwinter-dg.com/permalink-7-great-css-based-text-effects-using-the-text-shadow-property_2011-03-03.html
The general principle is to create either one or two lines of css that look like this: text-shadow: 0px 1px 1px #ffffff;
The px numbers are placing the effect horizontally, vertically and setting the amount of diffusion. All these settings will normally be small unless a wilder effect is desired. The final setting is the colour for the shadow and this can be displayed in any of the normal formats; hexadecimal, RGB values etc. Opacity is also supported. Repeating the line to create another ‘shadow’ on the same text allows for more 3 dimensional effects to be realised.
The choice of colours to make up the shadow is critical in giving the effect – making the shadow colour close to the background or text seems to work better for letter-press effects.
Figure 2 Figure 11: Using text shadow code to create a letterpress effect
h2 {
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
25 IT Learning Programme color: #26466d;
text-align: center; padding: 10px } h4 {
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
color: #26466d; text-align: center; padding: 5px } p {
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
padding: 20px;
9.3. Colours
Specifying colours in a style sheet is simple and colours can be specified in one of at least three ways; RGB values, hexadecimal numbers or, for standard colours, the name itself. The hardest aspect to giving a colour is knowing what numbers refer to what colours.
There are some good resources available on the web to give you visualisations for the numbering system you are using. A good place to start (in all things related to html and CSS generally) is the W3Schools site. Their section on CSS and colour starts at:
www.w3schools.com/cssref/css_colors.asp
9.4. Borders
A wide variety of border effects can be achieved with CSS - from simple choices such as solid or dotted lines through to curved edges and drop shadows. As a general design principle, it is probably best to choose one general 'look' and stick to it throughout a site. The table below shows some choices you can make:
Figure 12: Some examples of common border choices
Border attributes tend to work together and one set of parameters may rely on another attribute being present; for instance, the border width property needs the border style property to be present for it to work. This is the CSS syntax for a thin solid border with rounded edges - used throughout the example site:
#MainNews6 { border: solid; border-width: thin; border-color: #26466d; border-radius: 25px }
The #MainNews6 is the div ID for the Rounded Corners border in Figure 3. Each line of CSS defines a parameter. The border is defined as solid, then thin. The color is set using a Hexadecimal value (a shade of blue in this case) and the radius of the border curves is set by one line as each curve will be the same. If we look at the CSS for MainNews4 we can a specific border radius being set of a corner: border: solid;
border-width: thin; border-color: #26466d;
27 IT Learning Programme allow a border to be used. This means the border is within the main column and
therefore not adding to the column's size:
Figure 13: The CCS Grid Column hosts another div (virtually the same size in reality) that has the border - thus allowing all the columns to fit.
10 Creating a Navigation Bar
Figure 14: The example sites navigation pane
One of the simplest ways to create a navigation bar to link to your different pages in the same way wherever you are in the site is to create an unordered list which sits in the same place on each page. The html will for the example site looks like this:
<div id="vertmenu"> <h3>Navigation</h3> <ul>
<li><a href="index.html" tabindex="1">Home</a></li>
<li><a href="biography.html" tabindex="2">Biography</a></li> <li><a href="published.html" tabindex="3">Published Works</a></li> <li><a href="form.html" tabindex="4">Contact</a></li>
<li><a href="links.html" tabindex="5">Links</a></li> </ul>
</div>
The <div> tag is given an id so that this specific area can be styled with CSS. The id of 'vertmenu' is called in the stylesheet and the brackets contain information that only styles this particular <div>. This is a common ad useful way to style specific instances of common tags such as <div>. Lets have a look at the CSS: #vertmenu {
font-family: Verdana, Arial, Helvetica, sans-serif; padding: 20px;
29 IT Learning Programme sheet can call and style as a single item. The font is set and the padding gives
space between the text and the edges of the cell as it appears on screen. Because this <div> is within the CSS Grid threecol <div> we can safely set a border here as well.
#vertmenu ul { list-style: none; }
This removes bullet points from the list items. #vertmenu ul li a {
font-size: 80%; display: block;
border-bottom: 1px dashed #E62E19; padding: 5px 0px 2px 4px;
text-decoration: none; color: #26466d; }
The font size reduction is another way to change the size of text as it appears. Each unordered list item can have a border and the example site has a border bottom visable to act as a visual line break between the navigation items - and to add some colour - #E62E19. Padding is set around each list item and the text decoration line refers to the lack of underlining for the links. Finally the font color is set.
#vertmenu ul li a:hover, #vertmenu ul li a:focus { color: #000000;
background: -moz-linear-gradient(0% 5% 78deg,#FFFDFC, #B0FFCD, #9FCEFC 100%);
}
10.1. Gradients
This CSS is stating that a change will occur when the mouse hovers over one of the list items. A background gradient colour will appear to denote that the specific list item is ready to be clicked. Gradients can be hand written just as any CSS can, but it can be complicated to start with and there are plenty of online tools to create gradient code for you. The one used for this lesson is:
http://gradients.glrzad.com/
31 IT Learning Programme
11 CSS Exercises
Exercise 1: Create a basic CSS layout
Use BlueFish to open layout.html Create a layout using <div> tags
Use a browser (Firefox) to view your page
Task 1
Open layout.html in
BlueFish – a blank template
page which has the head
section and a map to a CSS
page – also created but
blank.
Step 1
Enter three <div> tags in the empty body tags
In each div tag put a paragraph – text: one, two
three:
<div><p>one</p></div>
<div><p>two</p></div>
<div><p>three</p></div>
Task 2Lets get some basic CSS up
and running now. In CSS
page give the divs a yellow
background – not pretty but
good for seeing what’s
what:
Step 1
In the same folder as layout.html, open styles.css Enter the following:
Div { background-color: yellow; } Task 3
Now lets set the body width
first.
Step 1
Above the div rule, enter: body {
width: 70%;
margin-left: auto;
margin-right: auto;
Now lets give these divs a
proper width layout -
We need to float our divs –
which means giving them
individual classes in the
html and then using CSS to
position them
Now we can give them
width – and margins –
remember the box model
rules!
In layout html, add a class to each opening div tag so your code looks like this:
<div class="left"><p>one</p></div> <div class="middle"><p>two</p></div> <div class="right"><p>three</p></div>
Now lets enter the CSS for each of these classes in styles.css. remove the div rule and enter the following. Once you have entered the rule for .left you can copy and paste this twice and make the necessary small amendments from the code below to save time: .left { float: left; width: 30%; margin-right: 3%; background-color: yellow; } .middle { float: left; width: 30%; margin-right: 3%; background-color: yellow; } .right { float: right; width: 30%; background-color: yellow; } Task 5
View your webpage!
In the program interface, click on the browser view to open up Firefox and view your webpage.
33 IT Learning Programme
Borders
Looking good – we have three nicely laid out columns – but time to think about borders.
Borders are problematic when doing layouts because they add to the overall space taken up
by the row of columns – so if you spend time making sure whichever measuring system you
are using (percentage or pixels for example) takes up all the available space, adding a border
will add further pixels to your layout causing the last column to start on a new row beneath
the other two (Assuming we are working with three columns as in these exercises). Not a
good outcome.
We have two options:
1. build in some ‘give’ to our measurements so that the borders are accommodated.
2. created a set of divs inside the original ones that exist purely to handle borders. This
means that the borders will take up space within the predefined column – not adding
to the overall measurements.
The second option is the easiest to manage in terms of laying out your page but it does clutter
the html with another set of divs – and of course another set of CSS rules for them. I think it is
preferable though overall.
Exercise 2: Add borders and a new row
Add border div tags to the html Style the borders in the CSS Enter new content
Use a browser (Firefox) to view your page
Task 1
Open layout.html in
BlueFish
Step 1
Add the following div tags within the current ones:
<div class="border"> … </div>
the finished code will look like:
<div class="left"><div
class="border"><p>one</p></div></div>
<div class="middle"><div
class="border"><p>two</p></div></div>
<div class="right"><div
class="border"><p>three</p></div></div>
In Styles.css enter
some rules for the
borders in a new class
Under the existing rules enter: .border { border: thin; border-style: solid; border-color: black; } Task 3
Lets tidy up the
paragraph text with
some css
Step 1
Under the existing rules enter: p {
font-family: arial; margin: 3%; }
Task 4
Now lets add some
more text to simulate a
more realistic web
content
Step 1
In the H drive open CSS Text.docx
copy para 1 into the first <p> tag where ‘one’ currently is. Note the text to copy has the <p> tags too so you can replace the existing ones in your code
Copy para 2 into the other <p> tags
You will have columns with differing amounts of content.
Task 5
View your webpage!
In the program interface, click on the browser view to open up Firefox and view your webpage.
35 IT Learning Programme
New rows
When you want another row of columns you might think you simply have to cut and paste the
divs you have already setup to repeat the layout on a new row. This is true but you must insert
a break with a special CSS property in-between each row to ensure they start as separate
rows.
First try just pasting the existing div tags again and see what happens. If you have one column
with more content than the others the result is unexpected and not desirable! The difference in
column heights means that the new line of divs can’t float to the left and be a new row. We
need some way to make a distinct break between the divs. We use the <br> and give it a class
of clear. Here it is in the html
Exercise 3: Add a new row
Copy and paste the existing layout View the result and problem
Enter a rule to a line break to cure the problem Preview your work
Task 1
Open layout.html in
BlueFish
Step 1
Copy the code in-between the <body> tags and paste it
again underneath and check the result – not what you
might expect
Task 2
Try and fix the problem
using a line break
Step 1
Inbetween the two copies, enter a line break: <br>
check the result – it doesn't work!
Task 3
Lets use some css to
solve the problem.
We give our <br> a
class and then enter a
rule in styles.css
Step 1
In the html give the <br> a class: <br class="clear">
And now under the rest of the rules in the CSS, enter: br.clear{ clear: both;}
Task 1
Enter a margin rule in the main <div> tags to add some space
In the css, in each of the left, middle and right rules, add a line:
margin-bottom: 2%;
Task 2
View your webpage!
In the program interface, click on the browser view to open up Firefox and view your webpage.
Exercise 4: Create a row of images
Create the div tags for your images Insert images into the divs
Create rules to manage the divs and images in CSS
Task 1
Create 4 div tags with
border divs inside
Step 1
Enter the following tags under the last paragraph of main text: <div><div></div></div> <div><div></div></div> <div><div></div></div> <div><div></div></div> Task 2
Create a class for outer divs and border class for inner divs
Step 1
Your code will look like this when finished: <div class="pic1"><div class="picborder”></div></div> <div class="pic2"><div class="picborder"></div></div> <div class="pic3"><div class="picborder"></div></div> <div class="pic4"><div class="picborder"></div></div> Task 3
Insert 4 pics into divs
Step 1
Insert four images into the inner div tags by entering: <img src="images/pic1.jpg" alt="test" id="pic1"> Change pic1.jpg to pic2.jpg – pic4.jpg in each inner div tag so you map to the four different images in your images folder.
Your code will look like this:
<div class="pic1"><div class="picborder"><img src="images/pic1.jpg" alt="test"
id="pic1"></div></div>
<div class="pic2"><div class="picborder"><img src="images/pic2.jpg" alt="test"
id="pic2"></div></div>
37 IT Learning Programme Preview your work – what a
mess! We need some CSS to help us sort this out.
Open styles.css and give
rules for outer div classes –
float and percentages
Give our image id’s a width
In styles.css enter the following code at the bottom to style the width of the outer divs – the first three are identical so copy and paste and just change the class name: div.pic1 { width: 20%; float: left; margin-right: 6%; } div.pic2 { width: 20%; float: left; margin-right: 6% } div.pic3 { width: 20%; float: left; margin-right: 6% } div.pic4 { width: 20%; float: right; }
#pic1 { width: 100%; } #pic2 { width: 100%; } #pic3 { width: 100%; } #pic4 { width: 100%; } Task 5
Add a br.clear tag to end
this section so further
content starts reliably below
Preview work
In index.html, add the following code under the divs we created for the images to end that section just above the <hr> tag:
<br class="clear">
check our the page – getting better!
Task 6
Give rules for border class
Pics don’t fit
Back in the CSS add the following code to style our border divs: div.picborder { border-color: red; border-style: solid; border-width: thin; border-radius: 15%; }
39 IT Learning Programme
Give pic ids a border radius
and a minus margin-bottom setting to take care of the white space – your image id rules will look like thiswhen finished: #pic1 { width: 100%; margin-bottom: -3%; border-radius: 15% } #pic2 { width: 100%; margin-bottom: -3%; border-radius: 15% } #pic3 { width: 100%; margin-bottom: -3%; border-radius: 15% } #pic4 { width: 100%; margin-bottom: -3%; border-radius: 15% } Task 8
Preview your work
Exercise 5: Create a two column layout for the main text
Create two columns for main text area Float and space the columns
Add a back ground gradient effect for the second column
Task 1
Add div tags around the
main text and underneath
Give this divs the classes
teaching and research
Add some content
Step 1
Add <div> tags before and after the <p> tags that wrap the main text.
Add
<div></div> underneath the main text
Copy the <p> tags and their content and paste it into the empty div tags you have just created. Check this in preview to make sure you have two lots of text in the browser.
Task 2
Ad br clear after image and
after research div close tag
Step 1
Add:
<br class=”clear”>
after the image StevePicForITLP.jpg
and also after the <div class=”research”> closing tag (</div>).
Task 3
Create some CSS for the
div tags
Step 1
In styles.css, add the following code to style the new div tags: div.teaching { width: 55%; float: left; margin-right: 5%; } div.research {
41 IT Learning Programme Lets add a background
gradient to the research div Add a border radius
Go to http://www.css3factory.com/linear-gradients/
And using the tool create a gradient using two colours of your choice
Copy the code and paste it into the bottom of your div.research CSS rule.
Add this code to the class to give a small radius border: border-radius: 5%;
Task 5
Preview your work
Exercise 6: Create an text shadow effect for the H1 tag
Edit the H1 style to include a text shadow effect that mimics engraving Experiment with different CSS styling
Save and preview the index.html
Add a rule to the H1 CSS
Step 1
Open the Styles.css file.
Use the Save As to create a new file that matches a link from the navigation menu
Step 1
Enter the line of code as shown below in the H1
CSS entry:
Text-shadow: 0px 1px 1px #D2FFFF;
Step 2Save the file and preview the index.html file in Firefox to see the effect.
Exercise 7: Further ideas
Go to publications.html and create a few more entries (or copy and paste existing ones!). Create <div> tags around each section with a class and make a gradient as a background.
In biography.html create a multi column layout for the main section and pull some text from your department/college website to fill another column with supporting information for your biog.
In the layout exercise experiment with different border styles and positioning using padding and margins.
43 IT Learning Programme
12 What next?
12.1. Useful web links
http://www.w3schools.com/ http://www.alistapart.com/
http://getbootstrap.com/
http://html5boilerplate.com/
12.2. Downloadable Course Materials
These course materials, plus the files you need to complete the exercises, are available through our Portfolio web portal:
http://portfolio.it.ox.ac.uk
12.3. Web design courses
There are several strands of web support in The ITLP courses and wider support for web based work in IT SERVICES from the InfoDev team. ITLP runs courses that are aimed at beginners with titles such as Web Fundamentals.
The popular Dreamweaver software from Adobe is fully supported with 6 courses ranging from getting to grips with the software through to incorporating video and audio in your web projects.
ITLP also offers courses on online presence and social media which offers a mixture of web based skills allied to academic promotion and networking.
12.4. Course Clinic
We encourage everyone to work at their own pace. This may mean that you don’t manage to finish all of the exercises for this module. If this is the case, and you would like to complete the exercises while someone is on hand to help you, come along to one of the Computer8 sessions that run during term time. More details are available from www.it.ox.ac.uk/courses/
12.5. Other Courses
For the most recent information and to reserve a place on a course please visit the IT SERVICES IT Courses webpage visit www.it.ox.ac.uk/courses
12.6. IT SERVICES Help Centre
The IT SERVICES Help Centre is open from 8:30 am to 8:30 pm, Monday to Friday. You can use the facilities to work through the exercises in this booklet, or use any of the applications that are available.
The Help Centre is also a good place to get advice about any aspect of using computer software or hardware. You can contact the Help Centre on (2)73200 or by email on [email protected]
IT Learning Programme
An Introduction
Your teacher is: Stephen Eyre Your demonstrators are:
We finish at: 12.15 You should have: Course Book Your teacher is: Stephen Eyre Your demonstrators are:
We finish at: 12.15 You should have: Course Book
Where is the fire exit? Beware of hazards Tripping over bags and coats
Please tell us if anything does not work Let us know if you have any other concerns
2
The toilets are along the corridor just outside the teaching rooms
The rest area is where you registered; it has vending machines and a water cooler The seats at the computers are adjustable You can adjust the monitors for height, tilt and brightness
CSS and HTML BlueFish Layout Styling a website What next? CSS and HTML BlueFish Layout Styling a website What next?
CSS3 and HTML5
HTML: Hyper Text Markup Language
CSS: Cascading Style Sheet
Semantic meaning!
Article, Aside etc. -what things are!
Form controls Media
4
Html points to CSS
CSS lists HTML tags, classes or identities CSS Defines attributes
HTML takes on CSS style
Stylesheet In-page In-line
CSS happens in three places!
Tag = Class = id = <h1> or <div> <div class=“threecol”> <div id=“MainNews”>
(a class and id can be attached to a tag simultaneously)
Text
<h1>
6
Hello this is some content for test purposes. Hello this is some content for test purposes. Hello this is some content for test purposes. Hello this is some content for test purposes. Hello this is some content for test purposes. Hello this is some content for test purposes. Hello this is some content for test purposes. Hello this is some content for test purposes. Hello this is some content for test purposes. Hello this is some content for test purposes. Hello this is some content for test purposes. Hello this is some content for test purposes. Test test test test test test
margin
border
padding
content
Borders and colour
Gradient effects
Gradients: Damien Galarza’s site
8
Text shadow
WordPress:
courses covers setup, tagging, and more
Social Media:
A growing area with courses on Twitter, LinkedIn, and Facebook
Web:
Fundamentals
Online Presence:
2ndcourse coming in Michaelmas
Course Clinic
}
As often as you like…
