Scribd
Upload
2 views

css

The document provides an overview of various CSS properties related to background colors, images, borders, margins, and padding. It explains how to set background colors using color names, HEX, and RGB values, and details the use of opacity and background images. Additionally, it covers border styles, margin and padding properties for controlling spacing around elements.

Uploaded by

Ligaya Orozco Bautista-Gonzales
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

css

The document provides an overview of various CSS properties related to background colors, images, borders, margins, and padding. It explains how to set background colors using color names, HEX, and RGB values, and details the use of opacity and background images. Additionally, it covers border styles, margin and padding properties for controlling spacing around elements.

Uploaded by

Ligaya Orozco Bautista-Gonzales
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

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;
}

You might also like