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 */
}
/* <body>
<h3>I'm plain old font!</h3>
<div>
<h3>Me, too!</h3>
<div>
<h3>Me three!</h3>
<div>
<h3>Forget you guys. I'm about to be red!</h3>
</div>
</div>
</div>
</body> */
/* 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 */
/*<body>
<p>Introduction: Cascading with CSS</p>
<div>
<p>Synopsis: When you set a property of a selector like 'p' to a certain value, that value applies to <em>all</em> p tags.
If, however, you change that same property to a different value for a more specific instance of p,
that change will <em>override</em> the 'general rule'.
</p>
<ul>
<li><p>If you say p { font-family: Garamond}, all 'p's will have the font Garamond.</p></li>
<li><p>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.
</p></li>
<li><p>The more specific your selectors are, the higher importance CSS gives to the styling you apply!</p></li>
</ul>
</div>
<p>Summary: Greater specificity makes CSS prioritize that particular styling.</p>
</body> */
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> </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 */
/* <body>
<div>
<p>I'm the first child!</p>
<p>We're not.</p>
<p>We're not.</p>
<p>We're not.</p>
<p>We're not.</p>
<p>We're not.</p>
<p>We're not.</p>
</div>
</body> */
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 */
/* <body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
</body> */
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. */
}
