Cascading Style
Sheets (CSS)
CSS background-color
The background-color property specifies the
background color of an element.
Example:
body {
background-color: lightblue;
}
CSS background-color
With CSS, a color is most often specified by:
a valid color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p{
background-color: yellow;
}
Opacity / Transparency
The opacity property specifies the
opacity/transparency of an element. It can take a
value from 0.0 - 1.0. The lower value, the more
transparent:
Opacity / Transparency
div {
background-color: green;
opacity: 0.3;
}
Opacity / Transparency
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}
CSS background-image
The background-image property specifies an image to use as the
background of an element.
By default, the image is repeated so it covers the entire element.
Example:
body {
background-image: url("paper.gif");
}
CSS background-repeat
By default, the background-image property repeats an image
both horizontally and vertically.
Some images should be repeated only horizontally or vertically, or
they will look strange
Example:
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
CSS background-repeat: no-repeat
Showing the background image only once is also specified by the
background-repeat property:
Example:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
CSS background-position
The background-position property is used to specify the position
of the background image.
Example:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
CSS background-attachment
The background-attachment property specifies whether the
background image should scroll or be fixed (will not scroll with
the rest of the page)
Example:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
CSS Borders
The CSS border properties allow you to specify the style, width,
and color of an element's border.
CSS Borders
The following values are allowed:
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on
the border-color value
none - Defines no border
hidden - Defines a hidden border
CSS Borders
The following values are allowed:
ridge - Defines a 3D ridged border. The effect depends on the
border-color value
inset - Defines a 3D inset border. The effect depends on the
border-color value
outset - Defines a 3D outset border. The effect depends on
the border-color value
CSS Margins
The CSS margin properties are used to create space around
elements, outside of any defined borders.
With CSS, you have full control over the margins. There are
properties for setting the margin for each side of an element (top,
right, bottom, and left).
CSS Margins
CSS has properties for specifying the margin for each side of an
element:
margin-top
margin-right
margin-bottom
margin-left
CSS Padding
Padding is used to create space around an element's content,
inside of any defined borders.
CSS Padding
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an
element:
padding-top
padding-right
padding-bottom
padding-left
CSS Padding
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
