Cascading Style Sheets – Page 1CSCI 2910 – Client/Server-Side Programming CSCI 2910 Client/Server-Side Programming Topic: Cascading Style Sheets.

  • Published on
    26-Dec-2015

  • View
    212

  • Download
    0

Embed Size (px)

Transcript

  • Slide 1
  • Cascading Style Sheets Page 1CSCI 2910 Client/Server-Side Programming CSCI 2910 Client/Server-Side Programming Topic: Cascading Style Sheets
  • Slide 2
  • Cascading Style Sheets Page 2CSCI 2910 Client/Server-Side Programming Content versus Presentation When moving toward XHTML best practices, we need to separate content from presentation. My Web Site In the very old days (1990s), the browser set presentation through user preferences. With later iterations in browsers, the tag was added. My Web Site
  • Slide 3
  • Cascading Style Sheets Page 3CSCI 2910 Client/Server-Side Programming Content vs. Presentation Example Thats almost 700 extra characters per page. Time consuming to type Extra download bandwidth Lots of places to make mistakes To change the color, need to search and replace on 500 instances. Harder for search engines to index properly. Assume we have a website consisting of 50 pages each with 10 tags that use the tag...
  • Slide 4
  • Cascading Style Sheets Page 4CSCI 2910 Client/Server-Side Programming The Power of CSS Compare and contrast the following two pages: http://www.csszengarden.com/?cssfile=/147/147.css&page=0 http://www.csszengarden.com/?cssfile=/181/181.css&page=1 Whats the same and whats different?
  • Slide 5
  • Cascading Style Sheets Page 5CSCI 2910 Client/Server-Side Programming Defining a Style A style sheet is simply a block of text, contain either within the HTML file itself or within a separate file. Within the style sheet is a list of rules defining how the designer wanted browser to display certain components of the web page. The general structure of a rule is: selector {property: value; property: value;... property: value}
  • Slide 6
  • Cascading Style Sheets Page 6CSCI 2910 Client/Server-Side Programming Defining a Style Examples h1 {color: blue; font-size: 37px; font-family: arial} p {color: blue; font-family: impact; font-size: 12pt} code {text-indent: 1cm; background: #ccffcc; font-family: courier; color: green}
  • Slide 18
  • Cascading Style Sheets Page 18CSCI 2910 Client/Server-Side Programming External Style Sheets Linking To maintain a common look and feel across all of the pages on the site you are designing, it is best to create a single set of style rules. All the pages on the site can use the same file. To do this, you will create a separate text file that contains the rules. This file uses the same syntax as the embedded style sheet rules that were placed between the comment tags. Although the file extension isn't critical, the common file extension for style sheets is.css.
  • Slide 19
  • Cascading Style Sheets Page 19CSCI 2910 Client/Server-Side Programming External Style Sheets Linking (continued) For external style sheets, the tag replaces the... tags in the head section of the web page. Its format is: rel defines how the external file will be used in the HTML document. href gives the browser the URL (relative or absolute) of the style sheet. type is just like the type for the embedded style sheet.
  • Slide 20
  • Cascading Style Sheets Page 20CSCI 2910 Client/Server-Side Programming Importing Style Sheets There is a second (less popular and not recommended) method to retrieve style rules from an external style sheet file. It is called "importing". Importing works like a combination of embedded style sheets and linking. It replaces the rules of an embedded style sheet with the text @import url(mystyle.css)
  • Slide 21

Recommended

View more >