CSC 2720 Building Web Applications Cascading Style Sheets (CSS)
-
Upload
ansley-jonson -
Category
Documents
-
view
215 -
download
2
Transcript of CSC 2720 Building Web Applications Cascading Style Sheets (CSS)
![Page 1: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/1.jpg)
CSC 2720Building Web Applications
Cascading Style Sheets (CSS)
![Page 2: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/2.jpg)
Benefits of Cascading Style Sheets Separate document presentation from document content
More features for formatting the appearance Can define font, size, background color, background image,
margins, etc.
Share style sheets across multiple documents or entire Web site Reduce development and maintenance time
Can specify a class definition for a style, effectively defining new HTML elements
Flexible – rules are applied in a hierarchical manner (precedence rules)
![Page 3: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/3.jpg)
How do Style Sheets work?
Browser may ignore some or all of the rules specified in the style sheets.
![Page 4: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/4.jpg)
Cascading Style Sheets
A simple text file with “.css suffix” CSS, Level 1 (1996)
Concerned with applying simple styles to HTML elements CSS, Level 2 (1998)
Incorporates and extends CSS-1 Supports media-specific style sheets (visual browsers, aural devices,
printers, etc) CSS, Level 3 (Under development)
Incorporates and extends CSS-2 Focused on modularization of the CSS specification New selectors, fancy borders and backgrounds, vertical text, user interaction,
speech and much more.
Note: A browser may not support all features in CSS level 1 and 2 See http://www.westciv.com/style_master/academy/browser_support/ for info about
browser's support for CSS.
![Page 5: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/5.jpg)
What kinds of style does CSS support? CSS 1
Font properties such as typeface and emphasis Color of text, backgrounds, and other elements Text attributes such as spacing between words, lines Alignment of text, images, tables, etc. Margin, border, padding, and positioning of most
elements Dimension
CSS 2 Relative and fixed positioning of most elements Bidirectional texts New font properties
![Page 6: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/6.jpg)
Select an element in the HTML file What are statements, selectors, declarations and
properties? How to specify them?
![Page 7: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/7.jpg)
CSS Syntax
body
{
font-family: Verdana, Helvetica, sans-serif;
font-size: 1em;
text-align: justify;
}
/* CSS Comments */
A single statement
selector
declaration
Property names and values (3 properties here)
![Page 8: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/8.jpg)
CSS Syntax Statement must have one or more selectors and a
declaration.
Selector specifies which HTML elements to be affected.
Declaration is one or more properties separated by semicolons “;”.
Property has name and value separated by a colon “:”. Some values have unit
White space is ignored but can improve readability
![Page 9: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/9.jpg)
Three Ways of Using CSS External Style Sheet
Store CSS code in an external file (usually with .css extension)
Apply to any document that explicitly includes the .css file
Internal or Embedded Style Sheet Defined in HTML document Affect only the page where the style is defined
Inline Styles Specified as an attribute in HTML tag Apply to only one element
![Page 10: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/10.jpg)
Specifying External Style Sheet Use <link> tag in <head> section to associate an external
style sheet to the HTML file.
h1 { text-align: center; font-family: Arial; }h2 { color: #440000; text-align: center; font-family: Arial Black, Arial, Helvetica; }
style1.css
<head>…<link rel="stylesheet" type="text/css" href="style1.css" >…</head>
![Page 11: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/11.jpg)
Specifying Internal Style Sheet Use <style> tag in <head> section Add <!-- and --> between statements to hide the
statements from being displayed by browsers that do not understand <style> elements.
<head>…<style type="text/css"><!--hr { color: sienna; }p { margin-left: 20px; }body { background-image: url("images/back40.gif"); }--></style>…</head>
![Page 12: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/12.jpg)
Specifying Inline Styles
Use attribute style in HTML tag to specify properties applied to that element
<p style="color: sienna; margin-left: 20px;">This is a paragraph</p>
![Page 13: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/13.jpg)
CSS-1 & CSS-2 Selectors HTML element selectors Selector groups Class selectors ID selectors Contextual selectors Link pseudo class selectors Pseudo element selectors Dynamic pseudo class selectors Child selectors More advanced selectors …
![Page 14: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/14.jpg)
HTML element selectors The selector is a name of an HTML element.
hr { color: sienna; }p { font-weight: bold; }
Selectors can be grouped together as comma-separated list
H1 { font-family: sans-serif }H2 { font-family: sans-serif }H3 { font-family: sans-serif }
is equivalent to:
H1, H2, H3 { font-family: sans-serif }
![Page 15: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/15.jpg)
Universal Selector "*", the universal selector, matches the name of any
element type.
/* All elements use this font */* { font-family: sans-serif }
![Page 16: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/16.jpg)
Class Selectors Class selector allows you define different styles for the
same type of HTML element. e.g.: Define two classes of paragraph, one center justified and one
right justified.
HTML elements + class "New elements"
<p class="right">This paragraph is right-aligned.</p><p class="center">This paragraph is center-aligned.</p><b class="warning">Don't you dare to fall asleep!</b>
/* Define two classes for element 'p' */p.right {text-align: right;}p.center {text-align: center;}/* Define a global class usable by all elements */.warning { font-color: red; }
![Page 17: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/17.jpg)
ID Selectors ID selector allows you define styles for a specific element
(not a specific kind of elements.)
<p id="special">I love Java!<p><p>This is some paragraph</p><div id="layer1"><img src="dummy.gif" /></div>
p#special { font-weight: bold; }
/* Specific style for element with id="layer1" */#layer1 { position:absolute; left:140; top:140; z-Index:1 }
![Page 18: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/18.jpg)
Contextual Selectors Decendent selector:
Selectors separated by space characters Select elements that are contained in some element
e.g.: div strong {text-decoration: underline} Select: <div><strong> selected</strong></div> Select: <div><p>…<strong> selected </strong>…</p></div> i.e., all the <strong> elements inside a div element.
Child selector: Selectors separated by ">" character Select only the immediate children e.g.: div > strong {text-decoration: underline}
Select: <div><strong> selected </strong></div> Does not select: <div><p><strong> not selected </strong></p></div>
![Page 19: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/19.jpg)
Pseudo-Classes and Pseudo-Elements
Pseudo-class selector Based on a set of predefined qualities that an HTML
element can possess. No actual class attributes exist in the markup. :active, :link, :visited, :hover, :focus, :first-child
Pseudo-element selector Identify a virtual element that doesn’t exist in the
markup. :before, :after, :first-letter, :first-line e.g.: p:first-child:first-line {
font-size: larger; }
![Page 20: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/20.jpg)
Link Pseudo-ClassesProperty Values
a:link Define the style for unvisited links
a:visited Define the style for visited links
a:active Define the style for active link (when you click on it)
a:hover Define the style for hovered link (when mouse move over it)
Hover
<style type="text/css">.class1 A:link {text-decoration: none}.class1 A:visited {text-decoration: none}.class1 A:active {text-decoration: none}.class1 A:hover {text-decoration: underline; color: red;}Background colored link
.class2 A:link {background: #FFCC00; text-decoration: none}
.class2 A:visited {background: #FFCC00; text-decoration: none}
.class2 A:active {background: #FFCC00; text-decoration: none}
.class2 A:hover {background: #FFCC00; font-weight:bold; color: red;}</style>
![Page 21: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/21.jpg)
Dynamic Pseudo Classes Apply to any element (not just links) in the
Active state While the mouse is being pressed on the selected element
Hover state While the mouse is over the selected element
Focus state While the selected element has the keyboard focus
e.g.: change the background color of a paragraph to green while the mouse is over it.
p:hover { background: green; }
Note: IE does not yet support pseudo class on elements other than links. Pseudo class must be specified for elements (cannot be a generic
class or generic id) p:hover and div.someClass:active are ok, but .someClass:hover is not ok
![Page 22: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/22.jpg)
Other Selectors Adjacent sibling selectors
e.g.: h1 + h2 { margin-top: -5mm } selects H2 if(a) h1 and h2 have the same parent(b) h2 immediately follows h1
Attribute selectors Select elements with specific attributes e.g.: h1[title] { color: blue; } selects h1 that has an
attribute named "title" (regardless of its value). e.g: span[type=example] { color: blue; } selects spa
n element with attribute type="example"
See CSS-2 specification for detailed infohttp://www.w3.org/TR/REC-CSS2/selector.html
![Page 23: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/23.jpg)
Additional Syntax Rules Keywords must not be placed within quotes Examples:
width: "auto"; Incorrect
width: auto; Correct border: "none"; Incorrect
border: none; Correct background: "red"; Incorrect
background: red Correct
All CSS style sheets are case-insensitive Exceptions: font name, HTML attribute values such as
values of class and id.
![Page 24: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/24.jpg)
Inheritance An element inherits its parent's properties if the properties
are not specified for the element. e.g.: <h1 style="color:blue">The headline <em>is</em> impo
rtant!</h1>
The emphasized text "is" is displayed in blue color.
Computed values, not actual values, are inherited.<body style="font-size: 10pt">
<h1 style="font-size: 120%">
A <em>large</em> heading</h1></body>
The font size for h1 is 12pt (relative to the font size of its parent). The font size for em is also 12pt (not 14.4pt)
![Page 25: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/25.jpg)
The Cascade (Precedence Rules)
1. Author rules > User rules > User agents
2. Rules marked “important” have the highest priority, and they overrides the normal order of cascade.
User's "important" rules have higher priority than the same author's "important" rules.
Syntax:
h1 { font-size: 16pt !important;
font-family: sans-serif; }
![Page 26: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/26.jpg)
3.More specific rules have precedence over less specific rules A selector's specificity is calculated as follows:
count the number of ID attributes in the selector (= a) count the number of other attributes and pseudo-classes in the selector (= b) count the number of element names in the selector (= c) ignore pseudo-elements. e.g.:
* /* a=0 b=0 c=0 -> specificity = 0 */LI /* a=0 b=0 c=1 -> specificity = 1 */UL LI /* a=0 b=0 c=2 -> specificity = 2 */UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */ LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */#x34y /* a=1 b=0 c=0 -> specificity = 100 */
4. In case of tie, the last rule has priority.
![Page 27: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/27.jpg)
Property Categories Text style – Fonts properties, … Text layout – Text alignments, … Foreground & Background Border Margin Padding Page layout Element type User interface
![Page 28: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/28.jpg)
Text Style Properties What properties does text have?
Color Font-specific
font-weight font-family font-size font-style font-size-adjust font-stretch
Text-specific text-decoration text-transform text-shadow
![Page 29: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/29.jpg)
Useful Font Properties
font-weight Relative weight (boldness) of font normal | lighter | bold | bolder | 100 | 200 | ... | 900 | inherit
H1 { font-weight : 200 }
H2 { font-weight : bolder }
font-style Font face type within a family normal | italic | oblique
P { font-style : normal }
TH { font-style : italic }
![Page 30: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/30.jpg)
Useful Font Properties, cont. font-size
Either relative or absolute size of font Absolute length value: pt, pc, in, cm, mm Relative length values: em, ex, px, % Absolute size: xx-large | x-large | large | medium | small | x-small |
xx-small Relative size: smaller | larger
STRONG { font-size: 150% } P { font-size: 14pt } P { font-size: xx-large }
![Page 31: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/31.jpg)
Useful Font Properties, cont. font-family
Typeface family for the font
H1 { font-family: Arial } /* Arial is a font name */
H2 { font-family: serif } /* serif is a keyword, which suggests the user agents to use a font that belong to the "serif" font family */
Generic font families: serif: Times New Roman sans-serif: Arial cursive: Comic Sans MS fantasy: Decorative fonts monospace: Courier New (Font with fixed width)
![Page 32: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/32.jpg)
Text layout properties How text itself is layout on a page?
Letter-spacing Word-spacing Line-height Vertical-align Text-indent Text-align Direction
![Page 33: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/33.jpg)
Useful Text Properties text-decoration
Describes text additions or “decorations” that are added to the text of an element
none | underline | overline | line-through | blink
P { text-decoration: underline; }
vertical-align Determines how elements are positioned vertically top | bottom | baseline | middle | sub | super | text-top | text-bottom | %
text-align Determines how paragraphs are positioned horizontally left | right | center | justify
![Page 34: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/34.jpg)
Useful Text Properties, cont. text-indent
Specifies the indentation of the first line of the paragraph +/– pt, pc, in, cm, mm | +/– em, ex, px, %
P { text-indent: -25px } /* Hanging indent */
line-height Specifies the distance between two consecutive baselines in a
paragraph normal | number | pt, pc, in, cm, mm | em, ex, px, %
.double { line-height: 200% } .triple { line-height: 3 } /* 3x the font size */ DIV { line-height: 1.5em }
![Page 35: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/35.jpg)
Background Properties
How the background of an element appears? Background-color Background-image Background-attachment Background-repeat Background-position background
![Page 36: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/36.jpg)
Useful Color and Background Properties color
Color of the text (foreground color) color-name | #RRGGBB | #RGB | rgb(rrr, ggg, bbb) | rgb(rrr%,
ggg%, bbb%)
P { color : blue; } H1 { color : #00AABB; } H3 { color : rgb(255, 0, 0 ); } /* red
*/
background-color Background color transparent | all possible values of property "color"
background-image none | url(filename) Specifies an image to use as the background of region
H2 { background-image: url(Bluedrop.gif); }
![Page 37: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/37.jpg)
Useful Color and Background Properties background-repeat
Specifies how to tile the image in the region repeat | repeat-x | repeat-y | norepeat
BODY { background-image: url(Bluedot.gif); background-repeat: repeat-x;}
background Lets you combine properties in a single entry
P { background: url(wallpaper.jpg) repeat-x; }
![Page 38: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/38.jpg)
Useful Color and Background Properties background-attachment
Specifies whether background image is fixed or scrolled with document
scroll | fixed
e.g: Creates an infinite vertical band that remains "glued" to the viewport when the element is scrolled.
BODY { background: red url("pendant.gif"); background-repeat: repeat-y; background-attachment: fixed;}
note: "fixed" fixes image w.r.t. to the viewport (the browser displaying area) and not w.r.t. to the containing black.
![Page 39: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/39.jpg)
Useful Color and Background Properties
background-position Specifies initial position of the background image Specified using two values
% % <length> <length> /* fixed absolute distance */ [top | center | bottom] [left | center | right]
BODY { background: url("banner.jpeg") right top } /* 100% 0% */BODY { background: url("banner.jpeg") top center } /* 50% 0% */BODY { background: url("banner.jpeg") center } /* 50% 50% */BODY { background: url("banner.jpeg") bottom } /* 50% 100% */
BODY { background: url(banner.jpeg") 100px 100px }
![Page 40: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/40.jpg)
Length UnitsUnit name Abbreviatio
nMeaning Relative?
Em em The height of a font Yes
Ex ex The height of the letter x in a font Yes
Pica pc 1 pica is 12 points No
Point pt 1/72 of an inch No
Pixel px One dot on a screen No
Millimeter mm Printing unit No
Centimeter cm Printing unit No
Inch in Printing unit No
![Page 41: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/41.jpg)
Box Model Every displayable element is contained in a box that has a
content area (text, image, etc.), an optional padding, border and margin areas.
This is the Contentpadding
padding
border
margin
border
margin
![Page 42: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/42.jpg)
Content, Padding, Border and Margin Content area is the smallest rectangle containing the
rendered data that make up the element.
Padding is the space between the content and the element's borders. Padding takes the background of the element
Border can have styles
Margin is the space between the element's borders and the "containing box" (which belongs to the element's parent or ancestor in the document tree) Margin is always transparent
![Page 43: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/43.jpg)
Padding and Margin Padding and margin can be further divided into four sub-
areas -- top, right, bottom, left Padding areas take the background of the element. Margin areas are always transparent (takes the containing box
background). Does not apply to table elements (table, td, tr, th)
P { padding-top: 2em; margin-right: 10em; }
Short hand for setting margin (same for padding)body { margin: 2em } /* all margins set to 2em */
body { margin: 1em 2em } /* top & bottom = 1em,
right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em,
bottom=3em, left=2em */
![Page 44: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/44.jpg)
Border Properties Border has the following properties
width <length> | thin | medium | thick
color <color value> | transparent Default value is the "color" property value of the element
style none | hidden | dotted | dashed | solid | double | groove |
ridge | inset | outset When style is "none", the border width is zero
P { border-width: 2em;
border-color: red;
border-style: solid; }
![Page 45: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/45.jpg)
Border Properties Border can also divided into top, left, bottom and
right edges.P { border-top-width: 2em;
border-right-width: 4em;
border-bottom-width: 2em;
border-left-width: 4em;
border-top-style: solid;
border-right-style: double;
border-bottom-style: solid;
border-left-style: solid;
}
/* Same as the following shorthand writing */
P { border-width: 2em 4em;
border-style: solid double solid solid;
}
![Page 46: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/46.jpg)
Border Properties
/* Another form of shorthand writing of the previous example
The specified values for each property must be in the following order: <width> <style> <color>
*/
P {
border-top: 2em solid;
border-right: 4em double;
border-bottom: 2em solid;
border-left: 4em solid;
}
/* Other examples: Applies to all four edges */
DIV { border: thin solid blue; }
SPAN { border: 0.2in dotted red; }
![Page 47: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/47.jpg)
Images and Floating Elements width, height
Specify a fixed size for an element (usually an image) auto | <length>
IMG.bullet { width: 50px; height: 50px; }
float This property lets elements float into the left or right margins
with text wrapping around none | left | right
clear Controlling flow next to float none | left | right | both
![Page 48: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/48.jpg)
SPAN and DIV <SPAN>
An inline-level element in HTML, meaning that no line breaks are inserted before or after the use of it.
Other inline-level element: <b>, <img>, <em>, …
<DIV> A block-level element in HTML, meaning that line
breaks are automatically inserted to distance the block from the surrounding content.
Other block-level elements: <p>, <table>, <ol>, <h1>, …
The whole block can be easily positioned on the page.
![Page 49: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/49.jpg)
CSS Positioning Schemes Static
Follows normal flow
Relative Places an element with respect to where it would be statically
positioned (i.e. relative to the positive assigned by the browser).
Absolute positioning An element will be located with respect to its parent element
(containing box)
Fixed positioning The page scroll, the elements also scroll (remain fixed in the page). Not supported in IE
![Page 50: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/50.jpg)
Useful Positioning Properties top, left, bottom, right
Specifies the top/left/bottom/right sides of the layer relative to the parent window
<length> | % | auto
position Describes how the position is defined to the parent window absolute | relative | static | fixed
visibility Determines whether a layer is visible or hidden visible | hidden
![Page 51: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/51.jpg)
Useful Layering Properties z-index
Specifies which elements should appear above/below other elements
<integer> | auto The higher the numbers, the higher the level
![Page 52: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/52.jpg)
Using Customized Fonts Introduce the system font concept
@font-face {font-family: "Robson Celtic";src: url("http://site/fonts/rob-celt.eot");}
Known supported font file type: Portable Font Resources (.pfr): TrueDoc for Nav 4.0+ and IE 4.0+
on Windows, Mac, and Unix platforms Download the software from
Embeddable Open Type (.eot): Compatible only with Explorer 4.0+ on the Windows platform
Download the software from http://www.microsoft.com/typography/web/embedding/weft3/default.htm
![Page 53: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/53.jpg)
Other CSS properties Changing Mouse Cursor Setting clipping area List
Bullets type (can use image) Numbering type
![Page 54: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/54.jpg)
Useful Resources CSS validation service
http://jigsaw.w3.org/css-validator/
English translation of CSS selectors http://gallery.theopalgroup.com/selectoracle/
![Page 55: CSC 2720 Building Web Applications Cascading Style Sheets (CSS)](https://reader030.fdocuments.us/reader030/viewer/2022032517/56649c855503460f9493ba3c/html5/thumbnails/55.jpg)
References W3 Schools – CSS Tutorials
http://www.w3schools.com/css/default.asp
CSS Level 2 Specification http://www.w3.org/TR/REC-CSS2/