Web publishing: An introduction to CSS

Transcription

1 Web publishing: An introduction to CSS 1

2 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 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

3 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 Revision Information Version Date Author Changes made 1.0 November 2011 Stephen Eyre Created 1.1 May 2012 Stephen Eyre Minor corrections and Exercise 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

4 ITLP 4

5 2 Contents 1 How to Use this User Guide The Exercises Writing Conventions Software Used Files Used Revision Information Copyright Contents Introduction What you should already know What you will learn Where can I get the tools I need? Simple HTML5 and CSS What is HTML What is CSS Browser compatibility and CSS The example website Starting from scratch or using templates What are templates Doing it yourself Bootstrap BlueFish: Your code editor Other useful tools The basic html site Basic Styling in CSS The CSS and how it connects to HTML Class versus Identity CSS for Layout Divs Using the DIV Tag Box model Box Types Containing Blocks ITLP

6 Positioning Schemes Normal Flow Float CSS for Styling Text Text Shadow Colours Borders Creating a Navigation Bar Gradients CSS Exercises What next? Useful web links Downloadable Course Materials Web design courses Course Clinic Other Courses IT SERVICES Help Centre ITLP 6

7 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 from your teacher or from 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 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: Other tools used include a free gradient tool by Damien Galarza Firefox has some excellent web editing tools and these can be found at: 7

8 4 Simple HTML5 and CSS 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 redeployment 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 What is CSS3 Figure 2: The CSS3 logo Cascading style sheets (CSS) are designed to work with mark up languages (including html and xhtml) to separate the presentation of the document (the way it looks) and the content layout. CSS deals with the aspects like the colour, size, shape of text and headings, background colours or images, list display features and form presentation. ITLP 8

9 The way CSS does this is to refer to elements in the html and then define their 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 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 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. 9 IT Learning Programme

10 Figure 4: The example website styled with css ITLP 10

11 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 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 Bootstrap Using templates offer several distinct advantages and the most used template can be found at: 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, crossplatform 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 11 IT Learning Programme

12 Full screen editing 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 User-customizable toolbar for quick access to often used functions ITLP 12

13 Figure 5: The Bluefish editor - a good basic cross-platform html and css editor 13 IT Learning Programme

14 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 ITLP 14

15 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 15 IT Learning Programme

16 Figure 7: The html for the example website ITLP 16

17 Figure 8: The example website without CSS styling 17 IT Learning Programme

18 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 Class versus Identity Quite often this issue arises with generic elements such as a <div> tag. Giving this element a class means that you can say every time the element has this class, it can be defined in a certain way - it will look a certain way whenever it has a class. You could have a class of a <div> tag called 'left' and it would be styled to be on the left hand side of the page so whenever you wanted some content to appear on the left of your page you would put it into a <div> with the class 'left'. ITLP 18

19 When you want to be more specific about an element you wish to style, using an 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. 19 IT Learning Programme

20 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 Using the DIV Tag 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 Even if you don t use style sheets or DHTML, you should get into the habit of using the DIV element. This will give you more flexibility and future proof your HTML. Because the CENTER element has been deprecated in HTML 4.0 and is obsolete in HTML5, it is a good idea to start using <div style="text-align: center;"> to center the text inside your DIV elements instead. ITLP 20

21 8.2. Box model 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 Box Types 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. 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. 21 IT Learning Programme

22 Containing Blocks 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 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 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 Float Floating is achieved by setting the float property on an element's style to either left or right. Special rules apply to floated elements. When specified, the box is positioned vertically as it would be within the normal flow, its top aligned with the top of the current line box. But horizontally, it is shifted as far to the right or left of its containing block as possible, within that block's padding (just like other content). Surrounding inline content is then allowed to flow around the opposite side. ITLP 22

23 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 23 IT Learning Programme

24 around the text. The value is 15px. 'px' stands for pixels so the padding is 15 pixels 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 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: 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; color: #26466d; text-align: center; padding: 15px; h3 { font-family: Helvetica, Geneva, Arial, ITLP 24

25 SunSans-Regular, sans-serif; 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: 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: 25 IT Learning Programme

