Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, Victoria Kirst and Roy McElmurry IV. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.
p { width: 350px; background-color: yellow; } h2 { width: 50%; background-color: aqua; }
This paragraph uses the first style above.
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 |
auto
marginsp { margin-left: auto; margin-right: auto; width: 750px; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
width
is set (otherwise, may occupy entire width of page)
text-align: center;
float
property
(reference)
property | description |
---|---|
float
|
side to hover on; can be left , right , or none (default)
|
<img src="images/borat.jpg" alt="Borat" class="headericon" /> Borat Sagdiyev (born July 30, 1972) is a ...
img.headericon { float: left; }
div
s from being aligned to floated...
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
width
property value
width
is specified, other content may be unable to wrap around the floating elementclear
property
p { background-color: fuchsia; } h2 { clear: right; background-color: yellow; }
Homestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with ...
property | description |
---|---|
clear
|
disallows floating elements from overlapping this element; can be left , right , both , or none (default)
|
div#sidebar { float: right; } p { clear: right; }
<p><img src="images/homestar_runner.png" alt="homestar runner" /> Homestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with ....</p>
p { border: 2px dashed black; } img { float: right; }
p
containing the image to extend downward so that its border encloses the entire image
overflow
property
p { border: 2px dashed black; overflow: hidden; }
Homestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with ....
property | description |
---|---|
overflow
|
specifies what to do if an element's content is too large; can be auto , visible , hidden , or scroll
|
<div> <p>the first paragraph</p> <p>the second paragraph</p> <p>the third paragraph</p> Some other text that is important </div>
p { float: right; width: 20%; margin: 0.5em; border: 2px solid black; } div { border: 3px dotted green; overflow: hidden; }
Let's try to make this course webpage mockup look as close to the real thing as we can.
position
property
(examples)
div#ad { position: fixed; right: 10%; top: 45%; }
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 |
#menubar { position: absolute; left: 400px; top: 50px; }
absolute
or relative
positioning)top
, bottom
, left
, right
valueswidth
property as well#area2 { position: relative; }
absolute
element in an element whose position
is relative
text-align
vertical-align
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 |
top
, middle
, bottom
, baseline
(default), sub
, super
, text-top
, text-bottom
, or a length value or %
baseline
means aligned with bottom of non-hanging lettersvertical-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>
<p style="background-color: red; padding: 0px; margin: 0px"> <img src="images/smiley.png" alt="smile" /> </p>
padding
and margin
of 0vertical-align
to bottom
fixes the problem (so does setting line-height
to 0px
)width
, height
, min-width
, etc.) are ignored for inline boxesmargin-top
and margin-bottom
are ignored, but margin-left
and margin-right
are nottext-align
property controls horizontal position of inline boxes within it
vertical-align
property aligns it vertically within its block box
display
property
h2 { display: inline; background-color: yellow; }
property | description |
---|---|
display
|
sets the type of CSS box model an element is displayed with |
none
, inline
, block
, run-in
, compact
, ...<ul id="topmenu"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
#topmenu li { display: inline; border: 2px solid gray; margin-right: 1em; }
We will develop on this beer blog page.
visibility
propertyp.secret { visibility: hidden; }
Since nobody can see this anyway: ca-ca poo-poo pee-pee!!!
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
display
to none
insteadopacity
property
body { 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; }
Marty McFly in 1985
Marty McFly in 1955 fading away, stage 1
Marty McFly in 1955 fading away, stage 2
Marty McFly in 1955 fading away, stage 3
property | description |
---|---|
opacity
|
how not-transparent the element is; value ranges from 1.0 (opaque) to 0.0 (transparent) |