Skip to content

Instantly share code, notes, and snippets.

@codecademydev
Created February 17, 2021 15:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codecademydev/cb103aa6e3de3e1a88f7c80212bb5241 to your computer and use it in GitHub Desktop.
Save codecademydev/cb103aa6e3de3e1a88f7c80212bb5241 to your computer and use it in GitHub Desktop.
Codecademy export
<!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>
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