26 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; border-bottom-right-radius: 45px The diagonal oposite would be set with the line: border-top-left-radius: 45px On potential issue with borders and grid systems like CSS Grid is that borders will add a small amount of size to the div they apply to so if you give the CSS grid column a border it will mean that the row will not be able to fit all the column in as the borders will force them to take up too much space. The way to work around ITLP 26

27 this is to create a div within the main div with an ID that is specifically created to 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. 27 IT Learning Programme

28 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; margin: 0px; border: solid; border-width: thin; border-color: #26466d; border-radius: 25px ITLP 28

29 The < div> that contains the list has been given an ID 'vertmenu' that the CSS 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%); 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: The interface is simple to use and supported by Exercise 6 in this class. 29 IT Learning Programme

30 Figure 15: The CSS3 Gradient generator webtool by Damien Galarza ITLP 30

31 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 2 Lets 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; 31 IT Learning Programme

32 Task 4 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! Step 1 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. ITLP 32

33 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> 33 IT Learning Programme

34 Task 2 In Styles.css enter some rules for the borders in a new class Step 1 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 Task 4 Now lets add some more text to simulate a more realistic web content Step 1 Under the existing rules enter: p { font-family: arial; margin: 3%; 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. ITLP 34

35 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 Task 2 Try and fix the problem using a line break Step 1 Copy the code in-between the <body> tags and paste it again underneath and check the result not what you might expect 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 Task 1 Enter a margin rule in the main <div> tags to add some space Task 2 View your webpage! 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; In the css, in each of the left, middle and right rules, add a line: margin-bottom: 2%; In the program interface, click on the browser view to open up Firefox and view your webpage. 35 IT Learning Programme

36 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 Task 2 Create a class for outer divs and border class for inner divs 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> 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> <div class="pic3"><div class="picborder"><img src="images/pic3.jpg" alt="test" id="pic3"></div></div> <div class="pic4"><div class="picborder"><img src="images/pic4.jpg" alt="test" id="pic4"></div></div> ITLP 36

37 Task 4 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 Step 1 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; 37 IT Learning Programme

38 Add the following code for the image ID elements #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 Task 6 Give rules for border class Pics don t fit 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! 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%; check results not quite there! ITLP 38

39 Task 7 Give pic ids a border radius Finish by giving the image id s a border radius to match and a minus margin-bottom setting to take care of the white space your image id rules will look like this when 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 Should be looking good! 39 IT Learning Programme

40 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 { width: 40%; float: right; Check your work you should have two columns ITLP 40

41 Task 4 J Lets add a background gradient to the research div Add a border radius Step 1 K Go to 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 Should be looking good! 41 IT Learning Programme

42 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 Step 1 Add a rule to the H1 CSS 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 2 Save 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. ITLP 42

43 12 What next? Useful web links Downloadable Course Materials These course materials, plus the files you need to complete the exercises, are available through our Portfolio web portal: 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 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 Other Courses For the most recent information and to reserve a place on a course please visit the IT SERVICES IT Courses webpage visit 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 on [email protected] 43 IT Learning Programme

44 04/02/2015 An Introduction IT Learning Programme Your teacher is: Your demonstrators are: Stephen Eyre We finish at: 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 1

45 04/02/2015 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? CSS3 and HTML5 2

46 04/02/2015 HTML: Hyper Text Markup Language CSS: Cascading Style Sheet Semantic meaning! Article, Aside etc. -what things are! Form controls Media How it works 3

47 04/02/2015 Html points to CSS CSS lists HTML tags, classes or identities CSS Defines attributes HTML takes on CSS style CSS happens in three places! Stylesheet In-page In-line Tag = <h1> or <div> Class = <div class= threecol > id = <div id= MainNews > (a class and id can be attached to a tag simultaneously) eg: <div class= threecol id= MainNews > 4

48 04/02/2015 Text <h1> CSS Layout 5

49 04/02/2015 margin border padding 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 content Borders and colour Adding borders and background colours 6

50 04/02/2015 Gradient effects Gradients: Damien Galarza s site Gradients the code: 7

51 04/02/2015 Text shadow What next? 8

52 04/02/2015 Web: Fundamentals Course Clinic As often as you like WordPress: courses covers setup, tagging, and more Online Presence: 2 nd course coming in Michaelmas Social Media: A growing area with courses on Twitter, LinkedIn, and Facebook 9