Web publishing: An introduction to CSS 1 1 How to Use this User Guide 1.1. The Exercises 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. ITLP 2 1.3. Software Used BlueFish FireFox 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 Stephen Eyre Created 2011 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. 3 ITLP ITLP 4 2 Contents 1 How to Use this User Guide ...................................................... 2 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 8.2.2. Containing Blocks ................................................................................ 22 5 ITLP 8.2.3. Positioning Schemes ............................................................................ 22 8.2.4. Normal Flow ........................................................................................ 22 8.3. Float ................................................................................................. 22 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 ITLP 6 3 Introduction Welcome to the Web publishing: An Introduction to CSS course. 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