CS174
Chris Pollett
Feb 17, 2021
selector { property_1:value_1; ... property_n:value_n; }For example,
h1 { font-size:20pt; // make the font-size for h1 tags 20pt=20/72inches tall }
p.normal {prop_list1} p.narrow {prop_list2}
<p class="normal">normal look text</p>
.red {color:red}
<h3 class="red"></h3> <p class="red"></p>
p#sec1 {prop_list2}To use this we do:
<p id="sec1">section1 text</p>
input:hover {color:red} /* input tag will turn red when mouse over. */ input:focus {color:green} /* when click into input field, it will turn green */
<style"> div:first-child b { color:blue } div:before { content:"The following div tag has something to tell you: "; } </style> <div> <div> <b>I'm blue</b> </div> <div> <b>But I'm not</b> </div> </div>
rgb(0, 0, 0) /*decimal */ #C8C8C8 /*hex */
<li style="list-style-image: url(mybullet.png)"> item </li>
body {background-image: url(background.jpg);}
<style type="text/css"> p.first {position: absolute; top:1in; left:2in;} p.second {position: relative; left:-1in;} </style> <p class="first">displays one inch down two inches from left of top of screen</p> <p class="second">displays 1inch to the left of where the first paragraph finished</p>
<input type="text" name="fname" accesskey="f" />