Download presentation
Presentation is loading. Please wait.
1
Information Architecture and design
css Presented by Hyeyoung Kim INF385E Information Architecture and design 25, HTML vs HTML + CSS CSS syntex Selector CSS implementation (imbedded/external/inline) CSS property What is CSS? Why was CSS created? CSS pros & Cons CSS browsers support CSS specification
2
What is CSS (Cascading Style Sheets)?
A simple styling language which allows attaching style in to HTML Style : the rule to control the appearance of various properties Style Sheets : text file(.css) containing the styles
3
What is CSS (Cascading Style Sheets)?
Cascade :Major concept in avoiding conflicting styles within a document…. :Basically, “the lower an element is within the document, the higher the priority it is given ”.
4
Why was CSS created? Web site become large and stylish HTML
: originally designed for indicating the structure of a document CSS : W3C : to separate content from its appearance (to distinguish structure from style)
5
CSS pros & cons Pros:( by Nick Badbury)
more control over the design of web page Structured content in web document Easier to update web site possible to decide how web page look when printed Cons: Inconsistent browsers support Bugs
6
Basic Concepts Browser Support
Browser support table Basic Concepts Browser Support Internet Explorer Netscape Navigator Opera Windows Macintosh All Platforms 4.0 5.0 5.5 6.0 4.x 7.0 3.5 Embedding a style sheet Y Linking to a style @import N @media Specify B Inheritance Y=supported, P=partial, B=buggy, N=no
7
CSS browsers support Internet Explore : Netscape navigator : Opera :
Browser info : Bug info : Validation info :
8
CSS specification more precise formatting than HTML (W3C)
CSS1(1996) : extensively supported CSS2(1998) : built in CSS1 + a variety of properties : very limited support in most browsers CSS2, revision1(2003)
9
HTML vs HTML + CSS HTML : myfile.html HTML+CSS : myfile.html
: myfile.html + mystyle.css
10
CSS rule Syntax Selector : equivalent of HTML element(s)
Declaration :style attached to a specific selector
11
Class selector & ID selector
Class selector : like ‘customized’ tag ID selector :almost similar but only one occurrence <head><style> .navbar{…} .title {background :white} #specialtitle{ background :ff99f} </style></head> <body> <ul class=”navbar”> <li class=”title”>What is CSS? <li class=”title”>CSS standard <li class=”title”>CSS syntax <li id=”specialtitle”>Link </ul> <head><style> #adbar {postion: fixed; height: 20%} #menu {position: fixed; width: 20%; top: 20%} #main {position: fixed;top: 20%; left: 20% </style></body> <body> <DIV id="adbar"> .</DIV> <DIV id="menu"> . </DIV> <DIV id="main"> . .</DIV> </BODY>
12
Adding style to HTML documents
Inline style :the style attached to one specific element Embedded style sheet :the style attached to one specific document External style sheets :style sheets to format and restyle the entire web site :method - link
13
Adding style to HTML documents
Inline style Embedded style sheet External style sheets: link <body> <h2 style=”color: blue”>inline style</h2> //inline </body> <head> <title>My first styled page</title> <style type=”text/css”> //embedded body{ color: #661400; background-color: rgb(194,255,102) } </style> </head >
14
Adding style to HTML documents
Inline style Embedded style sheet External style sheets: link <head> <link rel=”stylesheet” href=”mystyle.css” type=”text/css”> //link </head> <head> <style type=”text/css”> @import url(mystyle.css); @import url(mystyle_head.css); //import </style>
15
Properties To validate Category Definition & Examples Formatting type font family, font size, font style, line height, font weight, text-decoration, color Background background color, background image, repeat, attachment, horizontal position, vertical position Block word spacing, letter spacing, vertical alignment, text align, text indent,whitespace, display Box margin, padding, border-style, border width and height, float, clear, List Type, bullet image, position Position Type, visibility, width, height, z index, overflow, placement, clip Extensions page breaks, visual effect,
16
Properties Examples Various font-size P:first-letter stylish table
clear : float :left
17
myfile.html (content) mystyle.css (style)
<head> <title>My new first styled page</title> <style type="text/css"> #specialtitle { background :#ccebff; font-weight: 600} .heading {font-weight:900} ul{ list-stle-type:circle } ul li { margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black } ul a {text-decoration: none } a:link {color: blue } a:visited {color: purple } address { margin-top: 1em; padding-top: 1em; border-top: thin dotted } body { padding-left: 11em; font-family: Georgia, "Times New Roman",Times, serif; color: #661400; background-color: rgb(194,255,102) } .navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial,SunSans-Regular, sans-serif ; color :#cc2900} span{ text-decoration:underline} .title{ background : white ; font-weight: 600} mystyle.css (style) </style> </head> <body> ……… </body> </html>
18
from Embedded to External
myfile.html (content) + mystyle.css(style) :external style sheets (link) //myfile.html <html> <head> <link rel=”stylesheet” href=”mystyle.css” type=”text/css”> </head> <body>….</body> </html>
19
example
20
reference Niederst,J.(2001) Web design in a nutshell (2nd ED). Sebastopol,CA.: O’Reilly & Associates, Inc. Carey, P.(2001). Creating Web Pages with HTML and Dynamic HTML. Thomson Learning Meyer,E.A.(2004). Cascading Style Sheets. Sebastopol,CA.: O’Reilly & Associates, Inc. Dean,D.(2000). Cascading Style Sheets for Dummies. Indianapolis,IN: Dummies Press Allsopp,J & Sherrin M.(n.d.).The Complete CSS guide. Retrieved October 20, from Bos,B (2004/10/21). Cascading Style Sheets home page. Retrieved October 20, 2004 from Sanders,B (2004). HTML/CSS Course. Retrieved October 20, 2004 from Lawang,B(n.d.). RichInStyle.com CSS bug table. Retrieved October 20, 2004 from
Similar presentations
