Cascading Style Sheets CSS

1
Cascading Style Sheets (CSS)
2

• Styles define how to display HTML elements
• Styles are normally stored in Style Sheets
• See how it works http//www.w3schools.com/css/dem
  o_default.htm

3
Solving A Problem with CSS

• The HTML tags were designed to define the content
  of a document.
• lth1gt ? This is a header
• The layout of the document was supposed to be
  handled by the browser.
• As more HTML tags were defined that enabled
  configurability of the layout, HTML files became
  a messy combination of content and layout.
• Did you experience this in lab 3?

4
Styles

• The World Wide Web Consortium created styles to
  solve this problem.
• Style sheets define how HTML elements are to be
  displayed.
• External and internal style sheets
• External saved in .css files
• Internal defined in head section of the HTML
  file

5
Syntax

• 3 parts a selector, a property and a value
• selector property value
• Selector the HTML element/tag you wish to define
• Property the attribute you wish to change
• Value the value you wish to assign
• If the value has multiple words, put quotes
  around it.
• p font-family sans serif
• If you want to specify more than one property for
  a selector, the property definitions must be
  separated by a semicolon.
• p font-family sans serif
• color red
• Comment out words or code like this
• / This is a css comment /

6
Grouping Selectors

• If you want to make the same style specifications
  for more than one selector, you can group them
  all into the same style definition.
• Ex. Defining all headings to have green text
• h1, h2, h3, h4, h5, h6
• color green

7
Class Selectors

• You can define different styles for the same type
  of HTML element.
• Lets say we want 2 types of paragraphs on our
  web page one with Gill Sans MT font and the
  other with Arial font.
• Wed define 2 style classes
• p.gillsans font-family Gill Sans MT
• p.arial font-family arial
• Then, when we want to use an arial font
  paragraph, we would specify the attribute to the
  ltpgt tag to be the name of the class.
• ltp classarialgtThis is an arial font
  paragraph.lt/pgt

8
Using Styles in the HTML

• This is the good part
• All you have to do to use the style youve
  defined is to use the HTML tags as normal.
• Examples

9
Where To Insert an Internal Style Sheet

• When a browser reads a style sheet, it will
  format the document according to it.
• It must come at the beginning of the file.
• Defined in the head section of the html file
• Defined using the ltstylegt tag
• ltheadgt
• ltstyle type"text/css"gt
• hr color sienna
• p margin-left 20px
• body background-image
  url("images/back40.gif")
• lt/stylegt
• lt/headgt