2 copyright Penny McIntire, 2013 Style Sheets Cascading Style
Sheets: an addition to HTML (wc 3 standard) for controlling
presentation of a document, including color, typography, alignment,
etc. Essentially templates for a web site (like in Word, for
instance), used to set up formats for tags in an HTML
document.
Slide 4
3 copyright Penny McIntire, 2013 Style Sheets Style sheets are
used to define the appearance and some interactivity for a web
page. They can give more control over formatting than HTML alone.
They were implemented in version 4 of both Navigator and IE, though
not consistently.
Slide 5
4 copyright Penny McIntire, 2013 Style Sheets CSS3: the latest
standard, which includes many new features, many of which are not
supported in all browsers, particularly older ones. Many such
features in this lecture, indicated as such. TEST!
Slide 6
5 copyright Penny McIntire, 2013 Style Sheets Three types of
styles: Local/inline embedded within a single tag and applies to
only that tag. Global/embedded embedded within the, applies to the
entire document. External a separate.css file which is used by one
or more HTML documents. We will look at these three types, in
greater depth
Slide 7
6 copyright Penny McIntire, 2013 Local Styles A local style is
embedded as an attribute of an HTML tag (as you have already seen):
This is my header... This is my paragraph Local styles Syntax:
property:value;...
Slide 8
7 copyright Penny McIntire, 2013 CSS Properties Each different
HTML tag has a specific set of properties that it can use. Others
are pretty universal, like color, which can apply to darn near any
visible item.
Slide 9
8 copyright Penny McIntire, 2013 CSS Properties Most common CSS
units of measure: Pixels: width="750px" (no space in between). Ems:
width="1.5em" (150% of M size in default font). Percent:
width="150%". We wont look at each attribute individually - just an
overview
Slide 10
9 copyright Penny McIntire, 2013 CSS Properties Background
properties: background-color, background-image, background-repeat
(repeat-x, repeat-y, no- repeat), background-attachment (fixed,
scroll [default]), background-position (%, top, center, bottom,
right [horizontal position first]), etc.
11 copyright Penny McIntire, 2013 CSS Properties Many
properties, including background, allow shorthand for multiple
attributes. Example:
Slide 13
12 copyright Penny McIntire, 2013 CSS Properties Quirks note:
if you leave out any property on a shorthand style like the example
above, that property is treated as if you put in none, which can
effectively negate any default properties. If you cant get a style
to work in shorthand mode, break it up into its individual
properties, in which case defaults will work.
Slide 14
13 copyright Penny McIntire, 2013 CSS Properties Color
property, for foreground elements. Example:
Slide 15
14 copyright Penny McIntire, 2013 CSS Properties Font and text
properties: font (allows shorthand), font-family, font- size (em,
px, %, xx-small, etc.), font-style (italic, normal), font-weight
(normal, bold), color, letter-spacing, text-align, text-
decoration, text-height, text-indent, text- transform
(capitalize/lowercase/uppercase), line-height, vertical-align,
word-spacing. Example of shorthand: style="font: Verdana 1.5em
italic;"
Slide 16
15 copyright Penny McIntire, 2013 CSS Properties Box properties
(not usually inherited): Borders: border (allows shorthand),
border-top, border-right, border-bottom, border-left, border-color,
border-top-color, border-right-color, , border-style (solid, ridge,
dotted, outset, inset, etc.), border- top-style, , border-width,
border-top- width, border-collapse (will show only one border if
two borders are adjacent).
Slide 17
16 copyright Penny McIntire, 2013 CSS Properties Note: on
border, must specify color, width, and style, or border wont be
visible: style="border: 1px #999999 solid;"
Slide 18
17 copyright Penny McIntire, 2013 CSS Properties Padding:
padding, padding-top, padding- right, Margins: margin, margin-top,
margin-right, To center the entire page on the window: Put a
wrapper around the entire page. Set the style for the something
like this: width: 750px; margin-left: auto; margin-right:
auto;
Slide 19
18 copyright Penny McIntire, 2013 CSS Properties CSS3 box
properties (iffy) border-radius (all four corners in one or top
left clockwise to bottom left), border-bottom-left- radius,
border-top-left-radius, etc. For cross-brower compatibility, use
something like this code, in this order (degrades gracefully):
border: 3px solid #666666; -webkit-border-radius: 15px;
-moz-border-radius: 15px; border-radius: 15px; (eventually, just
this one)
Slide 20
19 copyright Penny McIntire, 2013 CSS Properties CSS3 box
properties (iffy) background-origin and background-clip (content-
box, padding-box, border-box) gives the ability to have transparent
padding between edge of box and background image. background-clip
requires: -webkit-background-clip:. background-clip:
Slide 21
20 copyright Penny McIntire, 2013 CSS Properties CSS3 box
properties (iffy) background-size (% or px height and width, auto,
contain (scales to fill container vertically, aspect ratio intact),
cover (scales to fill container horizontally, aspect ratio
intact).
22 copyright Penny McIntire, 2013 CSS Properties CSS3 box
properties (iffy): linear-gradient, radial-gradient. Provide two
color codes: Example: linear-gradient: #ffffff #ff0000; opacity.
Provide numeric values between 0/transparent and 1/opaque).
Inherited and can cause unexpected effects when using positioning.
Example: opacity: 0.8;
Slide 24
23 copyright Penny McIntire, 2013 CSS Properties List
properties: list-style (allows shorthand), list-style- image (with
URL), list-style-type: list-style-type for : circle, disc, square,
none. list-style-type for : decimal, decimal- leading-zero,
lower-roman, upper-roman, lower-alpha, upper-alpha, etc.
Slide 25
24 copyright Penny McIntire, 2013 CSS Properties height and
width properties: height and width as you would expect, using px,
ems, or %. CSS3: max-height, min-height, max-width, min-width: in
pixels or %. Not supported the same way by all browser versions
look up the rules and test thoroughly.
Slide 26
25 copyright Penny McIntire, 2013 CSS Properties display and
visibility: display:inline used on s to convert a vertical
unordered list to a horizontal list, & list-style-type: none on
to remove bullets. Mainly for horizontal menus. display: none Item
is hidden and surrounding content cinches up to occupy its space.
visibility: none Reserves the space but hides it from view.
Slide 27
26 copyright Penny McIntire, 2013 CSS Properties No true align,
although there is text- align and vertical-align. Notice that there
are lots of properties here that cannot be controlled through HTML
alone.
Slide 28
27 copyright Penny McIntire, 2013 Local Styles Local styles
have a downside: style attributes are scattered throughout the
document, defeating the main benefit of styles: being able to
define a style once for an entire document, or even multiple
documents. So lets look at global styles next
Slide 29
28 copyright Penny McIntire, 2013 Global Styles A global style
sheet provides a global definition that applies to the entire
document. For this, we use as a tag in the, rather than as an
attribute of a tag.
Slide 30
29 copyright Penny McIntire, 2013 Global Styles For instance,
if you define what an tag looks like (size, color, underline, etc.)
in the global style sheet in the, then you dont have to put those
attributes on all the tags that are down in the. Putting the style
sheet within the guarantees that the styles are loaded before any
of the referenced tags load.
Slide 31
30 copyright Penny McIntire, 2013 Global Styles To define a
global style sheet rule (i.e., definition) rule Required One rule
per tag, sorta.
32 copyright Penny McIntire, 2013 Global Styles Each style
sheet rule consists of: The tag name (or named group of tags),
called a selector, which binds the rule to specific HTML tags. One
or more style properties that apply to the selector. Lets look at
the selectors first...
34 copyright Penny McIntire, 2013 Global Styles For the moment,
we will use only pre- defined HTML tag names (h1, h2, p, table, a,
etc.) as selectors. We will look at establishing custom selectors
later. No on the selectors.
37 copyright Penny McIntire, 2013 Global Styles May use a
single rule to declare several HTML elements h1, h2 {color:#ff0000;
font-size:16px;}
Slide 39
38 copyright Penny McIntire, 2013 Global Styles Advantages of
global styles More efficient than setting up these parameters
manually throughout the entire document. Maintaining the site is
easier: making a change to one style in the global style sheet
changes the look of all of the connected tags in the document. The
HTML is cleaner and easier to read because it isnt cluttered with
attributes.
Slide 40
39 copyright Penny McIntire, 2013 Selectors As noted earlier,
the selector defines the parts of the HTML document that are
governed by the style rule. There are actually three ways to
identify selectors: Class selector Contextual selector id
selector
Slide 41
40 copyright Penny McIntire, 2013 Class Selector Class
selector: an identifier for a class of tags in a document, like or.
The examples I have shown you so far used class selectors based on
HTML tags.
Slide 42
41 copyright Penny McIntire, 2013 Class Selector Simply set up
a style declaration in the style sheet, using the HTML tag name as
the selector. p {color:#ff0000; font-size:12px;} This will now
apply to every in the document, unless the style is overridden
elsewhere in the document.
67 copyright Penny McIntire, 2013 External Style Sheets link
embedded within the. Can have multiple statements in a
document.
Slide 69
68 copyright Penny McIntire, 2013 External Style Sheets
Unfortunately, the style sheet rules are not viewable with view
source in the browser if you use. To view external style sheets,
click View Source, get the name of the CSS file from the link tag,
enter its name in the browser window, and hit Enter.
Slide 70
69 copyright Penny McIntire, 2013 External Style Sheets @import
used within the tag in the. actually copies the style definitions
into the HTML file, rather than just linking to the external file.
The rules are accessible through View Source. Not supported by
older browsers and may still give unpredictable results (W3C
vague).
Slide 71
70 copyright Penny McIntire, 2013 External Style Sheets
Regardless of which method is used, when the external.css file is
loaded into the browser, it functions as if it were typed within
the HTML code.
Slide 72
71 copyright Penny McIntire, 2013 External Style Sheets
www.csszengarden.com amazing!www.csszengarden.com One of several
clever ways to use CSS instead of JavaScript to make a rollover
button: http://www.elated.com/articles/css-rollover- buttons/
