Web Design 101 - Northern Illinois University
Download
Report
Transcript Web Design 101 - Northern Illinois University
Style Sheets
copyright Penny McIntire, 2013
Style Sheets
• Cascading Style Sheets: an addition to
HTML (wc3 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.
2
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.
3
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!
4
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
<head>, 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…
5
copyright Penny McIntire, 2013
Local Styles
• A local style is embedded as an attribute of
an HTML tag (as you have already seen):
<body>
<h1 style = “color:#ff0000; text-transform:capitalize;”>
This is my header
</h1>
...
Local styles
<P style = “…”>
This is my paragraph
Syntax:
</p>
<body>
“property:value; ...” 6
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.
7
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 won’t look at each attribute
individually –- just an overview…
8
copyright Penny McIntire, 2013
CSS Properties
• Background properties:
– background-color, background-image,
background-repeat (repeat-x, repeat-y, norepeat), background-attachment (fixed, scroll
[default]), background-position (%, top,
center, bottom, right [horizontal position
first]), etc.
9
copyright Penny McIntire, 2013
CSS Properties
– Example:
<body style="background-color:#ff0000;
background-image: url(‘myimage.gif’);
background-attachment: fixed;
background-position: top left;
background-repeat: repeat-x; ">
10
copyright Penny McIntire, 2013
CSS Properties
• Many properties, including background,
allow shorthand for multiple attributes.
Example:
<table style="background: #ff0000
url(‘myimage.gif’) fixed; ">
11
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 can’t get a style to work in shorthand
mode, break it up into its individual properties,
in which case defaults will work.
12
copyright Penny McIntire, 2013
CSS Properties
• Color property, for foreground
elements. Example:
<h1 style="color:#ff0000;">
13
copyright Penny McIntire, 2013
CSS Properties
• Font and text properties:
– font (allows shorthand), font-family, fontsize (em, px, %, xx-small, etc.), font-style
(italic, normal), font-weight (normal, bold),
color, letter-spacing, text-align, textdecoration, text-height, text-indent, texttransform (capitalize/lowercase/uppercase),
line-height, vertical-align, word-spacing.
– Example of shorthand:
style="font: Verdana 1.5em italic;"
14
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.), bordertop-style, …, border-width, border-topwidth,… border-collapse (will show only
one border if two borders are adjacent).
15
copyright Penny McIntire, 2013
CSS Properties
– Note: on border, must specify color, width,
and style, or border won’t be visible:
style="border: 1px #999999 solid;"
16
copyright Penny McIntire, 2013
CSS Properties
– Padding: padding, padding-top, paddingright, …
– Margins: margin, margin-top, margin-right,
…
• To center the entire page on the window:
– Put a <div> wrapper around the entire page.
– Set the style for the <div> something like this:
width: 750px;
margin-left: auto;
margin-right: auto;
17
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-leftradius, 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)
18
copyright Penny McIntire, 2013
CSS Properties
– CSS3 box properties (iffy)
• background-origin and background-clip (contentbox, 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: …
19
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).
20
copyright Penny McIntire, 2013
CSS Properties
– CSS3 box properties (iffy):
• box-shadow, text-shadow: Example:
box-shadow: inset 5px 0.5em 6px 2px
#00ffff;
Shadow color.
Optional; default
Horizontal offset,
is outset.
vertical offset,
blur radius,
spread distance.
21
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;
22
copyright Penny McIntire, 2013
CSS Properties
• List properties:
– list-style (allows shorthand), list-styleimage (with URL), list-style-type:
• list-style-type for <ul>: circle, disc, square,
none.
• list-style-type for <ol>: decimal, decimalleading-zero, lower-roman, upper-roman,
lower-alpha, upper-alpha, etc.
23
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.
24
copyright Penny McIntire, 2013
CSS Properties
• display and visibility:
– display:inline used on <li>s to convert a
vertical unordered list to a horizontal list, &
list-style-type: none on <ul> 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.
25
copyright Penny McIntire, 2013
CSS Properties
• No true align, although there is textalign and vertical-align.
• Notice that there are lots of properties
here that cannot be controlled through
HTML alone.
26
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 let’s look at global styles next…
27
copyright Penny McIntire, 2013
Global Styles
• A global style sheet provides a global
definition that applies to the entire
document.
• For this, we use <style> as a tag in the
<head>, rather than as an attribute of
a tag.
28
copyright Penny McIntire, 2013
Global Styles
• For instance, if you define what an <a>
tag looks like (size, color, underline,
etc.) in the global style sheet in the
<head>, then you don’t have to put
those attributes on all the <a> tags
that are down in the <body>.
• Putting the style sheet within the
<head> guarantees that the styles are
loaded before any of the referenced
tags load.
29
copyright Penny McIntire, 2013
Global Styles
• To define a global style sheet…
<head …>
<style type = “text/css” >
…rule (i.e., definition)
…rule
Required
…rule
…
</style>
One rule per tag, sorta.
</head>
30
copyright Penny McIntire, 2013
Global Styles
• Example:
<style type = “text/css”>
h1
{color : #ff0000; font-size : 16px;}
h2
{color : #0000ff; font-size : 14px;}
a
{color : #ff6666;}
a:hover {color : #ff0000;
text-decoration : underline;}
table
{background : #ffff00;
border : 0 ; width : 750px;}
</style>
Five rules here.
31
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.
– Let’s look at the selectors first...
32
copyright Penny McIntire, 2013
Global Styles
• Example:
<style type = “text/css”>
h1
{color : #ff0000; font-size : 16px;}
h2
{color : #0000ff; font-size : 14px;}
a
{color : #ff6666;}
a:hover {color : #ff0000;
text-decoration : underline;}
table
{background : #ffff00;
border : 0; width : 750px;}
</style>
Selectors
33
copyright Penny McIntire, 2013
Global Styles
• For the moment, we will use only predefined HTML tag names (h1, h2, p,
table, a, etc.) as selectors.
• We will look at establishing custom
selectors later.
• No <...> on the selectors.
34
copyright Penny McIntire, 2013
Global Styles
• Now, let’s look at properties:
<style type = “text/css”>
h1
{color : #ff0000; font-size : 16px;}
h2
{color : #0000ff; font-size : 14px;}
a
{color : #ff6666;}
a:hover {color : #ff0000;
text-decoration : underline;}
table
{background : #ffff00;
border : 0; width : 750px;}
</style>
properties inside { } ...
35
copyright Penny McIntire, 2013
Global Styles
• Properties have a different syntax than a
typical HTML tag…
h1 {color : #ff0000; font-size : 16px;}
Curly
braces
Colon instead
of equals sign
No quotes on
the value
Separate multiple
properties with semicolons.
36
copyright Penny McIntire, 2013
Global Styles
• May use a single rule to declare several
HTML elements…
h1, h2
{color:#ff0000; font-size:16px;}
37
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 isn’t cluttered with attributes.
38
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
39
copyright Penny McIntire, 2013
Class Selector
• Class selector: an identifier for a class
of tags in a document , like <h1> or
<p>.
• The examples I have shown you so far
used class selectors based on HTML
tags.
40
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 <p> in the
document, unless the style is
overridden elsewhere in the document.
41
copyright Penny McIntire, 2013
Class Selector
• Pseudo-class selectors (that is, using
standard modifiers for the class), most
specifically for <a> tags:
– a applies to all links, unless overridden.
– a:link has not yet been visited (often omitted)
– a:visited has been visited within recent browser
history.
– a:hover the cursor is on top of it.
– a:active is being clicked on by the user.
– In the order above. Why?...
42
copyright Penny McIntire, 2013
Class Selector
– Later rules override earlier rules. If you put
a:visited after a:hover, a:hover will
never work again after the link has been
visited.
– So, review order:
• a:
• a:link has not yet been visited (often omitted)
• a:visited has been visited within recent
browser history
• a:hover the cursor is on top of it
43
• a:active is being clicked on by the user
copyright Penny McIntire, 2013
Class Selector
– Other useful pseudo-classes, for classes
other than <a>, too.
• :focus particularly useful for forms
• :first
44
copyright Penny McIntire, 2013
Class Selector
• What if you want some (but not all)
<p> to be indented in from the left
margin?
• You can’t just use the <p> tag on the
style, because then it would apply to all
paragraphs.
• So, you must create a new class that
can be used as a subset of <p> tags.
45
copyright Penny McIntire, 2013
Class Selector
• Use the tag, followed by a period and a
name of your own choosing...
p.indent {margin-left:5em;}
HTML tag –
here, <p>
period
Name we have
chosen to identify
this style
46
copyright Penny McIntire, 2013
Class Selector
• Then, in the HTML, use the class
attribute in <p> tags to find the
selected paragraphs to the new class:
<p class = “indent”>
… paragraph text…
</p>
Your chosen name, no
period preceding it.
47
copyright Penny McIntire, 2013
Class Selector
• To reiterate… Together, this says apply
the “indent” class:
p.indent {margin-left:5em;}
Only to <p>, not to any
other tags.
Only to those <p> that
specify the class =
“indent” attribute.
48
copyright Penny McIntire, 2013
Class Selector
• Choosing a name for the selector:
– It must consist of a letter first, followed by
letters, numbers, or underscores.
– Case sensitive.
49
copyright Penny McIntire, 2013
Class Selector
• For this last example, the only attribute
that indent changed was the indented
margin, so all other <p> attributes
remain unchanged.
– That is, if text was defined elsewhere (say
in the body tag) as being red, it will still be
red for the indent areas, because we
haven’t overridden that with a different
text color.
50
copyright Penny McIntire, 2013
Class Selector
• What if you want a class that can apply
to any tag, not just <p> tags?
• Same idea, but don’t precede with the
p:
p.indent {margin-left:5em;}
giving...
.indent {margin-left:5em;}
This will now work on any tag (h1, p, li, etc.)
that specifies class = “indent”.
51
copyright Penny McIntire, 2013
Class Selector
• What we have just defined is a freerange class rule: a style sheet rule that
is not limited to a single HTML tag type.
52
copyright Penny McIntire, 2013
Contextual Selector
• Class selectors allow specification of a
two-level hierarchy: named class within
specified tag.
• But what if we want to specify more
finely?
– I.e., emphasized text within indented text
(indentPar) within <p>?
53
copyright Penny McIntire, 2013
Contextual Selector
• Contextual selector: assigns a style to
an element contained within a hierarchy
of other HTML elements.
p.indent em {color:red}
– This states that whenever emphasized text
(em) is encountered… within an indented
area (.indent)… within a paragraph tag
(p)…, the emphasized text will be red.
54
copyright Penny McIntire, 2013
Contextual Selector
– Emphasized text outside of paragraph tags
named as indent are not affected.
– Be careful about making these contextual
selectors too complicated, and be aware
that the order in which you specify them is
important.
• If the contextual selector isn't working, break it
up into individual class selectors.
55
copyright Penny McIntire, 2013
ID Selector
• ID Selector: a way to make sure that a
style applies to only a single tag in an
entire document .
56
copyright Penny McIntire, 2013
ID Selector
• In the style rule, again create a selector
name, but preface it with # instead of a
period:
#myChosenName {margin-left:5em;}
• In the HTML tag, use the attribute id =
“myChosenName”
<p id = “myChosenName”>;
… paragraph text…
</p>
57
copyright Penny McIntire, 2013
ID Selector
• The id = and the # say that this will be
used the first time it is specified in the
document and will be ignored if it is
specified again after that.
• To help you remember the difference
between class = and id = , remember
that a class is usually multiple items,
while an id is usually for only a single
item.
58
copyright Penny McIntire, 2013
External Style Sheets
• To recap, the intro said there were three
ways to use styles:
– Local – within a single tag.
– Global – embedded within the <head> and
applies to the entire document.
– External – the styles are embedded in an
external .css file.
• We have looked at the first two ways
already; now we will look at External.
59
copyright Penny McIntire, 2013
External Style Sheets
• External style sheets allow you to define
most formatting decisions in a single file
that can then be linked to one or more
web pages.
60
copyright Penny McIntire, 2013
External Style Sheets
• Advantages of linking to an external
file:
– Formatting (CSS) is now separated from
the structure and content (HTML) of
pages.
• Specifying a first level header <h1>, for
instance, is a structural decision.
• Specifying what it looks like – font, size, color –
is a formatting decision.
• Separating structure from format means you
can easily change the format without changing
the structure.
61
copyright Penny McIntire, 2013
External Style Sheets
– Creating a site is much faster if all pages
are based upon a single style sheet, or
variations thereof.
• Enter the formatting information once, then
simply link all the pages to the style sheet.
– Maintaining a site is also much easier.
• Make a change to the style sheet, and all pages
linked to the style sheet are immediately
updated.
62
copyright Penny McIntire, 2013
External Style Sheets
– All pages linked to a single style sheet are
consistent in look and feel, without the
programmers having to remember all the
various formatting specifications.
63
copyright Penny McIntire, 2013
External Style Sheets
• Create an external style sheet with a
text editor like EditPad or TopStyle or
within Dreamweaver, and save with a
.css extension.
• An external style sheet looks just like a
global style sheet except that if consists
of only the rules, not the <style> tag.
64
copyright Penny McIntire, 2013
External Style Sheets
• So, if the global style sheet in a
<head> would look like this...
<style type = “text/css”>
h1 {color:#ff0000; font-size:16px;}
h2 {color:#0000ff; font-size:14px;}
</style>
the external style sheet would contain...
h1 {color:#ff0000; font-size:16px;}
h2 {color:#0000ff; font-size:14px;}
65
copyright Penny McIntire, 2013
External Style Sheets
• Two ways to bring in an external style
sheet:
– link
– @import
66
copyright Penny McIntire, 2013
External Style Sheets
• link – embedded within the <head>.
<link rel = “stylesheet”
type = “text/css”
href = “filename.css”>
• Can have multiple <link> statements in
a document.
67
copyright Penny McIntire, 2013
External Style Sheets
• Unfortunately, the style sheet rules are
not viewable with “view source” in the
browser if you use <link>.
– 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.
68
copyright Penny McIntire, 2013
External Style Sheets
• @import – used within the <style> tag
in the <head>.
– 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
69
vague).
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.
70
copyright Penny McIntire, 2013
External Style Sheets
• www.csszengarden.com – amazing!
• One of several clever ways to use CSS
instead of JavaScript to make a rollover
button:
http://www.elated.com/articles/css-rolloverbuttons/
71
copyright Penny McIntire, 2013
Browser Considerations
• Can put the CSS rules within HTML
comment symbols, so that brain-dead
browsers ignore them (I don't use):
<style type = “text/css”>
<!-h1 {color:#ff0000; font-size:16pt}
h2 {color:#0000ff; font-size:14pt}
// -->
More on why this works when
</style>
72
we look at JavaScript.
copyright Penny McIntire, 2013
Containment
• The idea of containment is important
for CSS.
• Beginning and ending tags establish
containment in HTML.
• You must be even more careful about
remembering end tags when using style
sheets.
73
copyright Penny McIntire, 2013
Containment
• Let’s look at how containment works in
a document…
74
copyright Penny McIntire, 2013
Document
Head
Body
h1 Heading
Paragraph 1
Paragraph 2
Paragraph 3
Link
Containment
• Styles can inherit from styles assigned
to elements higher in the element
containment hierarchy, as long as:
– The inheritor and the inheritee have
attributes in common.
– There is nothing to override that
inheritance.
• So, let’s look at that containment
hierarchy again, this time as a
hierarchical chart…
76
copyright Penny McIntire, 2013
Containment
html
– head
– title
– body
– h1
–p
–p
–p
–a
<h1>, <p>, and
<a> inherit from
<body>
<a> also inherits
from <p>
77
copyright Penny McIntire, 2013
Containment
• So, descendants/children inherit styles
from their ancestors/parents.
• Thus, if you assign red as the text color
for the body, all headers and paragraph
text and text in tables will be red unless
you override that assignment.
78
copyright Penny McIntire, 2013
Containment
• Style sheets can be used to define
formatting for containers that are
boxes: borders, margins (the space
block and the border), and padding
between the edges of the space (the
space between the border and the text)
for the box.
79
copyright Penny McIntire, 2013
Box top
Box for a block-level element
Box margin space (transparent)
left
Border (opaque)
Padding space (transparent)
content
Containment
• Can set the margin, padding, and
border to 0, which means they don’t
take up any space on the page.
• A good idea to always set margin and
padding, rather than letting the browser
use defaults, since you’ll get different
defaults in different browsers.
81
copyright Penny McIntire, 2013
Containment
• Box size:
– In some browsers, increasing the size of
the margin, border, or padding around the
content maintains content size by
increasing the size of the box.
– In other browsers, increasing the size of
the margin, border, or padding around the
content maintains box size but decreases
the size of the content.
– Moral of story: test in different browsers! 82
copyright Penny McIntire, 2013
Containment
• It is the box that gets positioned,
though, on the page, using the upper
left corner of the box.
• Can nest boxes within boxes, for unique
effects.
83
copyright Penny McIntire, 2013
Containment
• Now that we have looked at containers,
we can move on to…
84
copyright Penny McIntire, 2013
Cascading Preference Rules
• As noted, a given tag in an HTML
document could have several style rules
applied to it, applied from:
– One or more external style sheet files.
– One or more <style> tags in the <head>
– a style attribute within an HTML tag.
– HTML attributes within the tag.
• These rules have the potential of
conflicting with one another.
85
copyright Penny McIntire, 2013
Cascading Preference Rules
• A hierarchy must be established so that
the browser knows which of these
definitions has takes precedence over
the others – cascading rules.
• Hence, Cascading (hierarchical) Style
Sheets.
86
copyright Penny McIntire, 2013
Cascading Preference Rules
• A simplified summary of determining
precedence: a rule has more
precedence if it more specifically targets
that given element.
87
copyright Penny McIntire, 2013
Cascading Preference Rules
• Lowest precedence (least specific) to
highest precedence (most specific):
1. Default attributes determined by the
browser.
2. Style rule from an external style sheet.
3. <style> rule within a global style sheet.
4. style attribute within the container.
5. style attribute within an HTML tag.
6. HTML attributes in the tag.
88
copyright Penny McIntire, 2013
Cascading Preference Rules
• Determining precedence is actually
more complex than these rules imply,
but this simplification will resolve 99.9%
of the conflicts.
• Also note that box properties (margins,
padding, borders, etc.) are not usually
inherited.
89
copyright Penny McIntire, 2013
CSS for Different Media
• To avoid having a separate page formatted
for printing:
– Use different CSS rules for different media (has
been cross-browser stable for a number of years).
– Examples:
<link rel=stylesheet type=“text/css”
href=“myPrint.css” media=“print” />
<link rel=stylesheet type=“text/css”
href=“myDisplay.css” media=“screen” />
• Alternately, can use @media in a single
file – I don't use this, but perfectly
acceptable.
90
copyright Penny McIntire, 2013
CSS for Different Media
• More details on separate CSS for different
media…
– http://www.meyerweb.com/eric/articles/web
rev/200001.html
– http://www.webdesignschoolreview.com/cssprinting.html
91
copyright Penny McIntire, 2013
CSS for Different Media
• CSS3 takes this a step further, with
advanced media queries for things like
screen resolution:
– IE9, recent years of Firefox, Safari, Opera,
and virtually all mobile devices.
• Example:
media="screen and (min-width: 401px)
and (max-width: 600px)"
92
copyright Penny McIntire, 2013
CSS for Different Media
• Complicated… See
http://www.adobe.com/devnet/dreamwe
aver/articles/introducing-mediaqueries.html
• Or, let Dreamweaver help with media
queries:
– New > File > Fluid Grid Layout (set up an
empty file and look at the CSS)
– Modify > Media Queries > …
93
copyright Penny McIntire, 2013
CSS for Different Media
• Or, use jQuery to check the screen size:
http://css-tricks.com/resolution-specificstylesheets/ (scroll down to the jQuery
heading – but seems to be missing the
code here for testing screen resolution)
• Regardless of method, window width is
tested if the window is resized, so you
can test the CSS on your desktop system
by downsizing the window.
94
copyright Penny McIntire, 2013
Odds and Ends
• To avoid page bobble from left to right,
because some pages have a right-hand
scroll bar and some don't:
html {overflow-y:scroll;}
• To reset all margins and styles, so that
no defaults turn up:
http://meyerweb.com/eric/tools/css/reset/
95
copyright Penny McIntire, 2013
Dynamic
Positioning
copyright Penny McIntire, 2013
Dynamic Positioning
• CSS-Positioning, or CSS-P, is primarily
concerned with where content appears
on the page.
• It allows positioning an object at a
specific location within a container.
97
copyright Penny McIntire, 2013
Dynamic Positioning
• CSS-P was initially a separate standard,
but the latest standards incorporate it
into CSS.
98
copyright Penny McIntire, 2013
Dynamic Positioning
• Layer: similar to layers in cartoon
animation, whereby the background is one
layer and the animations that move over
the top are other layers.
– Note that the term “layer” is confusing; it has
has a specific use in the old Navigator,
another use in Dreamweaver, Photoshop, etc.
• These layers are transparent, can move
dynamically, and can overlap.
• Layers give a 2-D screen a 3rd dimension.99
copyright Penny McIntire, 2013
Browser window
a layer
Each airplane could
be a separate layer
that appears and is
then hidden.
Dynamic Positioning
• An object must be in a container
(something with start and end tags) in
order to be positionable.
• This is when we might wrap an object
like an image in a <div>...</div> tag,
just so that it is in a container.
• Positioning an object depends upon its
context; that is, the container it is in
and what has been displayed just
before this object.
103
copyright Penny McIntire, 2013
Dynamic Positioning
• Positioning of objects can be absolute
or relative. A simplified view, for the
moment:
– Absolute positioning places an object an
exact number pixels (x,y coordinates) from
the upper left corner of the object’s
container.
– Relative positioning places an object an
exact number of pixels from the where it
would have displayed without positioning. 104
copyright Penny McIntire, 2013
Background container
absolute positioning
relative to top left of
background container.
Relative positioning to
previous layer.
Dynamic Positioning
• Now, let’s look in more depth at the two
types of dynamic positioning …
106
copyright Penny McIntire, 2013
Absolute Positioning
• Absolute positioning: setting the precise
location of an element within the
coordinate system of the next
outermost container.
107
copyright Penny McIntire, 2013
Absolute Positioning
• An absolute-positioned element exists
in its own transparent layer and is
isolated from the flow of content that
surrounds it.
– That means the content that follows the
absolute-positioned object moves in to fill
the vacated space.
108
copyright Penny McIntire, 2013
Absolute Positioning
• Original:
Four score and seven years ago,
Three layers
Container
109
copyright Penny McIntire, 2013
Absolute Positioning
• Absolute positioning on the layer that contains
“seven” to move it down and to the right:
Four score and years ago,
seven
Container
110
copyright Penny McIntire, 2013
Absolute Positioning
• To reiterate:
– The position is calculated from the upper
left corner of the container.
– An absolute-positioned element is isolated
from the flow of content that surrounds it;
that is, the content “cinches up” to fill the
vacated space unless you give it directions
to do otherwise.
111
copyright Penny McIntire, 2013
Absolute Positioning
– In other words, it doesn’t matter at all
where in the HTML you put the absolutely
positioned layer, as long as it’s in the
proper container.
112
copyright Penny McIntire, 2013
Absolute Positioning
Four score and years ago,
seven
113
copyright Penny McIntire, 2013
Relative Positioning
• Relative positioning: setting the precise
location of an element from the location
where the element would normally
appear (based on where it occurs in the
HTML) if it were not positioned.
• The space originally designated for the
element is preserved so that
surrounding content does not cinch up
around the vacated space.
114
copyright Penny McIntire, 2013
Relative Positioning
• Relative positioning on “seven” to move
it down and to the right:
Four score and
years ago,
seven
Container
115
copyright Penny McIntire, 2013
Relative Positioning
• To reiterate, the starting point is where
the item would have been otherwise,
and space left vacant is not filled by the
content that follows.
• So, it is important where it occurs in the
HTML.
116
copyright Penny McIntire, 2013
Using Dynamic Positioning
• Use <span> and <div> to establish
containers if the appropriate container
isn’t already present.
• Objects can be nested infinitely…
Four score and years ago,
sevn
e
117
copyright Penny McIntire, 2013
Using Dynamic Positioning
• To use positioning, set up a rule that uses the
position attribute:
<style type = "text/css”>
#positionThis {position:absolute;
left:20px; top:15px;}
</style>
Or “relative”
• Then, use id=“positionThis” in the tag for the
element you want positioned.
• Positions the element 20 pixels from the left
and 15 pixels from the top of the container.
118
copyright Penny McIntire, 2013
Using Dynamic Positioning
• You could also use an HTML style:
<h1 style="position:absolute; left:20px; top:15px;">
Hello!
</h1>
This is a reasonable thing to do, rather
than put it in a style sheet, because it is
something that usually relates to only a
single tag.
119
copyright Penny McIntire, 2013
Using Dynamic Positioning
• Attributes to go along with the position
attribute:
– left, top: where to position the element.
– width, height: the size of the element’s
content.
• Remember that margins, borders, and padding
may be added to that size, depending on
browser.
• We have been working mainly with pixels so
far, but you can also specify ems.
120
copyright Penny McIntire, 2013
Using Dynamic Positioning
– clip: defines the shape and dimension of
the viewable area of the element, so that
you can use only parts of the element.
• But this increases download time...
– z-index: the stacking order of the
elements; i.e., which one will be on top.
• “z” stands for the third dimension.
• a higher z-index value means the item is closer
to the front/viewer.
• Most useful when working with scripts for
121
animation, dragging, or resizing.
copyright Penny McIntire, 2013
Using Dynamic Positioning
• Critical “gotcha”: to use absolute positioning,
you must place the positioned item within
another positioned element, even if
somewhat faked:
<div style="position:relative;">
<div style="position:absolute; …">…</div>
</div>
• Note that the outermost <div> is technically
positioned, but it still displays where it would
have displayed anyway.
122
copyright Penny McIntire, 2013
Using Dynamic Positioning
• If you want text to flow around an
image, or div’s to be on the same line
when there’s room in the browser
window, you could use the float
property instead of position.
<div style=“float:left;”>…</div>
<div style=“float:left;”>…</div>
results in side by side if room, second
one below the first if not.
123
copyright Penny McIntire, 2013
Debugging Style Sheets
• Don’t nest anything unnecessarily;
<table> inside of <table> inside of
<table> is guaranteed to cause CSS
problems.
• Whenever possible, use pixel or em
values rather than other measurements.
124
copyright Penny McIntire, 2013
Debugging Style Sheets
• If an external style is not working:
– Try putting it in a global style in the <head>
to see if that fixes it.
– If it doesn't, try putting it in a local style
within the HTML tag.
– In other words, keep moving it closer to the
tag to see if the problem goes away.
125
copyright Penny McIntire, 2013
Debugging Style Sheets
• If a rule doesn't work, try deleting all
properties but one.
– Then keep swapping in a different
property, one property at a time, to see if
you can get any property to work in the
style.
– If at least one of the properties works, then
you know the style is working but some of
the properties are not.
– If nothing works, then it is most probably
the style itself that is the problem.
126
copyright Penny McIntire, 2013
Debugging Style Sheets
• Test in IE first, then Firefox, because IE
is quirkier, and that’s where I will be
grading your CSS assignment.
• However, for your individual and group
web sites, everything must either work
in both IE and Firefox, or at least
degrade gracefully.
127
copyright Penny McIntire, 2013
Debugging Style Sheets
• Tables easier to debug than divs.
• Avoid absolute positioning whenever
possible.
– It is very useful in certain cases, like
displaying drop down menus on a page,
when there is really no other good way to
do it.
– But it can also be a bear to debug.
– For instance, don't use A.P. to lay out a
page when tables or relative positioning
128
will do the job more dependably.
copyright Penny McIntire, 2013
Debugging Style Sheets
• Use TopStyle (free download of
TopStyle Lite at www.bradbury.com, or from
my public directory) or Dreamweaver to edit
your css file when debugging, even if you
didn't use it to create the original CSS file.
– Pull the file into TopStyle, delete the line of
problematic code, and then try to recreate it in
TopStyle. (Be sure to choose your target browser
from the drop-down list on the top right first.) If the
commands you want to use are not available on
the list, that means they won't work in your target
129
browser.
copyright Penny McIntire, 2013
Debugging Style Sheets
• Quote from old edition of Dynamic
HTML, still true, “The simpler you make
your design, the more likely it is you’ll
succeed in making it look the same on
both browsers.”
130
copyright Penny McIntire, 2013
References
• www.csszengarden.com Gorgeous site.
Multiple versions of the same site,
submitted by different artist/designers.
Content and HTML is the same for
every version – only the CSS changes.
Amazing and inspiring site!
• http://net.tutsplus.com/tutorials/htmlcss-techniques/9-most-common-iebugs-and-how-to-fix-them/ Article on
the 9 most common IE CSS bugs.
131
copyright Penny McIntire, 2013
References
• CSS validator http://jigsaw.w3.org/css-
validator
• Reference list of which CSS3 properties
work in various browsers
http://caniuse.com/#cats=CSS
• Eric Meyer on CSS, by Eric Meyer.
Examples -- not a reference book.
– www.meyerweb.com
132
copyright Penny McIntire, 2013
References
• Working with the pre-fab CSS layouts in
Dreamweaver CS5:
http://www.adobe.com/newsletters/edge/aug
ust2010/articles/article5/index.html?trackingi
d=HRTDM
133
copyright Penny McIntire, 2013