Cascading Style Sheets

1
Cascading Style Sheets
2
What are Style Sheets?

• What is a Style Sheet?
• A style sheet is a sort of definition for how the
  HTML elements in an HTML file will work
• Why use Style Sheets?
• To clearly separate the content of HTML files
  from the presentation layout of the HTML file.
• To save you from doing a lot of work, if used
  properly and efficiently, that is.

3
Style Sheets are like Rule Books

• You can kind of think of a style sheet as a sort
  of rule book for how an HTML tag will behave.
• For instance, if there is a rule in your rule
  book stating that the ltbodygt tag will always
  generate an orange background, then any HTML web
  page that references this rule book will have an
  orange background.

4
What are Cascading Style Sheets?

• There are four different locations where a style
  definition can appear.
• So whats the problem? Well, if a style is
  defined in more than one location, then the web
  browser must have a way of knowing which style
  definition to use.
• This problem is solved by arranging the four
  potential style sheet locations in order from
  lowest priority to highest priority.
• Looking at the bigger picture, we say that styles
  cascade into a new, virtual style sheet
  according to the rules concerning the priority of
  a location.

5
Style Sheet Locations

• There are four different style sheet locations
• Default Browser Styles
• This is when you have no style sheets
• External
• This is a CSS file that is just referenced from
  your web page
• Internal
• This is defined in the ltheadgt section of your
  HTML page
• Inline
• The style is defined as a parameter in the tag

6
The Priority of Style Sheet Locations

• Default Brower Styles
• External
• Internal
• Inline

Lowest Priority
Highest Priority
7
Internal Style Sheets

• An Internal Style Sheet is defined in the head
  section of a webpage. For example
• ltheadgt
• ltstyle typetext/cssgt
• CSS Information
• lt/stylegt
• lt/headgt

8
External Style Sheets
This is what your assignment calls for

• An External Style Sheet is a CSS file that
• contains only CSS information
• is separate from the HTML file
• It is referenced by the HTML in the ltheadgt
  section.
• For example
• ltheadgt
• ltlink relstylesheet typetext/css
  hrefexample.css /gt
• lt/headgt

Note Inserting a reference to an external style
sheet is like inserting an image ? the relative
location of the CSS file to the HTML file is
IMPORTANT!
9
CSS Syntax

• selector
• propertyvalue
• propertyvalue
• propertyvalue
• The selector is the HTML tag you wish to define
• The property is attribute you wish to change
• The value is what you want to change the
  attribute to

No semi-colon is needed if there in only one
property being defined or if it is the last in a
series of properties being defined.
10
CSS Example

• Ok lets do an example!
• Open Notepad and create a new web page
• Save the file as example.html directory called
  webpage (that you created in the last tutorial).
• Remember to save as type All Files
• In the ltheadgt section of your webpage, insert
• ltlink relstylesheet typetext/css
  hrefexample.css /gt
• In the ltbodygt section of your webpage, create a
  paragraph using the ltpgt tags
• Remember to save the file when youre done!

11
CSS Example (contd)

• lthtmlgt
• ltheadgt
• ltlink relstylesheet typetext/css
  hrefexample.css /gt
• lt/headgt
• ltbodygt
• ltpgt
• This is some text ?
• lt/pgt
• lt/bodygt
• lt/htmlgt

12
CSS Example (contd)

• Now we have to create our CSS file!
• Open Notepad and create a new file
• Save the file as example.css in a your webpage
  directory.
• Remember to save as type All Files
• This file contains only CSS information
• It does not contain any lthtmlgt tags or ltbodygt
  tags or any other tags

13
CSS Example (contd)

• Ok, now that we have a CSS file, lets add some
  definitions for changing the
• Background colour
• Text colour
• Font size
• Text decoration
• Page margins
• Remember to save the file when youre done!

14
CSS Example (contd)
15
CSS Example (contd)

• When you open up our example web page, it should
  look like this
• Note Even though the text looks like it is
  centered, it is actually
• at the 30 margin
• for the window
• containing the
• web page.

16
Background Properties
17
Background Properties (contd)

• background-color
• You can use either the name of the color or the
  hexadecimal color code
• background-image
• Remember, the pathway for the location of the
  image must be relative to the HTML document
• Also, the image name must be spelled correctly
• background-repeat
• repeat-x ? The image repeats along the top row
• repeat-y ? The image repeats along the left-hand
  column
• background-attachment
• scroll ? The background image will scroll with
  the rest of the page
• Fixed ? The background image will not scroll with
  the rest of the page

18
Text Properties
19
Text Properties (contd)

• color
• You can use either the name of the color or the
  hexadecimal color code
• text-align
• You can left, right and center align your text
• text-decoration
• underline ? underlines the text
• overline ? inserts a line overtop the text
• line-through ? inserts a line through the text
• blink ? causes the text to start blinking

20
Font Properties
21
Font Properties (contd)

• font-family
• Simply type in the name of the font you want to
  use
• If the font name is longer more than one word,
  put quotes around it
• comic sans, sans serif, etc
• Note if the browser doesnt support a font, then
  it will display the browsers default font
• font-size
• You can either use a percentage or one of the
  following words
• xx-small, x-small, small, medium, large, x-large,
  xx-large
• font-weight
• Add bold to some text
• font-style
• Add italics to some text

