CSS

1
CSS

• Cascading Style Sheets

2
Objectives

• Using Inline Styles
• Working with Selectors
• Using Embedded Styles
• Using an External Style Sheet
• Applying a Style to a Web Site
• Understanding Cascading Order

3
http//www.w3schools.com/css/

• Great tutorial Go look

4
Style Sheets

• In HTML, want the content of the documents
  clearly separated from the document's
  presentation layout.
• Styles sheets define how HTML elements are to be
  displayed

5
Cascading Style Sheets (CSS)

• Like HTML, style sheets must use a common
  language and follow common rules. This language
  is known as Cascading Style Sheets, CSS.
• CSS has been developed by the WWW Consortium
  (www.w3c.org organization that develops
  standards for HTML).
• CSS is designed to augment (not replace) HTML.

6
Styles

• Styles can be specified
• inside a single HTML element (Inline)
• inside the ltheadgt element of an HTML page
  (Internal)
• or in an external CSS file. (External)

7
Inline Style (in body)

• An inline style loses many of the advantages of
  style sheets by mixing content with presentation.
  Use this method sparingly. Inline styles are easy
  to use and interpret because they are applied
  directly to the elements they affect.

8
Inline Style

• To use an inline style you use the style
  attribute in the relevant tag. The style
  attribute can contain any CSS property.
• ltelement styleproperty1
• value1 property2value2 gt

9
Inline Style

• Enclose the properties and values in quotes.
• Separate properties with a semicolon.
• ltp style"color red margin-left 20px "gt
  paragraph lt/pgt

10
Inline Style

• ltbodygtlth3 stylefont-familyArial,
  font-styleitalic colorgreengt
• This is H3, Arial, italic and green
• lt/h3gt
• lth3gtThis is simply H3lt/h3gt
• lt/bodygt

This is H3, Arial, italic and green This is
simply H3
11
Syntax

• The CSS syntax for internal and external styles
  is made up of three parts
• selector property value
• The selector is normally the HTML element/tag you
  wish to define, the property is the attribute you
  wish to change, and each property takes a value.

12
Syntax

• The property and value are separated by a colon
  and surrounded by curly braces body color
  black
• If  the value is multiple words, put quotes
  around the value.
• Separate properties with a semi-colon.
• p font-family sans serif color red

13
Background

• Background colors can be applied to almost any
  element in a Web page not just the page itself.

H1 background-color rgb(204,102,255)
This is an H1 header with a purple background
14
Background

• background-image url(file.jpg)
• examples\css\style-background.html
• http//www.w3schools.com/css/css_background.asp

15
Comment

• / This is a CSS comment. /
• Same as JavaScript multi-line comment.

16
Grouping

• Separate selectors with a comma
• h1,h2,h3,h4,h5,h6 color green
• All header elements will be green.

17
TopStyle

• Software that generates correct syntax.
• Its on the machines in the lab.
• It can be downloaded for free.
• Go see it.

18
Internal (Embedded) Style Sheet

• Applies to a single document (HTML file)
• Internal styles are embedded in the head section
  
• ltheadgt
• ltstyle type"text/css"gt
• hr color sienna
• p margin-left 20px
• lt/stylegt
• lt/headgt

19
Internal (Embedded, Global) Style Sheet

• ltheadgtltstylegt h3 font-familyArial
  font-styleitalic colorgreenlt/stylegt
• lt/headgt
• ltbodygt
• lth3gtThis is H3, Arial, italic and greenlt/h3gt
• lth3gtAnd so is this H3lt/h3gt
• lt/bodygt

This is H3, Arial, italic and green And so is this
20
External Style Sheet

• An external style sheet is a text file that
  contains style declarations
• It can be linked to any page in the site,
  allowing the same style declaration to be applied
  to the entire site
• An external style sheet can be written in any
  text editor. The file should not contain any html
  tags. It should be saved with a .css extension.

21
External Style Sheet

• Example
• hr color sienna
• p margin-left 20px
• Notes
• No spaces between the property value and the
  units 20px
• This is the entire file. Within a style sheet,
  you dont need ltstylegt tags, just the style
  declarations.

22
External Style Sheet

• An external style sheet can control the
  appearance of many web pages.
• Each page must link to the style sheet using the
  ltlinkgt tag inside the head section
• ltheadgt
• ltlink rel"stylesheet" type"text/css"
  hrefsite_style.css" /gt
• lt/headgt
• See style_sheets.html

