-
-
Save codecademydev/cb103aa6e3de3e1a88f7c80212bb5241 to your computer and use it in GitHub Desktop.
Codecademy export
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<header> | |
<link href="./styles.css" type="text/css" rel="stylesheet"> | |
</header> | |
<body> | |
<h1>CSS Visual Rules</h1> | |
<div class="intro"> | |
<h5>To style an HTML element using CSS, you need to write a CSS declaration inside the body of a CSS selector.<br>CSS declarations consist of a property and a value.</h5> | |
<h5><strong>Property -</strong> The property you'd like to style of that element.<br> <strong>Value -</strong> the value of the property.<br></h5> | |
</div> | |
<table style="width:100%"> | |
<tr> | |
<th>CSS Property</th> | |
<th>CSS Tag</th> | |
<th>Description</th> | |
</tr> | |
<tr> | |
<td>font-family</td> | |
<td>h1 {<br> font-family: <i>Arial(example)</i>;<br>}</td> | |
<td>To change the typeface of text on the webpage.</td> | |
</tr> | |
<tr> | |
<td>font-size</td> | |
<td>h1 {<br> font-size: <i>18px</i>;<br>}</td> | |
<td>To change the size of text on your web page.</td> | |
</tr> | |
<tr> | |
<td>font-weight</td> | |
<td>h1 {<br> font-weight: <i>bold/normal</i>;<br>}</td> | |
<td>Controls how bold or thin text appears on your web page.</td> | |
</tr> | |
<tr> | |
<td>text-align</td> | |
<td>h1 {<br> text-align: <i>right/left/center</i>;<br>}</td> | |
<td>To align text to the elements that holds this property, otherwise known as its parent. By default, text always appears on the left side of browser.</td> | |
</tr> | |
<tr> | |
<td>color</td> | |
<td>h1 {<br> color/background-color: <i>blue</i>;<br>}</td> | |
<td>To change the background or foregroun color of an element.</td> | |
</tr> | |
<tr> | |
<td>opacity</td> | |
<td>h1 {<br> opacity: <i>0-1</i>;<br>}</td> | |
<td>To change the transparency of text on your web page (0 = fully invisible; 1 = fully visible).</td> | |
</tr> | |
<tr> | |
<td>Background Image</td> | |
<td>h1 {<br> background-image: <i>url("https://www-example.com/image.jpg")</i>;<br>}</td> | |
<td>To change the background of an element as an image on your web page.</td> | |
</tr> | |
<tr> | |
<td>!important</td> | |
<td>h1 {<br> color: <i>blue !important</i>;<br>}</td> | |
<td>This can be applied to specific attributes instead of full rules. It will override any style no mater how specific it is. <strong>Once is used, it's very hard to override it.</strong></td> | |
</tr> | |
</table> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
h1 { | |
text-align: center; | |
} | |
h5 { | |
font-family: cursive; | |
font-weight:normal; | |
} | |
table, | |
td { | |
border: 2px solid #333; | |
text-align: center; | |
font-family: cursive; | |
color: royalblue; | |
} | |
thead, | |
tfoot { | |
background-color: #333; | |
color: #fff; | |
} | |
table, | |
th { | |
border: 1px solid #333; | |
color: peru; | |
} | |
table { | |
width:100; | |
background-color: seashell; | |
} | |
body { | |
background-color: cornsilk; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment