CO1552 – Web Application Development Cascading Style Sheets

What is a Style Sheet? XHTML only handles the structure of the page A set of instructions to the browser which tell it how to display the content There is a set order (hierarchy) in which the styles are interpreted

Cascading Order Generally speaking all the styles will "cascade" by the following rules, where number 4 has the highest priority because it is closest to the text being described: 1. Browser’s default Style Sheet 2. External Style Sheet Created by you and called from the HTML page 3. Internal Style Sheet Created by you inside the tag and called 4. Inline Style Created by you and placed inside HTML element

External style sheet Contains information for formatting any number of pages Can be used (referred to) over and over Example: ex1.css

Link to an external style sheet <link rel="stylesheet" type="text/css" href="ex1.css" /> Any H1 heading is 36 pt Any H2 heading is blue Any paragraph will have a left margin of 50 pixels This is the style sheet file (ex1.css): body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px} Notice that the CSS file has no HTML tags there is no space between a value and its unit (eg, “36” and “pt”, “50” and “px”)

Internal style sheet Should be used when a single page needs a unique style. Over-rides an external style sheet Define in the section by using the tag hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} Don’t use internal style sheets for multiple pages – use an external one. WHY?

An in-line style Defines a very local change of style Over-rides external and internal style sheets Loses many of the advantages of style sheets by mixing content with presentation Neither more or less effective than HTML formatting Just as annoying to maintain, when you want to make changes! This is a brown paragraph.

What style will be used … when there is more than one style specified for an HTML element?

Principles of styles An inline style (inside an HTML element) has the highest priority it will override every other style, whether declared inside the tag, in an external style sheet, or in a browser’s style sheet (a default value).

An example (part 1) An external style sheet attributes these properties to the HTML selector: h3 { color: red; text-align: left; font-size: 8pt } Write down these properties under the heading “external”

An example (part 2) An internal style sheet has these properties for the h3 selector: h3 { text-align: right; font-size: 20pt } Write down these properties under the heading “internal” Question: If the page with the internal style sheet also links to the external style sheet, the properties for h3 on that page will be?? Answer >>

An example (answers, 3) The properties for h3 will be: color: red; text-align: right; font-size: 20pt The colour is inherited from the external style sheet The text-alignment and the font-size are replaced by the internal style sheet The internal style sheet does not mention colour and so cannot change it.

Styles in use Here is a style defined in the head of a HTML page:. margin {margin-top: 5cm} This is a paragraph with a top margin of 5cm

Styles in use: external file Here is a style defined in an external file, ex1.css. blue_med { font-family: Arial, Helvetica, sans-serif; font-size: medium; font-style: normal; color: #000066; margin-left: 50px; padding-right: 50px; padding-left: 50px; }

Styles in use: external file Style sheets may be quite long and contain definitions of many styles Note that a user-defined style name starts with a dot. small { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small; } A regular HTML tag is redefined without a dot td { font-family: Georgia, Times New Roman, Times, serif; }

Styles in use: external file The file ex1.css is called by writing the following line in the section of any page: "

This is how the style is used In a page linked by the previous line in its head section to the file ex1.css, This is a paragraph which is blue, in Arial font and medium sized Or a paragraph of blue text another paragraph of blue text Or Hello World, my sky is blue!

Summary (1) A style sheet can be Local (in-line) Nearest to object Most influential Very similar to presentational HTML Has to be applied to sections of text individually Internal (in the ) Applies to one whole page Subordinate to a local style but over-rides an external style Has to be applied to each page individually

Summary (2) External (in a.css file) One file can influence as many pages as refer to it Overridden by local/inline and internal styles (IF you use them) Very efficient and easy to maintain Set by the browser Applies if you don’t use any other presentation methods eg “Times New Roman, small, left aligned and black” for paragraph text. Can be over-ridden by local, internal and external styles

Practicals: 1 Try applying manual formatting to some text in Dreamweaver Watch how the style is generated as a local file in the head of the page and automatically named “style 1” Edit the styles by amending the description in the head Test in Explorer or Netscape

Practicals 2: Plan your own site From your assignment 1 designs, you should be able to specify some styles you want to use on your site Make a list of at least 3 styles you need, and specify their attributes, eg: Background image or colour Text attributes such as font weight, font family, font size Alignment and indents Borders Boxes

Create your styles in NotePad Save your styles in a style sheet file Refer to the HTML notes or to W3Schools to get your CSS descriptions right We will be creating a site for your assignment, so: Store the style sheet in the area you want to use for your assignment site Make a folder for it if you haven’t already done so Test the file Call it from the head of a page you have created, and by applying the classes to sections of your file Save and test in Explorer or Netscape