Scribd
Upload
19 views

CSS Background

Uploaded by

Mudit Rajput
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
19 views

CSS Background

Uploaded by

Mudit Rajput
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

CSS STYLES

CSS Background
Background Color Background Image

body {
body {
background-color: lightblue;
background-image: url("img_tree.png");
}
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
With CSS, a color is most often body {
specified by: background: #ffffff
a valid color name - like "red" url("img_tree.png") no-repeat
right top;
a HEX value - like "#ff0000" }
an RGB value - like "rgb(255,0,0)"
CSS Border
The CSS border properties allow you to specify the style, width, and
color of an element's border

The following values are allowed:


•dotted - Defines a dotted border
•dashed - Defines a dashed border
•solid - Defines a solid border
•double - Defies a double border
•groove - Defines a 3D grooved border.
• The effect depends on the border-color value
•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
•none - Defines no border
•hidden - Defines a hidden border
CSS Border
The CSS border properties allow you to specify the style, width, and
color of an element's border

p.dotted {border-style: dotted;}


p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
CSS Border
border: 5px solid red; Rounded Borders

p{ p{
border-left: 6px solid red; border: 2px solid red;
background-color: lightgrey; border-radius: 5px;
} }

p{ p{
border-bottom: 6px solid red; border-style: solid;
background-color: lightgrey; border-left-width: 15px;
} }
CSS Border
p.one {
border-style: solid;
border-color: #0000ff;
}

p.two {
border-style: solid;
border-color: #ff0000 #0000ff;
}

p.three {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}

p.four {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff
rgb(250,0,255);
}
CSS Margin
The CSS margin properties are used to generate space around
elements.

The margin properties set the size of the white space outside
the border.
With CSS, you have full control over the margins. There are
CSS properties for setting the margin for each side of an element
(top, right, bottom, and left).

CSS has properties for specifying the margin for each side of an
element:
•margin-top
•margin-right
•margin-bottom
•margin-left
CSS Margin
All the margin properties can have the following values:
auto - the browser calculates the margin

length - specifies a margin in px, pt, cm, etc.

% - specifies a margin in % of the width of the containing element


inherit - specifies that the margin should be inherited from the parent
elemen

p{ p{
margin-top: 100px; margin: 100px 150px 100px 80px;
margin-bottom: 100px; }
margin-right: 150px; div {
margin-left: 80px; width: 300px;
} margin: auto;
border: 1px solid red;
CSS LINK
Styling Links
Links can be styled with any CSS property (e.g. color, font-
family, background, etc.).

•a:link - a normal, unvisited link

•a:visited - a link the user has visited

•a:hover - a link when the user mouses over it

•a:active - a link the moment it is clicked


CSS LINK
a:link {
color: red;
} When setting the style for
several link states, there
/* visited link */ are some order rules:
a:visited {
color: green; a:hover MUST come after
} a:link and a:visited

/* mouse over link */


a:hover { a:active MUST come after
color: hotpink; a:hover
}

/* selected link */
a:active {
color: blue;
}
CSS LINK
Text Decoration The property is mostly used to remove
underlines from links:

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}
CSS LINK
Background property can be used to specify a background
color for links:

a:link {
background-color: yellow;
}

a:visited {
background-color: cyan;
}

a:hover {
background-color: lightgreen;
}

a:active {
background-color: hotpink;
}
CSS LINK
Advanced Link Button a:link, a:visited {
background-color: white;
a:link, a:visited { color: black;
background-color: #f44336; border: 2px solid green;
color: white; padding: 10px 20px;
padding: 14px 25px; text-align: center;
text-align: center; text-decoration: none;
text-decoration: none; display: inline-block;
display: inline-block; }
}
a:hover, a:active {
a:hover, a:active { background-color: green;
background-color: red; color: white;
} }
THANKS

You might also like