Web Application Development CS 228Web Development CS 303
Fall 2015numangift.wordpress.com/web-development-spring-2015
April 16th, 2015April 18th, 2015April 23rd, 2015
Lecture 3,4 & 5CSS
Basics of Cascading Style Sheets
W3C CSS Validator<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" /></a>
</p> HTML
output
• jigsaw.w3.org/css-validator/
• checks your CSS to make sure it meets the official CSS specifications
• more picky than the web browser, which may render malformed CSS correctly
Cascading Style Sheets (CSS): <link><head>
...
<link href="filename" type="text/css" rel="stylesheet" />
...
</head> HTML
• CSS describes the appearance and layout of information on a web page (as
opposed to HTML, which describes the content of the page)
• can be embedded in HTML or placed into separate .css file (preferred)
Basic CSS rule syntaxselector {
property: value;
property: value;
...
property: value;
}
• a CSS file consists of one or more rules
• a rule's selector specifies HTML element(s) and applies
style properties
• a selector of * selects all elements
p {
font-family: sans-serif;
color: red;
}
CSS properties for colorsp {
color: red;
background-color: yellow;
} CSS
This paragraph uses the style above.
Property Description
color color of an element’s text
background-color color that will appear behind the element
output
Specifying colorsp { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; } CSS
This paragraph uses the first style above.This h2 uses the second style above.This h4 uses the third style above. output
• color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), yellow
• RGB codes: red, green, and blue values from 0 (none) to 255 (full)• hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)
CSS properties for fonts
property description
font-family which font will be used
font-size how large the letters will be drawn
font-style used to enable/disable italic style
font-weight used to enable/disable bold style
Complete list of font properties
font-family
• enclose multi-word font names in quotes
p {
font-family: Georgia;
}
h2 {
font-family: "Courier New";
} CSS
This paragraph uses the first style above.This h2 uses the second style above. output
More about font-family
• can specify multiple fonts from highest to lowest priority
• generic font names:
serif, sans-serif, cursive, fantasy, monospace
p {
font-family: Garamond, "Times New Roman", serif;
} CSS
This paragraph uses the above style. output
font-size
• units: pixels (px) vs. point (pt) vs. m-size (em)
16px, 16pt, 1.16em
• vague font sizes: xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger• percentage font sizes, e.g.: 90%, 120%
p {
font-size: 14pt;
} CSS
This paragraph uses the style above. output
font-weight, font-style
• either of the above can be set to normal to turn them off (e.g. headings)
p {
font-weight: bold;
font-style: italic;
} CSS
This paragraph uses the style above. output
Grouping styles
• A style can select multiple elements separated by commas
• The individual elements can also have their own styles
p, h1, h2 {
color: green;
}
h2 {
background-color: yellow;
} CSS
This paragraph uses the above style.
output
This h2 uses the above styles.
CSS comments: /* ... *//* This is a comment.
It can span many lines in the CSS file. */
p {
color: red;
background-color: aqua;
} CSS
• CSS (like HTML) is usually not commented as much as code such as Java
• the // single-line comment style is NOT supported in CSS
• the <!-- ... --> HTML comment style is also NOT supported in CSS
CSS properties for text
property description
text-align alignment of text within its element
text-decoration decorations such as underlining
line-height,
word-spacing,
letter-spacing
gaps between the various portions of the text
text-indent indents the first letter of each paragraph
Complete list of text properties (http://www.w3schools.com/css/css_reference.asp#text)
text-alignblockquote { text-align: justify; }
h2 { text-align: center; } CSS
The Emperor's Quote
[TO LUKE SKYWALKER] The alliance... will die. As will your friends. Good, I can feel your anger. Iam unarmed. Take your weapon. Strike me down with all of your hatred and your journeytowards the dark side will be complete. output
• can be left, right, center, or justify (which widens all full lines of the element so that they occupy its entire width)
Text-decoration
p {
text-decoration: underline;
} CSS
This paragraph uses the style above.output
•can also be overline, line-through, blink, or none
•effects can be combined:
text-decoration: overline underline;
text-shadowp {
font-weight: bold;
text-shadow: 2px 2px gray;
} CSS
• shadow is specified as an X-offset, a Y-offset, and an optional color
The list-style-type propertyol { list-style-type: lower-roman; }
CSS
Possible values:
i. none : No marker
ii. disc (default), circle, square
iii. Decimal: 1, 2, 3, etc.
iv. decimal-leading-zero: 01, 02, 03, etc.
v. lower-roman: i, ii, iii, iv, v, etc.
vi. upper-roman: I, II, III, IV, V, etc.
vii. lower-alpha: a, b, c, d, e, etc.
viii. upper-alpha: A, B, C, D, E, etc.
x. lower-greek: alpha, beta, gamma, etc.
others: hebrew, armenian, georgian, cjk-ideographic, hiragana…
Embedding style sheets: <style> (BAD!)
• CSS code can be embedded within the head of an HTML page
• this is bad style; DO NOT DO THIS (why?)
<head>
<style type="text/css">
p { font-family: sans-serif; color: red; }
h2 { background-color: yellow; }
</style>
</head>
HTML
Inline styles: the style attribute (BAD!)
• higher precedence than embedded or linked styles
• used for one-time overrides and styling a particular element
• this is bad style; DO NOT DO THIS (why?)
<p style="font-family: sans-serif; color: red;">
This is a paragraph</p>
HTML
This is a paragraphoutput
Content vs. presentation• HTML is for content; what is on the page (heading; list; code; etc.)
• CSS is for presentation; how to display the page (bold; centered;
20px margin; etc.)
• keeping content separate from presentation is a very important web
design principle
• If the HTML contains no styles, its entire appearance can be changed
by swapping .css files
• see also: CSS Zen Garden
Styles that conflictp, h1, h2 { color: blue; font-style: italic; }
h2 { color: red; background-color: yellow; }
CSS
This paragraph uses the first style above.
output
• when two styles set conflicting values for the same property, the latter style takes precedence
This heading uses both styles above.
Cascading style sheets
• It's called Cascading Style Sheets because the properties of an
element cascade together in this order:
• browser's default styles (reference)
• external style sheet files (in a <link> tag)
• internal style sheets (in a <style> tag in the page header)
• inline style (the style attribute of an HTML element)
Inheriting styles (explanation)body { font-family: sans-serif; background-color: yellow; }
p { color: red; background-color: aqua; }
a { text-decoration: underline; }
h2 { font-weight: bold; text-align: center; } CSS
This is a heading
• A bulleted list output
• when multiple styles apply to an element, they are inherited
• a more tightly matching rule can override a more general inherited rule
• not all properties are inherited (notice link's color above)
A styled paragraph. Previous slides are available on the website.
CSS properties for backgroundsproperty description
background-color color to fill background
background-image image to place in background
background-position placement of bg image within element
background-repeat whether/how bg image should be repeated
background-attachment whether bg image scrolls with page
background shorthand to set all background properties
background-imagebody {
background-image: url("images/draft.jpg");
}
CSS
• background image/color fills the element's content area
background-repeatbody {
background-image: url("images/draft.jpg");
background-repeat: repeat-x;
} CSS
• can be repeat (default), repeat-x, repeat-y, or no-repeat
background-positionbody {
background-image: url("images/draft.jpg");
background-repeat: no-repeat;
background-position: 370px 20px;
} CSS
• value consists of two tokens, each of which can be top, left, right, bottom, center, a percentage, or a length value in px, pt, etc.
• value can be negative to shift left/up by a given amount
Page Sections and the CSS Box Model
Motivation for page sections• want to be able to style
individual elements, groups of elements, sections of text or of the page
• (later) want to create complex page layouts
The HTML id attribute<p>Spatula City! Spatula City!</p>
<p id="mission">Our mission is to provide the most
spectacular spatulas and splurge on our specials until our
customers <q>esplode</q> with splendor!</p> HTML
Spatula City! Spatula City!
Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers “esplode” with splendor! output
• allows you to give a unique ID to any element on a page
• each ID must be unique; can only be used once in the page
Linking to sections of a web page<p>Visit <a href=
"http://www.textpad.com/download/index.html#downloads">
textpad.com</a> to get the TextPad editor.</p>
<p><a href="#mission">View our Mission Statement</a></p> HTML
Visit textpad.com to get the TextPad editor.
View our Mission Statement output
•a link target can include an ID at the end, preceded by a #
•browser will load that page and scroll to element with given ID
CSS ID selectors#mission {
font-style: italic;
font-family: "Garamond", "Century Gothic", serif;
} CSS
Spatula City! Spatula City!
Our mission is to provide the most spectacular spatulas and splurge on our specials until our
customers ”esplode” with splendor! output
•applies style only to the paragraph that has the ID of mission
•element can be specified explicitly: p#mission {
The HTML class attribute<p class="shout">Spatula City! Spatula City!</p>
<p class="special">See our spectacular spatula specials!</p>
<p class="special">Today only: satisfaction guaranteed.</p> HTML
Spatula City! Spatula City!
See our spectacular spatula specials!
Today only: satisfaction guaranteed. output
•classes are a way to group some elements and give a style to only that group(“I don't want ALL paragraphs to be yellow, just these three...”)
•unlike an id, a class can be reused as much as you like on the page
CSS class selectors.special { /* any element with class="special" */
font-weight: bold;
}
p.shout { /* only p elements with class="shout" */
color: red;
font-family: cursive;
} CSS
Spatula City! Spatula City!
See our spectacular spatula specials!
Today only: satisfaction guaranteed. output
• applies rule to any element with class special, or a p with class shout
Multiple classes<h2 class="shout">Spatula City! Spatula City!</h2>
<p class="special">See our spectacular spatula specials!</p>
<p class="special shout">Satisfaction guaranteed.</p>
<p class="shout">We'll beat any advertised price!</p>
Spatula City! Spatula City!
We'll beat any advertised price!
See our spectacular spatula specials!
Satisfaction guaranteed.
• an element can be a member of multiple classes (separated by spaces)
CSS for following examples.special {
background-color: yellow;
font-weight: bold;
}
.shout {
color: red;
font-family: cursive;
} CSS
• for the next several slides, assume that the above CSS rules are defined
Sections of a page: <div>a section or division of your HTML page (block)
<div class="shout">
<h2>Spatula City! Spatula City!</h2>
<p class="special">See our spectacular spatula specials!</p>
<p>We'll beat any advertised price!</p>
</div> HTML
Spatula City! Spatula City!
We'll beat any advertised price! output
See our spectacular spatula specials!
• a tag used to indicate a logical section or area of a page
• has no appearance by default, but you can apply styles to it
Inline sections: <span>an inline element used purely as a range for applying styles
<h2>Spatula City! Spatula City!</h2>
<p>See our <span class="special">spectacular</span> spatula
specials!</p>
<p>We'll beat <span class="shout">any advertised price</span>!</p> HTML
Spatula City! Spatula City!See our spatula specials!
We'll beat any advertised price! output
spectacular
• has no onscreen appearance, but you can apply a style or ID to it, which will be applied to the text inside the span
CSS context selectorsselector1 selector2 {
properties
} CSS
•applies the given properties to selector2 only if it is inside a selector1 on the page
selector1 > selector2 {
properties
} CSS
• applies the given properties to selector2 only if it is directly inside a selector1 on the page (selector2 tag is immediately inside selector1 with no tags in between)
Context selector example<p>Shop at <strong>Hardwick's Hardware</strong>...</p>
<ul>
<li>The <strong>best</strong> prices in town!</li>
<li>Act while supplies last!</li>
</ul> HTML
li strong { text-decoration: underline; } CSS
Shop at Hardwick's Hardware...
• The best prices in town!
• Act while supplies last! ouput
More complex example<div id="ad">
<p>Shop at <strong>Hardwick's Hardware</strong>...</p>
<ul>
<li class="important">The <strong>best</strong> prices!</li>
<li>Act <strong>while supplies last!</strong></li>
</ul>
</div> HTML
#ad li.important strong { text-decoration: underline; } CSS
Shop at Hardwick's Hardware...
•The best prices!
•Act while supplies last! output
The CSS Box Model• for layout purposes, every element is composed of:
◦ the actual element's content
◦ a border around the element
◦ padding between the content and the border (inside)
◦ a margin between the border and other content (outside)
• width = content width + L/R padding + L/R border + L/R marginheight = content height + T/B padding + T/B border + T/B margin
◦ IE6 doesn't do this right
Document flow - block and inline elements
CSS properties for bordersh2 { border: 5px solid red; } CSS
This is a heading. output
property description
border thickness/style/color of border on all 4 sides
• thickness (specified in px, pt, em, or thin, medium, thick)
• style (none, hidden, dotted, dashed, double, groove, inset, outset, ridge, solid)
• color (specified as seen previously for text and background colors)
More border properties
property description
border-color, border-width,border-style
specific properties of border on all 4 sides
border-bottom, border-left,border-right, border-top
all properties of border on a particular side
border-bottom-color, border-bottom-style,border-bottom-width, border-left-color,border-left-style, border-left-width,border-right-color, border-right-style,border-right-width, border-top-color,border-top-style, border-top-width
properties of border on a particular side
Complete list of border properties
Border example 2h2 {
border-left: thick dotted #CC0088;
border-bottom-color: rgb(0, 128, 128);
border-bottom-style: double;
} CSS
This is a heading. output
• each side's border properties can be set individually
• if you omit some properties, they receive default values (e.g. border-bottom-width above)
Rounded corners with border-radiusp {
border: 3px solid blue;
border-radius: 12px;
padding: 0.5em;
} CSS
This is a paragraph.
This is another paragraph.
It spans multiple lines.output
• each side's border radius can be set individually, separated by spaces
CSS properties for padding
property description
padding padding on all 4 sides
padding-bottom padding on bottom side only
padding-left padding on left side only
padding-right padding on right side only
padding-top padding on top side only
Complete list of padding properties
Padding example 1p { padding: 20px; border: 3px solid black; }
h2 { padding: 0px; background-color: yellow; } CSS
This is the first paragraph
This is the second paragraph
This is a heading
Padding example 2p {
padding-left: 200px; padding-top: 30px;
background-color: fuchsia;
} CSS
This is the first paragraph
This is the second paragraph
• each side's padding can be set individually
• notice that padding shares the background color of the element
CSS properties for margins
property description
margin margin on all 4 sides
margin-bottom margin on bottom side only
margin-left margin on left side only
margin-right margin on right side only
margin-top margin on top side only
Complete list of margin properties
Margin example 1p {
margin: 50px;
background-color: fuchsia;
} CSS
This is the first paragraph
This is the second paragraph
• notice that margins are always transparent(they don't contain the element's background color, etc.)
Margin example 2p {
margin-left: 8em;
background-color: fuchsia;
} CSS
output
This is the first paragraph
This is the second paragraph
• each side's margin can be set individually
CSS properties for dimensionsp { width: 350px; background-color: yellow; }
h2 { width: 50%; background-color: aqua; } CSS
output
This paragraph uses the first
style above
An h2 heading
property description
width, height how wide or tall to make this element(block elements only)
max-width, max-height,min-width, min-height
max/min size of this element in given dimension
Centering a block element: auto marginsp {
margin-left: auto;
margin-right: auto;
width: 750px;
} CSS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. output
• to center inline elements within a block element, usetext-align: center;
• works best if width is set (otherwise, may occupy entire width of page)
Floating and Positioning
The CSS float propertyproperty description
float side to hover on; can be left, right, or none (default)
•a floating element is removed from normal document flow
•underlying text wraps around it as necessary
Float example<img src="images/koala.jpg" alt="Koala" class="headericon" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.... HTML
img.headericon {
float: left;
} CSS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque purus
ut dui mollis, sed malesuada leo pretium. Morbi bibendum mi at lacus rutrum
convallis. Duis id eros dolor. In id eros blandit lectus viverra facilisis at commodo
velit. Cras pretium nunc id nisl elementum, at interdum odio blandit. Donec luctus
rutrum iaculis. Praesent luctus ante et cursus suscipit. Nullam congue egestas lorem
nec luctus. Donec tincidunt tortor mi, nec ultricies orci bibendum a. Aliquam viverra metus nec
ligula varius feugiat. In lacinia ligula accumsan tortor porttitor ornare. Donec interdum mattis
purus sit amet ultrices. output
Floating content and width
•often floating elements should have a width property value•if no width is specified, other content may be unable to wrap around the floating element
I am not floating, no width set
I am floating right, no width set
I am floating right, no width set, but my text is very long so this paragraph doesn't really seem like it's floating at all, darn
I am not floating, 45% width I am floating right, 45% width
The clear propertyp { background-color: fuchsia; }
h2 { clear: right; background-color: cyan; } CSS
XKCD a webcomic of romance, sarcasm, math, and language...
My XKCD Fan Site
property description
clear disallows floating elements from overlapping this element;can be left, right, both, or none (default)
Clear diagramdiv#sidebar { float: right; }
p { clear: right; } CSS
Common error: container too short<p><img src="images/xkcd.png" alt="the man in the hat" />
XKCD a webcomic of romance, sarcasm,
math, and language...</p> HTML
p { border: 2px dashed black; }
img { float: right; } CSS
XKCD a webcomic of romance, sarcasm, math, and language...
• We want the p containing the image to extend downward so that its border encloses the entire image
The overflow propertyp { border: 2px dashed black; overflow: hidden; } CSS
XKCD a webcomic of romance, sarcasm, math, and language...
property description
overflow specifies what to do if an element's content is too large;can be auto, visible, hidden, or scroll
Multi-column layouts<div>
<p>the first paragraph</p>
<p>the second paragraph</p>
<p>the third paragraph</p>
Some other text that is important
</div> HTML
p { float: right; width: 20%; margin: 0.5em;
border: 2px solid black; }
div { border: 3px dotted green; overflow: hidden; } CSS
Some other text that is importantthe third paragraph the second
paragraph
the first paragraph
The position propertydiv#ad {
position: fixed;
right: 10%;
top: 45%;
} CSS
property value description
position static default position
relative offset from its normal static position
absolute a fixed position within its containing element
fixed a fixed position within the browser window
top, bottom,left, right
positions of box's corners
Here I am!
Absolute positioning#menubar {
position: absolute;
left: 400px;
top: 50px;
} CSS
• removed from normal flow (like floating ones)• positioned relative to the block element
containing them (assuming that block also uses absolute or relative positioning)
• actual position determined by top, bottom, left, right values
• should often specify a width property as well
Relative positioning#area2 { position: relative; } CSS
• absolute-positioned elements are normally positioned at an offset from the corner of the overall web page
• to instead cause the absolute element to position itself relative to some other element's corner, wrap the absolute element in an element whose position is relative
Fixed positioning
• removed from normal flow (like floating ones)
• positioned relative to the browser window
◦ even when the user scrolls the window, element will remain in the same place
Alignment vs. float vs. position1. if possible, lay out an element by aligning its content
• horizontal alignment: text-align• set this on a block element; it aligns the content within it (not the block element itself)
• vertical alignment: vertical-align• set this on an inline element, and it aligns it vertically within its containing element
2. if alignment won't work, try floating the element3. if floating won't work, try positioning the element
• absolute/fixed positioning are a last resort and should not be overused
The vertical-align propertyproperty description
vertical-align specifies where an inline element should be aligned vertically, with respect to other content on the same line within its block element's box
• can be top, middle, bottom, baseline (default), sub, super, text-top, text-bottom, or a length value or %
• baseline means aligned with bottom of non-hanging letters
vertical-align example<p style="background-color: yellow;">
<span style="vertical-align: top; border: 1px solid red;">
Don't be sad! Turn that frown
<img src="images/sad.jpg" alt="sad" /> upside down!
<img style="vertical-align: bottom" src="images/smiley.jpg" alt="smile" />
Smiling burns calories, you know.
<img style="vertical-align: middle" src="images/puppy.jpg" alt="puppy" />
Anyway, look at this cute puppy; isn't he adorable! So cheer up,
and have a nice day. The End.
</span></p>
Don't be sad! Turn that frown upside down! Smiling burns calories, you know.
Anyway, look at this cute puppy; isn't he adorable! So cheer up, and have a nice day. The
Common bug: space under image<p style="background-color: red; padding: 0px; margin: 0px">
<img src="images/smiley.png" alt="smile" />
</p> HTML
output
• red space under the image, despite padding and margin of 0• this is because the image is vertically aligned to the baseline of the paragraph (not
the same as the bottom)• setting vertical-align to bottom fixes the problem (so does setting line-
height to 0px)
Details about inline boxes• size properties (width, height, min-width, etc.) are ignored for inline boxes
• margin-top and margin-bottom are ignored, but margin-left and margin-right are not
• the containing block box's text-align property controls horizontal position of inline boxes within it
• text-align does not align block boxes within the page
• each inline box's vertical-align property aligns it vertically within its block box
The display propertyh2 { display: inline; background-color: yellow; } CSS
This is another headingThis is a heading output
property description
display sets the type of CSS box model an element is displayed with
• values: none, inline, block, run-in, compact, ...
• use sparingly, because it can radically alter the page layout
Displaying block elements as inline<ul id="topmenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul> HTML
#topmenu li {
display: inline;
border: 2px solid gray;
margin-right: 1em;
} CSS
• lists and other block elements can be displayed inline• flow left-to-right on same line• width is determined by content (block elements are 100% of page width)
Item 1 Item 2 Item 3 output
The visibility propertyp.secret {
visibility: hidden;
} CSS
output
property description
visibility sets whether an element should be shown onscreen;can be visible (default) or hidden
• hidden elements will still take up space onscreen, but will not be shown• to make it not take up any space, set display to none instead
• can be used to show/hide dynamic HTML content on the page in response to events
The opacity propertybody { background-image: url("images/marty-mcfly.jpg");
background-repeat: repeat; }
p { background-color: yellow; margin: 0; padding: 0.25em; }
p.mcfly1 { opacity: 0.75; }
p.mcfly2 { opacity: 0.50; }
p.mcfly3 { opacity: 0.25; } CSS
property description
opacity how not-transparent the element is; value ranges from 1.0 (opaque) to 0.0 (transparent)
box-shadowbox-shadow: h-shadow v-shadow blur; CSS
box-shadow: 10px 10px 5px; CSS
https://courses.cs.washington.edu/courses/cse154/
Credits
