Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Reading: Apply styles to a mark-up language document Apply styles to a mark-up language document Inside this document: Introduction 2 In-line styles 2 Embedded style sheets 4 External style sheets 5 Cascading Style Sheets (CSS) 6 Compatibility across platforms 7 Positioning elements on screen 9 Designing with CSS 12 Colours on the web 13 Summary 14 582720637 © State of New South Wales, Department of Education and Training 2006 1 Reading: Apply styles to a mark-up language document Introduction In HTML, the appearance of web pages in a browser can be defined in a number of ways including In-line styles Embedded style sheets External style sheets Web designers also need to consider a number of variables and standards when applying style to their web page. In-line styles The most basic way to add styles to HTML documents is to add "attributes" to mark-up tags on each individual HTML page. Because the styles are written alongside the tags, these are called "in-line" styles. Take a look at this example of HTML code: <html> <head> <title>This is the title of the document</title> </head> <body bgcolor="#FFFFCC"> <h2><font color="#336666" face="Verdana">Demonstration of styles in HTML</font></h2> <p>This document is marked up with "in-line" styles.</p> <p>This means that styles such as <font face="Arial">font</font>, <font color="#FF0000">color </font>, <font size="6">size</font> and alignment are added as attributes to HTML tags. Here is a sample table:</p> <table width="75%" border="1" align="center"> <tr bgcolor="#336666"> <td><strong><font color="#FFFFFF" size="4" face="Verdana">Column 1</font></strong></td> <td><strong><font color="#FFFFFF" size="4" face="Arial">Column 2</font></strong></td> </tr> <tr> <td bgcolor="#FFFFFF">Content of table cell</td> <td bgcolor="#CCCCFF" align="right">More content - 582720637 © State of New South Wales, Department of Education and Training 2006 2 Reading: Apply styles to a mark-up language document aligned right</td> </tr> </table> <p align="center"><font color="#990000" size="5" face="Courier New">These are simple examples of styles.</font></p> </body> </html> In the browser, this HTML document will look like this: Figure: Screenshot of simple in-line styles applied in the browser window Look over the HTML text for this page and note the way that style has been applied. Some examples are as follows: Tag Style applied <body bgcolor="#FFFFCC"> Page background is rendered as light yellow (note hexadecimal code is used for web colours) <h2><font color="#336666" > The colour of this heading is changed <font face="Arial"> Changes font of text. If no font is specified, the web page will be displayed in the default font as set by the browser <font size="6"> Text in HTML can be described in seven sizes where 1 is smallest and 7 is largest <table width="75%"> The width of the table will shift to take up 75% of the width of the browser. Table width can also be defined in pixels. 582720637 © State of New South Wales, Department of Education and Training 2006 3 Reading: Apply styles to a mark-up language document <tr bgcolor="#336666"> The background colour of this row in the table is changed to Aqua <td bgcolor="#CCCCFF" align="right"> The background colour of this table cell only is set to light blue and the text is aligned to the right <font color="#990000" size="5" face="Courier New"> The font, size and colour of this line of text are changed This gives you a good overview of applying styles "in-line" on a web page. This is the simplest way of applying styles for web pages. It is important to understand the effect of in-line styles but they are not used very often in practice. This method requires every line of HTML to have style elements added - you can see that if your web site got up to even ten pages (let alone thousands of pages as many websites contain) this would make for very repetitive coding! The flexibility provided by styles sheets means that it is much more sensible to apply styles at a broader level as we shall see below. Embedded style sheets You can define styles in the <head> section of an HTML document and then apply those styles to the various headings, images and other page elements throughout the document. This is known as an "Embedded" style sheet. They can be useful when you want one page to have a unique style. This is more efficient than using in-line styles (but still not the best way - as you will see further on). Embedded style sheets are created by inserting the "style" element into the "Head" section of a HTML document. Let's look at simple example: <style type="text/css"> body { color: blue; background: yellow; } </style> Everything between the <style> tags is written in a format for style rules that reads basically as follows: selector {property: value} In this example, the style rule selects the 'body' tag, the properties being set are color and background and the values are blue and yellow respectively. This means that all text on the page will be blue and the page background will be yellow. You can set values for a wide range of properties using embedded style sheets including, for example, setting all <p> tags to Verdana font, or making all tables have a grey background. 582720637 © State of New South Wales, Department of Education and Training 2006 4 Reading: Apply styles to a mark-up language document External style sheets You can also define styles once in a separate Cascading Style Sheet (CSS) document and then link to it from many different HTML pages. This is known as an External style sheet. To understand the advantages of style sheets consider this example: You could insert a font tag for every paragraph in a whole site like this: <p><font face="arial" size="3" color="green"> Hello, this is green text <font></p> However, it is far better to have one style sheet linked to every page in the site. The external style sheet dictates the font, size and colour of every instance of the paragraph <p> tag so that the same line in the HTML document would simply look like this: <p>Hello, this is green text</p> One obvious advantage is that the HTML code is much simpler. However, there are other benefits. Download times are faster, and site maintenance is easier - changes to styles are made in one place only, and you have instant control over design attributes across multiple pages. Linking to external style sheets The code for linking from a HTML page to an external style sheet is placed between the <head></head> tags of the page and will look something like this: <link rel="stylesheet" href="styles/style.css"> This line basically says "Insert a link from this page to the stylesheet called "styles.css" inside the "styles" folder. Notice that the style sheet has a filename extension of ".css". A CSS document can be created in a simple text editor (such as Notepad or TextEdit). It needs to contain the code for each style (see extract below) and needs to be saved with the correct ".css" extension. If you insert this same style sheet link into every one of the HTML pages in your website, you will be able to update the appearance of your pages from a single central document, "styles.css" Here is an extract from an external style sheet: body { font-family: Verdana, Arial, Helvetica, sans-serif;} h1 { 582720637 © State of New South Wales, Department of Education and Training 2006 5 Reading: Apply styles to a mark-up language document font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #006666;} h2 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #006666;} h3 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #FF6600;} p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;} Notice that this sample covers the Paragraph <p> tag and heading levels 1, 2 and 3. (<h1>, <h2>, <h3>). The body tag <body> ensures that no matter what text is on screen (e.g. table cells, lists, etc.) it will appear in the same font. Note that three possible fonts are listed for each. This is done in case the user's machine does not have the first font installed. Font size The size of the font is set in point size - the same as used in word processors. The weight of the heading fonts is set as Bold. You can also set font size relative to each other using percentages. For example, your <p> tags may be set at 100%, your <h3> may be 100% bold, your <h2> may be 110% bold and your <h1> may be 120% bold. This will allow the user to resize website text in their browser window but will retain the relative importance of each heading. Note also that Mac and Windows fonts may display at different sizes. This is an important accessibility point particularly for users with poor vision who may have difficulty reading small text. For a more in-depth discussion on the use of external style sheets, go to the Friendly Bit website: friendlybit.com. Go to the CSS section and find the article called "Beginners guide to CSS and standards". Cascading Style Sheets (CSS) Style sheets used for web pages are also referred to as Cascading Style Sheets (or CSS). The term "cascading" refers to the priority given to 582720637 © State of New South Wales, Department of Education and Training 2006 6 Reading: Apply styles to a mark-up language document different style rules applied to the same document. There is a 'cascading' order of importance, depending on where the style information is located. Cascading order of importance A web browser will give priority to style instructions in the following order: 1. In-line styles 2. Embedded style sheet 3. External style sheet 4. Browser default settings For example a font style applied to an HTML tag has a higher priority than a font style applied in either an embedded or external style sheet. If the browser finds no style instructions, then it will apply its on default standards (including fonts, colours etc.). The Web's Cascading Style Sheets, Level 1 and Cascading Style Sheets, Level 2 are standards that have been developed by a working group of the World Wide Web Consortium (W3C): www.w3.org Refer to the W3C website for full details of the CSS specification. Compatibility across platforms Laying out elements on a web page is much less accurate than formatting a word processing document. Variables that will affect how your page will look to your users include: Browser type and version Operating system Monitor settings It may seem OK to say that your site works on 80% of user's computers (for example users, with Windows XP and Internet Explorer Version 6) but would any business willingly cut themselves off from 20% of their possible market? You should always test your websites across a variety of computers to ensure that it will work on most of your user's machines. Browser type and version The way your web page displays will be influenced to a degree by the types of browser the user has. Browsers vary in their compliance with web standards and employ different approaches to processing code and displaying pages. Web designers spend a lot of time ensuring that their sites 582720637 © State of New South Wales, Department of Education and Training 2006 7 Reading: Apply styles to a mark-up language document will work across a range of browsers. Some of the most common web browsers include: Internet Explorer (various versions) Mozilla Firefox Safari (Mac only) Opera Compounding this situation is that there are a range of other settings that vary between users (such as whether Java is enabled, latest plug-ins are installed or images are turned off). For details of current browser usage on the web, go to Wikipedia (en.wikipedia.org) and search for the term "usage share". At time of publication there is a graphic which displays the history of browser usage on the web since 1994. The biggest trend in recent years has been steadily growing number of users moving from Internet Explorer to the Mozilla Firefox browser. Also see The Counter: www.thecounter.com and look at the "Global Stats" section Operating systems The two main operating systems in general use are Windows (in various versions from Windows 98 and up) and Mac (mainly OSX). A great deal of effort is sometimes required to ensure that a website will work under all possible operating systems. Generally this is done in one of two ways: Creating a site that adheres to international web standards (as set by the W3C: www.w3.org) Creating versions of the site that work best under specific operating systems - and using a script to detect user's settings and redirect them to the most appropriate version of the site. This is much more time-consuming but allows designers to exploit the extended capabilities of DHTML for example. Even if web standards are adhered to, operating systems can process information in different ways. The technical effort to make websites perform perfectly under all systems is huge and often not very economical. Sometimes the best solution is to build as best you can and make sure that the site "degrades gracefully". That is, even if it does not display perfectly, the information is still readable and useable. 582720637 © State of New South Wales, Department of Education and Training 2006 8 Reading: Apply styles to a mark-up language document Monitor settings Web designers have no control over web users' monitor settings. Screen resolution is crucial to how well your page will display. In computing, on-screen space is measured in pixels. Computers can have a variety of pixels settings, the most common ones being (width x height): 640 x 480 800 x 600 (most common) 1024 x 768 1152 x 864 1280 x 600 1600 x 1200 If you create your web page with a graphic (for example, a heading banner) that is 760 pixels wide, this will work well on a resolution of 800 x 600. However, users with their monitor set at 640 x 480 will have to scroll to see the whole picture, users with 1280 x 600 settings will see the picture with a load of white space around it. You can see that designing for all monitor resolutions is not going to be easy. For more in-depth exploration of design issues on the web, take a look at the "Design" section of the Webmonkey website: www.webmonkey.com . Positioning elements on-screen It can be difficult to accurately position web page elements on-screen due to the factors mentioned above. Two widely-used methods for laying out web page elements are: using tables using CSS Positioning using tables Because of the restricted layout options available in HTML, tables have often been used to lay out content in a visually pleasing way. For example a table with two columns may be created where the left column contains navigation buttons and the right column shows the page content. Take a look at the example below: 582720637 © State of New South Wales, Department of Education and Training 2006 9 Reading: Apply styles to a mark-up language document Figure: Simple web page using table layout This simple web page has been laid out using a table with two rows and two columns. The code for this page is as follows: <html> <head> <title>This is the title of the document</title> </head> <body> <table width="760" border="0"> <tr> <td colspan="2"><img src="images/banner.gif" width="760" height="48"></td> </tr> <tr> <td width="140" valign="top" bgcolor="#FFFFCC"> <p><a href="#">Link 1</a></p> <p><a href="#">Link 2</a></p> <p><a href="#">Link 3</a></p></td> <td width="620" valign="top" bgcolor="#CCFFFF"> <h1>Heading</h1> <p>Here is the page content (This has been cut short in this sample...) </p></td> </tr> </table> </body> </html> The cells in the first row have been "merged" to form one cell ("colspan" is short for column span) which holds the banner image. In the second row, the left column then holds navigation while the right displays the page content. Notice that the left column is restricted to 140 pixels wide (<td width="140">). Notice that the table border is set to zero (<table width="760" border="0">). This means that the table itself is invisible in the browser window. Each 582720637 © State of New South Wales, Department of Education and Training 2006 10 Reading: Apply styles to a mark-up language document table cell has been coloured differently so that you can see the effect of the table on layout. Another typical use of tables for layout is when an image needs to appear beside some text (for example a portrait photo with a quote from that person). With experience, table layout can be used to great effect. Some of the drawbacks are that tables make your HTML documents larger and more complicated than they need to be. It also takes more time to get a consistent look across all the pages in a site. Tables for layout can also cause accessibility problems for people using screen readers or internet enabled PDAs or mobile phones. 582720637 © State of New South Wales, Department of Education and Training 2006 11 Reading: Apply styles to a mark-up language document Designing with CSS Web design is moving away from the use of tables for layout towards using Cascading Style Sheets (CSS) to position HTML elements on the page. Cascading Style Sheets (CSS) can give you a precise control over the look of your web pages and the placement of elements on the screen. Using CSS positioning means you can change the layout of pages much more easily later on if you need to. For a good introduction to using CSS for layout go to the W3 Schools website: www.w3schools.com In the "Quick Starters" section (in the righthand column) go to "My First CSS" and undertake their tutorial. For an excellent overview of the design possibilities of style sheets, go to the CSS Zen Garden website: www.csszengarden.com. Click on a few of the different styles to see the same page using different style sheets. The code stays the same - only the external .css file changes! For a more in-depth introduction to CSS go to the Friendly Bit website: friendlybit.com. Go to the CSS section and find the article called "Beginners guide to CSS and standards" Setting link colours CSS allows you to specify four colours for text links: Unvisited links - links that have not been clicked Visited links - links that have previously been visited. Hover - where the mouse is hovering over the link Active link - where the mouse clicks on the link The colours that you choose can fit in with the design of your site. It is good practice to ensure that unvisited and visited links are set to different colours. This allows the user to determine where they have been on your site. This can considerably reduce confusion - web site users will tend to follow the same path if they cannot tell that they have been there before. Here is an example CSS extract showing correct layout for links: a:link a:visited a:hover a:active {color: {color: {color: {color: #0000CC} #0066FF} #336699} #FF0000} Note that it is important that the styles are described in the order above - if you place the 'hover' class first, the hover colour will not work. 582720637 © State of New South Wales, Department of Education and Training 2006 12 Reading: Apply styles to a mark-up language document Colours on the web Colours for the web can be described in one of three ways. A limited set of 16 standard colours can be described just using a descriptive word (e.g. <color="green">). They are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. All colours can also be described using a "hexadecimal" (or "hex") code. (e.g. <color="#336699">). This number represents RGB values (RGB = Red, Blue, Green). The lowest value that can be given to one light source is 0 (hex #00) and the highest value is 255 (hex #FF). So the Hexadecimal values for each of the RGB values can go up in the following order from dark to light: 00, 33, 66, 99, CC, FF For example, the colour red will have full strength "red" value and no blue or green - so its hex colour is "#FF0000". Similarly the hex code for Blue is "#0000FF". If all three RGB values are the same, the colour will be a shade of grey (e.g. "#999999" is a mid-grey colour, "#000000" is black and "#FFFFFF" is white). There are many online resources that fully explain the use of colour on the web. Take a look at W3 Schools: www.w3schools.com. Go to "Learn HTML" and then select "HTML colors". Also for a colour palette, try this Visibone Color Chart: html-color-codes.com. Alternatively, take a look at Wikipedia: en.wikipedia.org Search for the term "web colors" (note US spelling) Browser-safe colours In the early days of the web, many computers could display only 256 colours. To make this worse, Windows and Apple computers used different default colour settings. This led to the recommendation to limit web colour palettes to 216 "Browser-safe" colours. If you used a "non-safe" colour, then it would "dither" and change to the closest available web-safe colour giving designers unpredictable results on some machines. Browser-safe colours are no longer really an issue as almost all computers now display at least thousands of colours. 582720637 © State of New South Wales, Department of Education and Training 2006 13 Reading: Apply styles to a mark-up language document Summary Using styles is an easy and efficient way to control the formatting of web pages. Separating content from its presentation makes it quicker and easier to update the look of a whole site. Using standard CSS to style your web pages will mean that your web site will display well on a wide range of browsers, platforms, window sizes and devices. 582720637 © State of New South Wales, Department of Education and Training 2006 14