Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Web Site Design with C a Lee Honeycutt English 313 March 8, 2001 scading Style Sheets Design Principles http://info.med.yale.edu/caim/manual/contents.html Process Interface Design Site Design Page Design Typography Editorial Style Graphics Multimedia Typography In present HTML: Alignment (limited) Line Length (invisible tables) Upper vs. Lower Case (by hand) White Space (blank GIFs) Cascading Style Sheets Advantages: Separation of content from design Efficient control over large document sets Pixel-level control over typography Netscape & Internet Explorer incompatibilites Standard in next few years How CSS Works HTML Files CSSheet Web Pages How CSS Works Similar to “Master Document” in print programs Various type attributes included in single CSS file CSS file controls type choices for all documents in a site Changes in type cascade to all HTML documents CSS Link Link inserted in header of all HTML files: <link href= "master.css" rel="styleSheet” type="text/css"> CSS Content Contents of master.css file: Selector {Property: Value} declaration tag-selector {property1:value1; property2:value1 value2;…} h1 {color: green; font: Arial, Helvetica, sans-serif} CSS Content Content of master.css file: h1 { color: maroon; font-weight: bold; font-size: large; fontfamily: FontName, Arial, Helvetica, Geneva, Swiss, SunSansRegular; text-decoration: none; text-align: left; word-spacing: 12px; letter-spacing: 8px; list-style-type: square } h2 { color: black; font: italic small-caps medium FontName, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; textdecoration: none; text-indent: 20px; list-style-type: square } Four Selectors Tag selectors - correspond to HTML tags, such as <H1> and <p> Classes - independent of HTML code; applied locally to unlimited select blocks of text IDs - used on a limited basis to modify existing HTML elements. Carry higher weight in “cascade.” Pseudo classes and pseudo elements CSS Properties Fonts Text Color and Background Boxes Lists Classifications Implementation Advice Start small, making only simple style sheets View style in different browsers to see results Let audience’s technical abilities determine complexity of styles Find a good CSS editor, but learn to tweak code yourself.