22
Border Properties
23
Border Properties (contd)

• border-color
• You can use either the name of the color or the
  hexadecimal color code
• border-width
• You can use either the number of pixels or one of
  the following
• thin, medium, thick
• border-style
• Choose from a variety of border styles such as
• none, dotted, dashed, solid, double, groove,
  ridge, inset, outset

24
List Properties
25
List Properties (contd)

• List-style image
• Remember, the pathway for the location of the
  image must be relative to the HTML document
• Also, the image name must be spelled correctly

26
Page Margins Properties
27
Page Margins Properties (contd)

• margin-top
• You can either use a number value or a percentage
• margin-bottom
• You can either use a number value or a percentage
• margin-left
• You can either use a number value or a percentage
• margin-right
• You can either use a number value or a percentage

28
Dimension Properties
The height and width can both be defined as a
number (in px or cm) or as a percentage of
the containing block .
29
Classes

• Classes allow you to define different styles for
  the same HTML tag / element
• For example, say you would like to have two
  different paragraph types in your web page, one
  left-aligned and one right-aligned
• Classes are declared in CSS by placing a dot in
  between the element and the class name
• For Example p.left p.right
• Note Do not start a class name with a number
  because it will not work in Mozilla / Firefox

30
Classes (contd)

• In an HTML tag, a class is specified by inserting
  it into the tag as a parameter.
• ltstarting_tag classclassnamegt Some text
  lt/closing_taggt
• For example
• ltp classleftgt This is some left-aligned text.
  lt/pgt
• ltp classrightgt This is some right-aligned
  text. lt/pgt
• Now lets do an example by modifying our previous
  example!

31
In our CSS file
32
In our HTML file
33
Classes (contd)
34
Class Inheritance

• Notice
• anything
• interesting
• here?

35
Class Inheritance (contd)

• Looking at the example from the previous slide
• The p declaration with no class sets the default
  style
• The classes inherit all the properties from the
  non-class declaration unless a specific property
  is overwritten by the same property thats also
  defined in the class
• In this example, the default text color of blue
  is overwritten with purple in class left and
  with green in class right
• If neither of the declarations set a property,
  the browser default is used

36
Element-less Classes

• An element-less class is a class that doesnt
  have an element associated with it.
• These classes can be used by any element
• Element-less classes can be declared using the
  form
• .classname
• propertyvalue
• propertyvalue
• propertyvalue

37
Element-less Classes (contd)

• For a quick example, lets say we created an
  element-less class in an external css file that
  centered text
• We could then use it for various kinds of tags
  including ltpgt, ltfontgt, lth1gt, lth2gt, lth3gt, etc

38
Element-less Classes (contd)
39
Element-less Classes (contd)
40
Centering Images

• One thing that CSS does not do easily is
  centering block elements
• div boxes, images, tables, etc
• To center an image
• img.center
• displayblock
• margin-leftauto
• margin-rightauto

41
Pseudo-classes

• Pseudo-classes are used to add special effects to
  some selectors
• selectorpseudoclass
• propertyvalue
• Pseudo-classes can also be combined with classes
• selector.classnamepseudoclass
• propertyvalue

42
Anchor Pseudo-classes

• A link that is visited, unvisited or when you
  move your mouse over the link can all be
  displayed in different ways
• alink colororange unvisited link
• avisited colorgreen visited link
• ahover colorred mouse over link
• ahover must come after alink and avisited in
  the CSS definition in order to work!

43
Combining Classes Pseudo-Classes

• The CSS definition
• a.redvisited
• colorred
• The HTML code
• lta classred hrefhttp//www.google.comgt
  Google lt/agt
• Whats displayed on screen after a link has been
  visited
• Google

44
ltdivgt

• The ltdivgt tag defines a division / section
• Also known as div boxes
• If you declare a div box to be a height and
  width, then it will take up that much space on
  the screen, starting from where you called it
• This is why a lot of people use CSS you can put
  anything anywhere you want it on the screen
  without having to rely on tables.
• For this upcoming example, lets use an internal
  style sheet

45
ltdivgt box Example
46
Div Box Example 1
47
Div properties
48
Div properties (contd)

• float
• Float decides where a given element will occur,
  so, for instance, on the left hand side of the
  webpage or the right-hand side
• overflow
• The overflow property decides what to do if the
  content inside a given element exceeds the height
  and width
• The overflow can remain visible, become hidden,
  or utilize scrolls
• Position
• Absolute positioning means that an element can be
  placed anywhere on the web page by simply
  specifying the number of pixels from the top of
  the webpage and the number of pixels from the
  left-hand side of the webpage

49
Div properties (contd)

• top specifies how far from the top an element
  will appear either - in pixels or a percentage.
• left specifies how far from the left-hand side an
  element will appear either - in pixels or a
  percentage.

50
Div Box Example 2

• Okay, lets do an example using an external style
  sheet that combines all that we learned about div
  boxes!

51
In our CSS file
52
In our HTML file
53
Div Box Example 2 (contd)
54
Summary

• Remember that CSS contains no actual html, it is
  only formatting
• Also, recall that all references to file names
  (other web pages and pictures) are case sensitive
• Finally, dont forget to select all files,
  while you are saving your pages (so you dont get
  something like index.html.txt, as this will not
  work)
• Feel free to post questions on the forums.