Transcription
COSC 2206 Internet ToolsCSSCascading Style Sheets1
W3C CSS Reference The official reference is herewww.w3.org/Style/CSS/BGA2
W3C CSS Validator You can upload a CSS file and the validatorwill check it for you.http://jigsaw.w3.org/css-validator/BGA3
Web Design Group The Web Design Group has a completereference for style e version4
w3schools CSS Tutorial Excellent interactive tutorial on CSSwww.w3schools.com/BGA5
Other links CSS1, ttp://www.w3.org/TR/REC-CSS26
Style Sheet Advantages (1) HTML permits the mixing of documentstructure and formatting (style). BGAe.g. the infamous FONT tag which has nowbeen deprecated and is not part of XHMTL.Style sheets permit the separation of thelogical document structure and content fromits style.It is possible to give a uniform look and feelto a web site that can easily be customized.7
Style Sheet Advantages (2) greater control over typography and pagelayout: BGAspecifying font families, styles, and sizesmargins, indentation, box layoutabsolute and relative positioning.no need to use the font tag every time thefont needs to be specified -- can be done once inthe style sheet. font is not part of the XHTML specification8
Style Sheet Disadvantages browser support is not uniform BGANo support for IE versions 3No support for Netscape versions 4There are some incompatibilites among laterversions too.This will change since there is now a W3Cstandard for CSS1. CSS2 is also a standardand CSS3 will soon become a standard.9
Style sheet levels CSS Level 1 CSS Level 2 absolute and relative positioning, z-order, manynew propertiesCSS Level 3 BGAsupport for fonts and formattingwork in progress (2007 - 2008)10
CSS1 (1)background, background-attribute,background-color, background-image,background-position, background-repeatborder, border-bottom,border-bottom-width, border-color,border-left, border-left-width, border-right,border-right-width,border-style, border-top, border-top-width,border-width11
CSS1 (2)clear, color, display, floatfont, font-family, font-size, font-style,font-variant, font-weightheight, letter-spacing, line-heightlist-style-image, list-style-position,list-style-typemargin, margin-bottom, margin-left,margin-right, margin-top12
CSS1 (3)padding, padding-bottom, padding-left,padding-right, padding-toptext-align, text-decoration, text-indent,text-transformwhite-space, width, word-spacing13
CSS2 background, border, bottomclear, clip, color, content, cursordirection, displayfloat, font, height, left, margin, marksorphans, outline, overflowpadding, page, position, quotesright, size, top, visibility, widows, width14
Three style types Inline styles (least flexible) Embedded (internal) style sheets defined in head of document using style tagExternal style sheets (most flexible) BGAdefined within a tag such as p using the styleattributeconnected to an HTML document using the link tag or the import directive15
Inline style syntax Syntaxstyle "property: value; . property: value;" Examples: p style "color: blue" . /p h1 style "font-family: arial" . /h1 Disadvantages: doesn't separate document structure fromformatting so use sparingly, if at allexamples/inlineStyle.htmlBGA16
Embedded style sheet syntax style type "text/css" selector {property: value; . property: value;}selector {property: value; . property: value;}.selector {property: value; . property: value;} /style Several style tags can appear inthe document headBGAThis style sheet goesin the document headusing the style tag17
Types of selectors (1) Modify style of an existing HTML element(tag) Here h1 is the selector so all h1 elementtext will appear in a sans-serif style font. BGAExample:h1 {font-family: Arial,sans-serif}Example h1 This is a heading /h1 18
Types of selectors (2) a class associated with an existing HTMLelement (tag) Now we can have normal paragraphs andparagraphs that are indented BGAExample:p.indent {margin-left: 2em}Example: p class "indent" This is anindented paragraph /p 19
Types of selectors (3) a class not associated with an existing HTMLelement (tag): use in any tag Now we can use this class with any blocklevel HTML element BGAExample:.indent {margin-left: 2em}Example: h1 class "indent" This is anindented heading /h1 20
Types of selectors (4) a contextual selector applies to elementsonly if they are inside other elements. Now em tags will display their text in redonly if the em tag is inside a paragraph tag BGAExample:p em {color: #FF0000}Example: p text em emphasis /em /p 21
Embedded style example 1Redefining styles for html tagsExample using sans-serif font for headings style type "text/css" h1, h2, h3 { font:family: arial, sans-serif;} /style Note how styles for multiple tags can be defined atonce (grouping) by separating them with commasexamples/embeddedStyle1.htmlBGA22
Embedded style example 2 style type "text/css" h1 { font-family: arial, sans-serif;font-size: xx-large;}h2 { font-family: arial, sans-serif;font-size: x-large;}h3 { font-family: arial, sans-serif;font-size: large;}p.warning {color: #FF0000}p.warning code {color: #000000} /style styleclasscontextualstyle classexamples/embeddedStyle2.htmlBGA23
Embedded style example 3 style type "text/css" h1,h2,h3 { font:family: arial, sans-serif; } /style styleh1 {h2 {h3 {type "text/css" font-size: xx-large; }font-size: x-large; }font-size: large; }same aspreviousexample usinggrouping to factorout commonproperties /style examples/embeddedStyle3.htmlBGA24
Embedded style example 4 style type "text/css" .box {border: 1pt; border-color: red;border-style: solid; width: 0%;margin: 1em; padding: 0.5em} /style pre class "box" . /pre a box style classthat can be usedinside any elementuse it likethisexamples/embeddedStyle4.htmlBGA25
External style sheet syntaxselector{property1: value1;property2: value2;.propertyN: valueN;}/* . */style commentscan be includedan external stylesheet is asequence ofthese rulesExternal style sheets don't use the style tagBGA26
Using an external style sheet The link tag is used in the documenthead to associate an external style sheetwith the document.Example: BGA link rel "stylesheet"type "text/css"href "timetable.css" 27
The block level div tag div is a special HTML tag that can beused to apply styles at the block level (ablock has a line break before and after theblock)Example div class "." block level html goes here /div BGASee online book example later28
The inline span tag span is a special HTML tag that can beused to apply inline styles (no line breaksbefore and after)Example: p . span class "red" . /span . /p BGASee online book example later29
Timetable example (1) A timetable can be arranged as a table withheader rows and cells for the times.HTML documentexamples/timetable.html External Style Sheet (next slide)examples/timetable.cssBGA30
timetable.css (1)/* A stylesheet for a timetable */th{ width: 20%; font-family: Arial, sans-serif;background-color: #CC99FF }.cellSmallEmpty{ height: 4em; font-size: x-small; verticalalign: top; background-color: #FFFF99 }.cellSmallFull{ height: 4em; font-size: x-small; verticalalign: top; background-color: #B7B0FF }BGA31
timetable.css (2).cellLargeEmpty{ height: 6em; font-size: x-small; verticalalign: top; background-color: #FFFF99 }.cellLargeFull{ height: 6em; font-size: x-small; verticalalign: top; background-color: #B7B0FF }.mainHeader{ font-family: Arial, sans-serif; font-size: xlarge; background-color: #6666FF;color: #FFFFFF }BGA32
timetable.css (3).dayHeader{ font-family: Arial, sans-serif; font-size:large}.center{ text-align: center}BGA33
Online book example (1) A consistent style can be obtained using anexternal style sheet.examples\javaChapter11\example.html External Style Sheet (next slide)examples\javaChapter11\java.cssBGA34
java.css (1)body {font-family: Garamond, "Times Roman","Times", serif;font-size: 12pt;}h1{font-family: Verdana, Arial, Helvetica,sans-serif;font-weight: bold;font-size: 20pt;background-color: #9999CC;color: #000000;}BGA35
java.css (2)h2{font-family: Verdana, Arial, Helvetica,sans-serif;font-weight: bold; font-size: 18pt;background-color: #9999CC;color: #000000;}h3{font-family: Verdana, Arial, Helvetica,sans-serif;font-weight: bold; font-size: 16pt;}BGA36
java.css (3)code {font-family: "Courier New", Courier,monospace;font-size: 12pt;}.center { text-align: center; }.finePrint {font-weight: normal;font-size: 6pt;}BGA37
java.css (4).ChapterHeading {font-family: "Arial Black", Helvetica,sans-serif;font-weight: bold; font-size: 24pt;}.JavaClassHeader {font-family: Verdana, Arial, Helvetica,sans-serif;font-weight: bold; font-size: 16pt;text-align: center; width: 100%;background-color: #FFFF80;color: #000000;}BGA38
java.css (5).JavaClassListing {font-size: 9pt; text-align: left;border: 1pt; border-color: red;border-style: solid; width: 80%;padding: 0.5em; margin-top: 1em;margin-bottom: 1em;}.JavaCode {font-size: 10pt; text-align: left;margin-left: 3em; color: #804000;background-color: #FFFFFF;}BGA39
Using java.css (1) Heading for each chapter div class "ChapterHeading" CHAPTER 11 span class "finePrint" A chapter from mybook /span br Graphical Interface Design br Graphical applications and applets /div BGA40
Using java.css (2) A java class listingDoesn't workin Netscape div class "center" pre class "JavaClassListing" div class "JavaClassHeader" Class ApplicationTemplate /div java class listing goes here /pre /div BGA41
Using java.css (3) Displayed java code pre class "JavaCode" private JLabel prompt;private JTextField input;private JTextField output; /pre BGA42
COSC 1046 assignments HTML file and alternate style sheetsexamples/assignment1.html First Style Sheetexamples/docsmall.css Second Style Sheetexamples/doc.cssBGA43
CSS properties There are 6 categories BGAFont PropertiesColor and Background PropertiesText PropertiesBox PropertiesClassification PropertiesThere are also several ways to specify units44
Font properties (1) Font family Specific font families have names such asTimes or Arial. There are 5 generic names: BGAfont-family: list of valuesserifsans-serifcursivefantasymonospace45
Font properties (2) Examplesp {font-family: "Times New Roman",Times, serif;}p {font-family: Verdana, Arial,Helvetica, sans-serif;} BGAIn these examples the preferred family is thefirst one listed. If it is not found the next one ischosen and so on. If none of the specific fontfamilies is found a generic serif (first example)or sans-serif (second example) family is used.46
Font properties (3) Font Style font-style: valuewhere value is normal, italic, or obliqueExamples h1 {font-family: Arial,sans-serif; font-style: italic}p em {font-style: oblique}only for em tags inside a p tagBGA47
Font properties (4) Font Variant font-variant: valuewhere value is normal or small-capsExamples ul li {font-variant: small-caps}li li {font-variant: normal}contextualselectorsBGA48
Font properties (5) Font Weight Example BGAfont-weight: valuewhere value is normal, bold, bolder,lighter, 100-900 in steps of 100groupingh1,h2,h3{font-family: Arial,sans-serif;font-weight: bolder}49
Font properties (6) Font Size font-size: value where value is anabsolute size, relative size, length, percentage.Absolute sizes: Relative sizes: larger and smallerlength or percentage BGAxx-small, x-small, small, medium, large,x-large, xx-large.10pt, 12pt, 150%, 200%, etc.50
Font properties (7) Examples h1 {font-size: xx-large}h1,h2,h3 {font-size: larger}p {font-size: 200%}body {font-size: 14pt}examples/font.htmlBGA51
Background properties (1) Background Color background-color: valuewhere value is a color or transparentExamples body { background-color: white}h1 { background-color: #808080}Note: color names arenot part of the webstandard but browserssupport themBGA52
Background properties (2) Background Image background-image: valuewhere value is a url or noneExamplesbody {background-image:url(/images/back.gif)} body {background-image: none}There are also background-repeat,background-attachment, andbackground-position BGA53
Background properties tmlBGA54
Text properties (1) Word Spacing Letter Spacing BGAword-spacing: length orword-spacing: normalExample: p.note {word-spacing:-0.2em}letter-spacing: lengthletter-spacing: normalExample: body {-0.2 em}Example: p.note {word-spacing:-0.2em;letter-spacing: -0.1em}55
Text properties (2) Text Decoration Example: BGAtext-decoration: valuewhere value is none, underline, overline,line-through, or blinkh1, h2, h3 {text-decoration:underline}56
Text properties (3) Text Alignment Value BGAvertical-align: valuebaselinesuper, topsub, bottomtext-top, middle, text-bottompercentage57
Text properties (4) Text Transformation Values BGAtext-transform: valuenonecapitalizeuppercaselowercase58
Text properties (5) Text Alignment Values BGAtext-align: valueleftrightcenterjustify59
Text properties (6) Text Indentation text-indent: lengthtext-indent: percentageExamples p {text-indent: 5em}p {text-indent: 10%}10 percent ofparagraph widthBGA60
Text properties (7) Line Height line-height: normalline-height: lengthline-height: percentageExamples p {line-height: 2ex}p {line-height: 150%}examples/text.htmlBGA61
Box margin properties Top, Right, Bottom, and Left Margin toprightbottomleftExamples: BGAmargin-left: valuemargin-right: valuemargin-top: valuemargin-bottom: valuemargin: list of values.box {margin-left: 3em}.box {margin: 1em 2em 1em 2em}62
Box padding properties Top, Right, Bottom, and Left Padding toprightbottomleftExamples: BGApadding-left: valuepadding-right: valuepadding-top: valuepadding-bottom: valuepadding: list of values.box {padding-left: 3em}.box {padding: 1em 2em 1em 2em}63
Box border properties (1) Top, Right, Bottom, and Left BorderWidth value: BGAborder-left-width: valueborder-right-width: valueborder-top-width: valueborder-bottom-width: valuethin, medium, thicklengthexamples/box.html64
Box border properties (2) Border Width border-width: valuevalue Corresponding to the four sides specify one tofour of the following values BGAthin, medium, thick, lengthIf only one value is specified it applies to allsides65
Box border properties (3) Border Color Value: BGAborder-color: valueCorresponding to the four sides specify one tofour color valuesIf only one value is specified it applies to allsides66
Box border properties (4) Border Style border-style: valueValue: Corresponding to the four sides specify one to ofnone, dotted, dashed, solid, double,groove, ridge, inset, outsetIf only one value is specified it applies to all sidesexamples/testBorder.htmlBGA67
Box width property (5) Width Value: BGAwidth: valuelength, percentage, or autoSpecifies the width of a block-level element oran element specified by img, input,textarea, select, or objectExample: input.button { width: 5em }68
Box height property (6) Height height: valueValue: length, or autoSpecifies the height of a block-level element oran element specified by img, input,textarea, select, and objectExample:img.size {width: 40px; height: 30px}BGA69
Box float property (7) Float Value: float: valueleft, right, or noneUsed to wrap text around an elementexamples/float.htmlBGA70
Box clear property (8) Clear Value: BGAclear: valueleft, right, both, or noneUsed to specify if an element allows floatingelements to its sides71
Classification properties (1) Display Value: BGAdisplay: valueblock, inline, list-item, or noneBrowser gives a default display value to eachelement so display can change it.72
Classification properties (2) Whitespace Value: BGAwhite-space: valuenormal, pre, or nowrapSpecifies how spaces are treated inside anelement73
Classification properties (3) List Style Type Value: disc, circle, square, decimal, lowerroman, upper-roman,lower-alpha, upper-alpha, noneSpecifies the list item marker to use: BGAlist-style-type: valueol{list-style-type: upper-alpha}ol ol {list-style-type: decimal}74
Classification properties (4) List Style Image Value: BGAlist-style-image: valueurl, noneSpecifies an image to use as the list itemmarker75
Classification properties (5) List Style Position Value: list-style-position: valueinside, outsideSpecifies where marker is placed relative tothe list item. The value inside causes textto wrap under the marker instead ofindented under the marker.examples/lists.htmlBGA76
CSS Length Units Units are either relative or absolute: relativeones are preferred.Relative units height of an elements fontheight of the letter "x"pixelsAbsolute units BGAemexpxin, cm, mm, pt (points, 1pt 1/72 inch)pc (picas, 1pc 12pt)77
CSS percentage units BGAUse the % signThey are relative to other values such as theelements font size.78
CSS color units A color name (not part of the HTML 4.01specification)6 hex digits rgb(r, g, b) example: rgb(96,160,64)rgb(r%, g%, b%) BGAexample #80A040example: rgb(10%,20%,30%)79
Combining classes If you have two or more selectors of theform.one { . }.two { . }they can both be used in the same classFor example div class "one two" . /div BGA80
Home page template Tables and style sheets can be used to layout a simple home page. Simple example:Banner goes s/layout/layout.cssBGA81
W3schools tutorial BGAThe w3schools tutorial(www.w3schools.com) has an excellentinteractive css tutorial.http://www.w3schools.com82
3 W3C CSS Validator You can upload a CSS file and the validator will check it for you.
