The Characteristics of CSS Unit 20: Client Side Customisation of Web Pages
Contents CSS frameworks Box model Accessing CSS from HTML Selectors Height and width Content Padding Border Margin Accessing CSS from HTML Inline Embedded External Selectors Class Selectors ID
CSS Frameworks CSS stands for Cascading Style Sheets. It is a coding language that allows you to change elements such as text, colour, size, background colours, border styles and the positioning of elements on a web page. The theory behind CSS frameworks is that it reduces the repetitiveness of styling web sites and having to type the same bits of code again and again. They are simply files that can control the appearance of your web pages or standardise web sites and help avoid mistakes and browser compatibility problems.
Uses of CSS CSS has many, many uses, the easier ones to comprehend include controlling and editing the: background colour background images formatting text borders padding heading styles positioning elements creating columns
Box Model The term "box model" is used when talking about design and layout in CSS. It really is just a box and consists of margins, borders, padding, and the actual content. The box model allows a border to be placed around elements and space to be placed in between elements. In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.
Height and Width When you set the height and width of an element in your web page, you are setting the height and width of the content area of your box. You need to know the values given to the padding, border and margins in order to know the true amount of space the box will take up.
Content The content area is where you text or images will go. You can change the background colour of this area as well as setting the height and width.
Padding Padding is the space between the content and the border. This is just empty space. Its background colour is determined by the colour of the content area.
Border The border goes around the padding and the content. The border can have different attributes. For example, the line can be different thicknesses, colours and can even be dotted or dashed.
Margin The margin is the space between the border and any other information (if any) on the web page. The margin does not have a background colour, it is completely transparent
Accessing CSS There are three ways of accessing CSS from HTML pages, they are: In-line Embedded (aka header) External
In-line <p style="color:#CC00FF">This is a paragraph.</p> The inline style requires the style attribute to be inside the opening <p> tag within the <body> section of the html code. This applies the style to that section of the page only. <p style="color:#CC00FF">This is a paragraph.</p> If using this style is you would have to write out the attribute and declarations for each paragraph throughout your html code. Inline styles are a simple way of applying a theme to specific sections of a document, but it is not the best method of styling a page.
Embedded The embedded style (aka header) requires the style attribute to be set in just one place instead of having to type them out every time you want them. An embedded style lets you set out the code for all the styles you want to use on that page just once in the header section. <head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head> The benefit of this style is if you wanted to change the colour of all the paragraph text to red for example, you only need to change it in the style sheet at the top of the page.
External An external style sheet gives a location in which you can put styles that can be applied on all of your web pages. Your web page then only needs to refer to the external style sheet in the header section and the browser looks to the other document in order to know how to present elements of the web pages. <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
Implementation styles tip What are the main advantages and disadvantages of each implementation style? For a merit, it is essential that you compare the styles, highlighting the pros and cons of each and give plenty of examples.
Selectors P { font-weight: bold; color: blue; } Curly brace Declaration Property Value What other selectors, properties and values can you think of?
Class selectors The implementation styles mentioned provide quite a blanket approach to styling your pages. However, you may want some sections to look a bit different to the rest. This is where class selectors are used. .fun { color: #339999; font-family: Georgia, Time, Serif; text-align: center; }
Class selectors The previous section of code would (if you were efficient) be in your external style sheet and the following would be in the body section of your web page: <p class=“fun”>A man walks into a bar; you would’ve thought he’d see it coming!<p>
ID The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The style rule below will be applied to the element with id="paragraph1": #paragraph1 { text-align:center; color:red; } Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
Class vs id The one main difference between these selectors: a specific id can only be applied to one XHTML element. So, for example, on any web page, there can only be one element with an id of main navigation, and only one with an id of header. A class, however, can appear as many times as required.
conclusion Write a conclusion about the benefits of CSS. E.g.: pages download faster you have to type less code your pages are shorter and neater the look of the site is kept consistent throughout all of the pages that work off the same style sheet errors caused by editing multiple html pages occur less often updating your design and general site maintenance are made much easier.