h1 {
font-family: Verdana, sans-serif; /* options if one font is not installed on the comuter */
color: #576D94;
}
img {
height:100px; /* height of the image */
width: 300px; /* width of the image */
border: 1px solid #4682b4; /* setting border to the image */
}
a {
text-decoration: none; /* Removes underline in links */
color: #cc0000; /* changes the color of the link */
}
/*
I'm plain old font!
Me, too!
Me three!
Forget you guys. I'm about to be red!
*/
/* To select the inner i.e., third h3 to format */
div div div h3 {
color: red;
}
* {
border: 1px dashed #3a5fcd;
} /* "*" is a universal selector, it'll change/aplly the effect to all the elements of the page */
/*
Introduction: Cascading with CSS
Synopsis: When you set a property of a selector like 'p' to a certain value, that value applies to all p tags.
If, however, you change that same property to a different value for a more specific instance of p,
that change will override the 'general rule'.
If you say p { font-family: Garamond}, all 'p's will have the font Garamond.
BUT if you say li p {font-family: Verdana}, 'p's outside of 'li's will be
in Garamond, and 'p's INSIDE 'li's will be in Verdana.
The more specific your selectors are, the higher importance CSS gives to the styling you apply!
Summary: Greater specificity makes CSS prioritize that particular styling.
*/
body > p {
font-weight: bold; /* only select the direct paragrah and leaves the nested paragrhs */
}
div > p {
color: #7ac5cd;
}
ul p {
color: #000000;
text-decoration: underline; /* underline */
}
/* Create button using div
*/
div {
border-style: solid;
border-width: 2px;
border-radius: 5px;
height: 50px;
width: 120px;
border-color: #6495ed;
background-color: #BCD2EE;
}
/* Pesudo-class selectors */
/* for links
a:link
a:visited
a:hover
*/
a:link {
color: #008b45; /*Color of the link before visiting the link */
text-decoration: none; /* Removes the line on links */
}
a:hover {
color: #00ff00; /* Color of the link when hovering mouse over the link */
text-decoration: none; /* Removes the line while hovering mouse over the link */
}
a:visited {
color: #ee9a00; /* Color of the visited link */
}
/* for child */
/*
I'm the first child!
We're not.
We're not.
We're not.
We're not.
We're not.
We're not.
*/
p:first-child {
font-family: cursive; /* Changes the style of first child only */
}
/* Changes the style for "n"th element/style */
p:nth-child(2) {
font-family: Tahoma;
}
p:nth-child(3) {
color: #cc0000;
}
p:nth-child(4) {
background-color: #00ff00;
}
p:nth-child(5) {
font-size: 22px;
}
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
border-radius: 100%; /* it is used to make the div as round/circle shape if the height and width are same */
border: 2px solid black;
}
/* blocks */
/*
*/
div {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
display: inline-block; /* Inlin-block is used to display the divisions next to the one and "display: block; " is used to display the divisions in below
the first division The "display: inline" value places all your elements next to one another, but not as blocks: they don't keep their dimensions.
"display: none " will hide borders. */
}