23
External Style Sheets

• External style sheets enable you to change the
  appearance and layout of all the pages in your
  site by editing just one single CSS document.
• They give a consistent look to the entire site.
• Multiple external style sheets may be referenced
  inside a single HTML document. 

24
External style sheet

• Create a text file containing the style
  declarations.
• File should have extension .css such as
  mystyle.css
• Link, or import that file to the HTML file using
  special tags in the header.

ltlink hrefURL relstylesheet typetext/cssgt
mystyle.css
OR
_at_import or multiple LINK tags allow you to use
more than one style sheet in the same document
ltstylegt _at_import url(mystyle.css)lt/stylegt
25
Cascading Order

• If a property has been set for the same selector
  in different style sheets, the value will be
  inherited from the more specific (innermost)
  style sheet. 
• (next slide)

26
Cascading Order

• We say that all the styles will "cascade" into a
  new "virtual" style sheet by the following rules,
  where number four has the highest priority
• Browser default
• External style sheet (.css file)
• Internal style sheet (inside the ltheadgt)
• Inline style (inside an HTML element)

27
Style Inheritance

• If a style is not specified for an element, it
  inherits the style of its parent element This
  is called style inheritance.

28
CSS

• http//www.w3schools.com/css/css_border.asp
• http//www.w3schools.com/css/css_text.asp
• http//www.w3schools.com/css/css_text.asp

29
The id Selector

• The style rule below will match any element that
  has an id attribute with a value of "green"
• green color green
• lth1 id"green"gtSome textlt/h1gt

30
The id Selector

• The style rule below will match any p element
  that has an id attribute with a value of "green"
• pgreen color green

31
The class Selector

• HTML and XHTML require each id be unique
  therefore an id value can only be used once in a
  document
• You can mark a group of elements with a common
  identifier using the class attribute
• ltelement classclassgt lt/elementgt

32
The class Selector

• Omit the tag name in the selector to define a
  style that will be used by all elements that have
  that class
• .center text-align center
• Both h1 and p have class"center".
• lth1 class"center"gt center-aligned lt/h1gt
• ltp class"center"gt also center-aligned. lt/pgt

33
The class selector

• Define a class (in the header) by
• giving it a name preceded by a period
• adding the standard style definitions inside

ltstyle typetxt/cssgt .bright
font-weightbold colorredlt/stylegt

• Apply the class to any HTML tag

ltstrong classbrightgt text lt/stronggtlth1
classbrightgt text lt/h1gt
34
The class Selector

• With the class selector you can define different
  styles for the same type of HTML element
• p.right text-align right
• p.center text-align center

35
The class Selector

• Use the class attribute in your HTML document
• ltp class"right"gt This paragraph will be
  right-aligned. lt/pgt
• ltp class"center"gt This paragraph will be
  center-aligned. lt/pgt

36
Hyperlink pseudo-class

• a link style for never visited links
• a visited style for visited links
• a active style for link that is currently being
  clicked
• a hover style when the mouse cursor is hovering
  over the link rollover effect.
• examples/css/link_rollover.html

ahover colorred text-transformuppercase
font-weightbold
37
The ltdivgt tag

• The ltdivgt tag defines a division/section in a
  document.
• ltdivgt is an HTML tag (not CSS)
• It does not format content
• Browsers usually place a line break before and
  after the div element

38
The ltdivgt tag

• It is like a generic block level tag
• Use the ltdivgt tag to group block elements.
• You can assign a CLASS (or ID or STYLE or
  ONCLICK or ONMOUSEOVER etc).

39
ltdivgt

• This is some text
• ltdiv style"colorFF0000"gt
• lth4gtThis is a header in a div sectionlt/h4gt
• ltpgtThis is a paragraph in a div sectionlt/pgt
• lt/divgt

This is some text This is a header in a div section This is a paragraph in a div section
40
The ltspangt tag

• The ltspangt tag is used to mark (or group) inline
  elements like letters, words or phrases.

41
The ltspangt tag

• ltpgt text1 ltspan style"color0000FF"gt
  text2lt/spangt text3
• lt/pgt
• ltpgtltspan style"color00DD45"gt4lt/spangt
• lt/pgt
• output????

42
The ltspangt tag

• ltpgt text1 ltspan style"color0000FF"gt
  text2lt/spangt text3lt/pgt
• ltp style"color00DD45"gt4lt/pgt
• styles.html

text1 text2 text3 4