Building a Website: Cascading Style Sheets (CSS)

1
Building a WebsiteCascading Style Sheets (CSS)

• Fall 2013

2
Cascading Style Sheets

• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files
• Allows much greater control over the layout and
  design of Web pages.
• Add margins to paragraphs
• Colorful and stylish borders to images
• Dynamic rollover effects to text links
• Difficult design concepts to grasp

3
Styles Solved a Big Problem

• HTML was never intended to contain tags for
  formatting a document.
• HTML was intended to define the content of a
  document, like
• lth1gtThis is a headinglt/h1gt
• ltpgtThis is a paragraph.lt/pgt
• Development of large web sites, where fonts and
  color information were added to every single
  page, became a long and expensive process.
• To solve this problem, the World Wide Web
  Consortium (W3C) created CSS.
• In HTML 4.0, all formatting could be removed from
  the HTML document, and stored in a separate CSS
  file.
• All browsers support CSS today.

4
CSS Basics

• A style is a rule describing how to format a
  particular piece of HTML
• A style sheet is a set of these canned styles
• Create style to format text with the font Arial,
  colored red, with a left margin 50 pixels
• Create a style to work with images
• Align an image along the right edge of a Web
  page, surround the image with a colorful border,
  and place a 50 pixel margin between the image and
  the surrounding text
• Can apply a style to text, images, or other
  elements on a page

5
CSS Help

• www.w3schools.com/css
• www.css-discuss.org/
• http//css-discuss.ineutio.com
• www.w3.org/Style/CSS/
• Dreamweavers built-in Reference window

6
CSS Example
body background-colord0e4feh1
colororange text-aligncenterp
font-family"Times New Roman" font-size20px
7
CSS Syntax

• A CSS rule has two main parts a selector, and
  one or more declarations
• The selector is normally the HTML element you
  want to style.
• Each declaration consists of a property and a
  value.
• The property is the style attribute you want to
  change. Each property has a value.
• See cssExample.html

8
CSS Comments

• Comments are used to explain your code, and may
  help you when you edit the source code at a later
  date. Comments are ignored by browsers.
• A CSS comment begins with "/", and ends with
  "/", like this

/This is a comment/p text-aligncenter
/This is another comment/ colorblack
font-familyarial
9
CSS Id and Class

• In addition to setting a style for a HTML
  element, CSS allows you to specify your own
  selectors called "id" and "class".
• The id selector is used to specify a style for a
  single, unique element.
• The id selector uses the id attribute of the HTML
  element, and is defined with a "".
• The style rule below will be applied to the
  element with id"para1"

para1 text-aligncenter colorred
10
CSS Id and Class

• The class selector is used to specify a style for
  a group of elements. Unlike the id selector, the
  class selector is most often used on several
  elements.
• This allows you to set a particular style for
  many HTML elements with the same class.
• The class selector uses the HTML class attribute,
  and is defined with a "."
• In the example below, all HTML elements with
  class"center" will be center-aligned

.center text-aligncenter
11
Inserting Style Sheets

• Three ways
• 1. External style sheet
• Used to apply style to many pages
• Change look of entire web site by just changing
  one CSS
• Can be written using any text editor
• File should not contain any html tags
• Save file with .css extension
• ltheadgtltlink rel"stylesheet" type"text/css"
  href"mystyle.css" /gtlt/headgt
• Example style sheet file
• hr colorsiennap margin-left20pxbody
  background-imageurl("images/back40.gif")

12
Inserting Style Sheets

• Three ways
• 2. Internal style sheet
• Used when single document has a unique style
• Define internal styles in the head section of an
  HTML page by using ltstylegt tab, like this
