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