Embed Size (px)
Citation preview
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 Sheet2. External Style Sheet
Created by you and called from the HTML page3. Internal Style Sheet
Created by you inside the <head> 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
<html><head><link rel="stylesheet" type="text/css" href="ex1.css" /></head>
<body>
<h1> Any H1 heading is 36 pt </h1>
<h2> Any H2 heading is blue </h2>
<p>Any paragraph will have a left margin of 50 pixels</p>
</body></html>
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 <head> section by using the <style> tag
<head><style type="text/css">hr {color: sienna}p {margin-left: 20px}body {background-image: url("images/back40.gif")}</style></head>
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!
<p style=“color: sienna; margin-left: 20px”>This is a brown paragraph.</p>
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 <head> 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 <h3> 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:
<style type="text/css"> .margin {margin-top: 5cm} </style>
<p class="margin"> This is a paragraph with a top margin of 5cm </p>
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 dottd {
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 <head> section of any page:
<link rel="stylesheet" type="text/css" href=“ex1.css />"
This is how the style is used
In a page linked by the previous line in its head section to the file ex1.css,
<p class=“blue_med”> This is a paragraph which is blue, in Arial font and medium sized <p>
Or<div class=“blue_med”><p> a paragraph of blue text </p><p> another paragraph of blue text </p></div>
Or <p>Hello World, <span class=“blue_med”> my sky is
blue!</span></p>
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 <head>) 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