• ltheadgtltstylegthr colorsiennap
  margin-left20pxbody background-imageurl("im
  ages/back40.gif")lt/stylegtlt/headgt

13
Inserting Style Sheets

• Three ways
• 3. Inline style
• Looses many advantages of style sheets
• Mixes content with presentation
• Used sparingly
• Use the style attribute in the relevant tag. The
  style attribute can contain any CSS property, for
  example
• ltp style"colorsiennamargin-left20px"gtThis is
  a paragraph.lt/pgt

14
Multiple Style Sheets

• If some properties have been set for the same
  selector in different style sheets, the values
  will be inherited from the more specific style
  sheet. 

h3colorredtext-alignleftfont-size8pt
h3text-alignrightfont-size20pt
colorredtext-alignrightfont-size20pt
External
Internal
Actual Properties for h3
The color is inherited from the external style
sheet and the text-alignment and the font-size is
replaced by the internal style sheet.
15
Multiple Style Sheets

• Cascading order
• What style will be used when there is more than
  one style specified for an HTML element?
• Generally speaking we can 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
• Internal style sheet (in the head section)
• Inline style (inside an HTML element)
• So, an inline style (inside an HTML element) has
  the highest priority, which means that it will
  override a style defined inside the ltheadgt tag,
  or in an external style sheet, or in a browser (a
  default value).

16
CSS Background

• CSS background properties are used to define the
  background effects of an element.
• CSS properties used for background effects
• background-color
• background-image
• background-repeat
• background-attachment
• background-position

17
Background Color

• The background-color property specifies the
  background color of an element.
• The background color of a page is defined in the
  body selector
• body background-colorb0c4de
• With CSS, a color is most often specified by
• a HEX value - like "ff0000"
• an RGB value - like "rgb(255,0,0)"
• a color name - like "red
• Example, h1, p and div elements have different
  background colors

h1 background-color6495edp
background-colore0ffffdiv
background-colorb0c4de
18
Background Image

• The background-image property specifies an image
  to use as the background of an element.
• By default, the image is repeated so it covers
  the entire element.
• The background image for a page can be set like
  this
• body background-imageurl('paper.gif')
• Be careful using background images
• May make text hard to read

19
Background Images

• When using the shorthand property the order of
  the property values is
• background-color
• background-image
• background-repeat
• background-attachment
• background-position

20
Text Formatting

• Text Color
• Used to set color of text
• Specify color with
• a HEX value - like "ff0000"
• an RGB value - like "rgb(255,0,0)"
• a color name - like "red
• Text Alignment
• Set horizontal alignment of text
• Centered, left, right, justified
• Example
• h1 text-aligncenter
• p.date text-alignright
• p.main text-alignjustify

21
Text Formatting (cont.)

• Text Decoration
• Set or remove decorations from text
• Used to remove underlines from links
• Example
• a text-decorationnone
• Used to decorate text
• Examples
• h1 text-decorationoverlineh2
  text-decorationline-throughh3
  text-decorationunderlineh4
  text-decorationblink
• Text Transformation
• Used to specify uppercase and lowercase letters
  in a text
• Used to turn everything into uppercase or
  lowercase, or capitalize first letter of each
  word
• Examples
• p.uppercase text-transformuppercasep.lowercas
  e text-transformlowercasep.capitalize
  text-transformcapitalize

22
Text Formatting (cont.)

• Text Indention
• Used to specify the indention of the first line
  of a text
• Example
• p text-indent50px
• Specify space before characters
• Example
• h1 letter-spacing2px
• h2 letter-spacing-3px
• Specify space between lines
• Example
• p.small line-height70
• p.big line-height200
• Set text direction
• Example
• div.ex1 directionrtl
• Increase white space between words
• Example
• P word-spacing30px

23
Text Formatting (cont.)

• Disable Text Wrapping
• Example
• p white-spacenowrap
• Vertical Alignment of an image
• Example
• img.top vertical-aligntext-top
• img.bottom vertical-aligntext-bottom

24
Font Families

• Font Family
• Set the font-family property
• Should hold several font names as a fallback
  system.
• Start with font you want, than second choice, etc
• If name is more than one word it must be in
  quotes
• Example
• pfont-family"Times New Roman", Times, serif

25
Font Style

• Font Style
• Used to specify italic text
• Three values for property
• Normal text is shown normally
• Italic text is shown in italics
• Oblique text is leaning (oblique is very
  similar to italic, but less supported
• Example
• p.normal font-stylenormalp.italic
  font-styleitalicp.oblique font-styleoblique
  

26
Font Size

• Font Size
• Font size with pixels
• Examples
• h1 font-size40px
• h2 font-size30px
• p font-size14px
• Font size with EM
• Used to avoid resizing problems with older
  versions of IE
• Recommended by W3C
• 1 em equal to current font size. Default text
  size ii browsers is 16 px
• Formula for pixels to em em pixels/16
• Examples
• h1 font-size2.5em / 40px/162.5em /
• h2 font-size1.875em / 30px/161.875em /
• p font-size0.875em / 14px/160.875em /

27
Font Size (cont.)

• Font Size
• Sets size of font
• Should not use size to make paragraphs look like
  header and headers look like paragraphs
• Always use proper tags, like lth1gt - lth6gt for
  headers andltpgt for paragraphs
• Font size can absolute or relative
• Absolute size
• Sets the text to a specified size
• Does not allow a user to change the text size in
  all browsers (bad for accessibility reasons)
• Absolute size is useful when the physical size
  of the output is known
• Relative size
• Sets the size relative to surrounding elements
• Allows a user to change the text size in
  browsers

28
Links

• Styling Links
• Set color, font-family, background, etc
• Can be styled depending on sites visited
• Four link states
• alink - a normal, unvisited link
• avisited - a link the user has visited
• ahover - a link when the user mouses over it
• aactive - a link the moment it is clicke
• Examples
• alink colorFF0000      / unvisited link
  /avisited color00FF00  / visited link
  /ahover colorFF00FF  / mouse over link
  /aactive color0000FF  / selected link /
  
• Order rules
• ahover MUST come after alink and avisited
• aactive MUST come after ahover

29
Links (cont.)

• Text Decoration
• Remove undelines
• Examples
• alink text-decorationnone
• avisited text-decorationnone
• ahover text-decorationunderline
• aactive text-decorationunderline
• Background Color
• Background color for links
• Examples
• alink background-colorB2FF99
• avisited background-colorFFFF85
• ahover background-colorFF704D
• aactive background-colorFF704D
• See example linksStyle.html

30
Lists

• CSS list properties allow you to
• Set different list item markers for ordered lists
• Set different list item markers for unordered
  lists
• Set an image as the list item marker
• Two types of lists
• Unordered lists marked with bullets
• Ordered lists marked with numbers or letters
• Examples
• ul.a list-style-type circle
• ul.b list-style-type square
• ol.c list-style-type upper-roman
• ol.d list-style-type lower-alpha

31
Lists (cont.)

• Images as List Item Marker
• Use list-style-image property
• Example
• ul list-style-image url('sqpurple.gif')

32
Lists (cont.)

• Crossbrowser Solutions
• Display image-marker equally in all browsers
• Example
• ul list-style-type none padding 0px
  margin 0pxul li background-image
  url(sqpurple.gif) background-repeat
  no-repeat background-position 0px 5px
  padding-left 14px

• Example Explained
• For ul
• Set the list-style-type to none to remove the
  list item marker
• Set both padding and margin to 0px (for
  cross-browser compatibility)
• For all li in ul
• Set the URL of the image, and show it only once
  (no-repeat)
• Position the image where you want it (left 0px
  and down 5px)
• Position the text in the list with padding-left

33
CSS Tables

• The look of an HTML table can be greatly improved
  with CSS
• Table Borders
• Use border properties
• Example (black border for th and td elements
• table, th, td border 1px solid black
• This produces two borders, one for th and one for
  td
• Use Collapse Borders to remove one of the borders
• table border-collapsecollapsetable,th,
  td border 1px solid black

34
CSS Tables (cont.)

• Table Width and Height
• table width100th height50px
• Table Horizontal Text Alignment
• td text-alignright
• Table Vertical Text Alignment
• td height50px vertical-alignbottom

35
CSS Tables (cont.)

• Table Padding
• Spaces between border and content
• td padding15px
• Table Color
• Color of borders, and the text and background
  color of th elements
• table, td, th border1px solid greenth
  background-colorgreen colorwhite