Except where otherwise noted, the contents of this presentation are © Copyright 2008 Marty Stepp and Jessica Miller and are licensed under the Creative Commons Attribution 2.5 License.
h2 { border: 5px solid red; }
border
: all properties of border on all 4 sidespx
, pt
, em
, or one of the following general widths: thin
, medium
, thick
)none
,
hidden
,
dotted
,
dashed
,
double
,
groove
,
inset
,
outset
,
ridge
,
solid
border-color
, border-width
, border-style
: specific properties of border on all 4 sidesborder-bottom
,
border-left
,
border-right
,
border-top
:
all properties of border on a particular sideborder-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
:
specific properties of border on a particular sideh2 { border-left: thick dotted #CC0088; border-bottom-color: rgb(0, 128, 128); border-bottom-style: double; }
border-bottom-width
above)padding
: padding on all 4 sidespadding-bottom
: padding on bottom side onlypadding-left
: padding on left side onlypadding-right
: padding on right side onlypadding-top
: padding on top side onlyp { padding: 20px; border: 3px solid black; } h2 { padding: 0px; background-color: yellow; }
This is the first paragraph
This is the second paragraph
p { padding-left: 200px; padding-top: 30px; background-color: fuchsia; }
This is the first paragraph
This is the second paragraph
margin
: margin on all 4 sidesmargin-bottom
: margin on bottom side onlymargin-left
: margin on left side onlymargin-right
: margin on right side onlymargin-top
: margin on top side onlyp { margin: 70px; background-color: fuchsia; }
This is the first paragraph
This is the second paragraph
p { margin-left: 200px; background-color: fuchsia; }
This is the first paragraph
This is the second paragraph
p { width: 400px; background-color: yellow; } h2 { width: 50%; background-color: aqua; }
This paragraph uses the first style above.
width
, height
: how wide or tall to make this elementmax-width
,
max-height
,
min-width
,
min-height
: the maximum or minimum size of this element in the given dimensionauto
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 text-align: center;
instead
float
and clear
propertiesfloat
property (reference)img.headericon { float: right; width: 130px; }
Borat Sagdiyev (born July 30, 1972) is a fictional Kazakhstani journalist played by British-Jewish comedian Sacha Baron Cohen. He is the main character portrayed in the controversial and successful film Borat: Cultural Learnings of America for Make Benefit Glorious Nation of Kazakhstan. Borat ...
float
can be left
, right
, or none
(default)float
bug: missing widthI am not floating, no width
I am floating right, no width
I am not floating, 45% width
I am floating right, 45% width
width
property value
width
is specified, the floating element may occupy 100% of the page width, so no content can wrap around itIt was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to heaven, we were all going direct the other way - in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.
Result: | Interaction Pane: |
---|---|
clear
propertyp { background-color: fuchsia; } h2 { clear: right; background-color: yellow; }
Homestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with references to 1980s and 1990s pop culture, notably video games, classic television and popular music.
clear
can be left
, right
, both
, or none
(default)div#sidebar { float: right; } div#footer { clear: right; }
"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)
At W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.
W3Schools - The Largest Web Developers Site On The Net!
div
elements should float
, and how?