Web design - CSS properties




This page has CSS property examples that you can copy and add to your website.

You might find it useful to have TextEdit or NotePad open and AND this page open in a browser tab so you can switch between them.

 

Name Tag syntax / e.g. Description
CSS link <link href="styles.css" rel="stylesheet" type="text/css" /> Links a CSS file to an HTML page
Properties
Font-family body {
font-family: "Arial", sans-serif;
}

body {
font-family: "Times New Roman", Georgia, Serif;
}
 
Font size h1 {
font-size: 42px;
}
 
Font colour h1 {
font-color: #639;
}
 
Font weight h1 {
font-weight: normal;
}

h1 {
font-weight: bold;
}
 
Font style h1 {
font-style: normal;
}

h1 {
font-style: italic;
}
 
Text transform p {
text-transform: uppercase;
}

p {
text-transform: lowercase;
}

p {
text-transform: capitalize;
}
 
Line height p {
line-height: 14px;
}
 
padding (all) padding: 10px;
Can be applied to div boxes, images, text etc. This syntax will add padding to top, bottom, left and right
padding (individual) padding-top: 10px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 40px;
Can be applied to div boxes, images, text etc. This syntax will add different amounts of padding to top, bottom, left and right
Background colour background-color: #FC0;
Can be added to div boxes, text etc
Background image background-image: url(flowers.gif);
background-repeat: no-repeat;
Can be applied to almost any html element. If the html element is bigger than the image, the image will repeat to fill it unless stopped (no-repeat).

See our tutorial on creating a background image for a whole browser window
z-index z-index: 3; Controls layer order. Higher numbers are on top. Can be applied to almost any html element
border (all) border: 2px;
Will affect all borders (left, right, top, bottom). Can be applied to div boxes, images, text etc
border (individual) border-top: 10px;
padding-right: 5px;
padding-bottom: 15px;
padding-left: 40px;
Can be applied to div boxes, images, text etc
border colour (all) border-color: #639;

border-left-color:#639;
 
border colour (indvidual) border-left-color:#639;
 
border style border-style: solid;

border-style: dotted;

border-style: dashed;

border-style: double;
 
Link a {
color: #639;
text-decoration: none;
}
Styles all states (link, active, hover, visted) for a site
Link #navigation a {
color: #639;
text-decoration: none;
}
Styles all link states (link, active, hover, visted) inside a div titled "navigation". All links in other div boxes are NOT affected.
Link hover a:hover {
color: #639;
text-decoration: none;
}
Styles the mouse-over hover state only
Link visited a:visited {
color: #639;
text-decoration: none;
}
Styles the visted state only
Rounded corners images img {
border-radius: 10px;
}
Will add rounded corners to all images on a site
Rounded corners on Div's #navigation {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
Will only add rounded corners to the top of a navigation div box
Drop shadows on Div's #box {
box-shadow: 10px 10px 5px 0px #888;
}
Property values are .. 1. horizontal offset 2. vertical offset 3. blur radius 4. color
Dop shadows on text h1 {
text-shadow: 5px 5px 5px #FFCC00;
}
Property values are .. 1. horizontal offset 2. vertical offset 3. blur radius 4. color
Opacity #box1 {
opacity:0.5;
filter: alpha(opacity=50);
}
Can be applied to div tags, text, images etc
     
Transforms
Rotate #box1 {
-webkit-transform: rotate(+10deg);
}
 
Scale #box1 {
-webkit-transform: scale(.5);
}
 
Skew #box1 {
-webkit-transform: skew(-40deg, 10deg);
}
 
  #box1 {
-webkit-transform: rotate(+10deg);
}
 
Transitions
Change opacity over time #box1 {
opacity:1.0;
transition: opacity .5s;
}

#box1 {
opacity:0.2;
}
 
Change size over time #box1 {
width: 300px;
transition: width .5s;
}

#box1:hover {
width:600px;
}