Irrera Studio Arts Web School
Teaching adults basic Web site design with HTML & CSS using Dreamweaver
CSS style writing short cuts:
Margin / Padding properties Specific
•
writing each seperately: top, right, bottom, left
{margin-top: 25px;} or {padding-top:25px;}
{margin-right: 50px;} or {padding-right:50px;}
{margin-bottom: 75px;} or {padding-bottom:75px;}
{margin-left: 100px;} or {padding-left:75px;}
Margin / Padding shortcuts
4 values {margin:50px 75px 100px 75px;}
◦ top margin is 50px
◦ right margin is 75px
◦ bottom margin is 100px
◦ left margin is 75px
3 values {margin:25px 50px 75px;}
◦ top margin is 25px
◦ right and left margins are 50px
◦ bottom margin is 75px
3 values {margin:50px 25px;}
◦ top and bottom margins are 50px
◦ right and left margins are 25px
1 value {margin:25px;}
◦ all four margins are 25px
Border Properties Specific
(all four sides)
•
width, style, color writing each seperately
◦ border-width: (possible values:thin, medium, thick, or a specific value like 15px)
◦ border-style: (possible values:none, dotted, dashed, solid, groove, ridge, double, outset , inset, none, hidden)
◦ border-color: (possible values: the color name or the color hex number or RGB values)
Border Properties
(specific sides)
• width, style, color for just one side (must have style for border to show)
{border-top-width:25px;}
{border-top-style:solid;}
{border-top-color:red;}
Border Properties
(shortcut)
• width, style, color on one line
{border:thin solid red;}
{border-right:thick dotted blue;}
{ border-left:medium dashed #666666;}
You can have a different style, color, or width on each side in which case all the shortcutsfor the other 4 sided properties apply. For instance:
{border-style:dashed dotted groove solid;} will put a different style 1px border on each side starting at the top and going clockwise.
{border-style:dotted solid;} would put a dotted border on the top and bottom and a solid border on the left and right.
W3schools overview on borders is very clear...
Other shorcuts for other properties come in handy (google 'CSS shortcuts').
For example:
Use: {background:url(image.jpg) black right bottom no-repeat;}
instead of:
background-image:url(image.jpg);
background-color:black;
background-position: right bottom;
background-repeat:no-repeat;