Styling Hyperlinks:
hr{
width:200px;
border-top:2px solid #900;
margin-left:0;
}
.divSample{
width:400px;
border-width:3px;
border-style:dashed;
padding-left: 100px;
padding-top:25px;
padding-bottom:60px;
margin-left:15px;
background-color:#3C6;
}
.divWithBackground{
width:80%;
height:60px;
border-width:3px;
border-style:dashed;
background-image:url(../project2.5/cake.jpg);
padding-left: 100px;
padding-top:25px;
padding-bottom:60px;
margin-left:15px;
}
.divWithBackground2{
width:80%;
height:60px;
border-width:3px;
border-style:dashed;
background-image:url(../project2.5/cake.jpg);
background-repeat:no-repeat;
padding-left: 100px;
padding-top:25px;
padding-bottom:60px;
margin-left:15px;
background-color:#099;
text-align:right;
color:white;
}
.textShadowExample{
text-shadow:5px 3px 5px #ff0000;
font-size:1.5em;
}
This is an example of a text shadow effect with CSS
CSS Property and values: text-shadow:5px 3px 5px #ff0000;
text-shadow: DistanceX DistanceY Blur Color;
.boxShadowSample{
-webkit-box-shadow: 10px 10px 5px #000000;
-moz-box-shadow: 10px 10px 5px #000000;
box-shadow: 10px 10px 5px #000000;
height:100px;
width:100px;
background-color:#ff0000;
}
CSS Property and values:
-webkit-box-shadow: 10px 10px 5px 6px #000000;
-moz-box-shadow: 10px 10px 5px 6px #000000;
box-shadow: 10px 10px 5px 6px #000000;
The box-shadow has to have multiple versions to identify which browser it is for. Not all browsers see the property the same way because it has not been standardized yet. There are CSS3 properties that have not been standardized yet because it takes a few years for all browsers to interpret the CSS3 property the same way. That is why you need to add a vendor prefix in front of box-shadow.
box-shadow: DistanceX DistanceY Blur Spread Color;
CSS Property: list-style-type
Example:
ul {
list-style: circle;
}
Result: