From:
seanny
Views: 198
Comments: 0
This presentation explains what professional PSD to HTML CSS services are, what sets professional PSD to HTML providers apart, how customers can test the markup quality and correctly compare the services prices.
Slide 1: Cascading Style Sheets
Part 1
Library and Information Services, University of St Andrews
Slide 2: CSS vs HTML
HTML: Originally intended to markup structure of a document (<h1>, <h2> ... <h6>, <p>, <ol>, <ul>, <blockquote>, ...) CSS Developing technology, CSS1, CSS2 (CSS3 under discussion) Markup presentation, i.e. formats and layout
Separation of content and presentation
Slide 3: CSS Structure
selector {property: value;}
Selector:
on a simple level HTML element you wish to define attribute you wish to change value the property takes
Property:
Value:
Slide 4: Internal Style Sheets (1/2)
Inline Affects individual HTML tag
<html> ... <body> ... <p style=“font-family: Arial, sansserif; ”>some text</p> </body> </html>
Slide 5: Internal Style Sheets (2/2)
Embedded
Affects individual document
<html> <head> ... <style type=“text/css”> p {font-family: Arial, sans-serif;} </style> </head> <body> ... <p>some text</p> </body> </html>
Slide 6: External Style Sheets (1/4)
Separate text file (.css)
e.g. styles.css
p{ font-family: Arial, Sans-serif; }
Slide 7: External Style Sheets (2/4)
Linked styles
Affect all documents that are linked to the style sheet
<html> <head> ... <link href=“styles.css” rel=“stylesheet” type=“text/css” /> </head> <body> ... <p>some text</p> </body> </html>
Slide 8: External Style Sheets (3/4)
Imported styles (1/2)
Affect all documents that are linked to the style sheet Not supported by level 4 browsers Often used to hide CSS2 styles from older browsers
Slide 9: External Style Sheets (4/4)
Imported styles (2/2)
Into HTML file
<head> ... <style type=“text/css”> <!-import url(“styles.css”); --> </style> </head>
Into another style sheet (sectionstyles.css) - @import instruction must be first line of file! @import url(“styles.css”); /*sectionstyles start here*/ h1 { font-size: 200%; color: #6b84b5 }
Slide 10: Order of precedence
n n n n n n
HTML formatting instructions (e.g. <font> tags) Inline styles Embedded styles Linked styles Imported styles Default browser styles
Slide 11: Types of CSS styles
Styles assigned to a HTML element Class selector styles Define different styles for one or more HTML elements Assigned to the class attribute within an HTML element ID selector styles Define different styles for one and the same HTML element Assigned to the ID attribute within an HTML element
Slide 12: Class selector styles
CSS: … .blue {color: #082984} .red {color: #de2131} HTML … <h1 class=“red”>Headline</h1> <p class=“red”>a summary</p> <p class=“blue”>some text</p> …
Slide 13: Pseudo-classes
Used when an HTML element can display more than
one behaviour (e.g. hyperlinks)
CSS:
a:link {color: #000} a:visited {color: #000} a:hover {color: #69f} a:active {color: #000}
HTML
<a href=“nextpage.html”>Next page</a>
Slide 14: ID Selector styles
CSS
… #red_heading {color: red} #summary {color: red} p#conclusion {color: blue}
HTML
… <h1 id=“red_heading”>Headline</h1> <p id=“summary”>Summary</p> <p id=“conclusion”>Conclusion</p> …
Slide 15: Further resources
Netskills training material
http://www.netskills.ac.uk (We’ve got a site license for this material, but you need to register!)
World Wide Web Consortium
http://www.w3.org/Style/CSS/
Slide 16: Cascading Style Sheets
Part 1
Library and Information Services, University of St Andrews
Slide 17: What next?
Create a Dreamweaver site using the files on floppy disk as a basis for your site - FTP Host: www.st-andrews.ac.uk - Login: [your username] n Check hyperlinks and correct them where necessary n Delete all HTML formatting information in file aboutme.html n Create a style sheet as described in your handout
n
