here is a sample paragraph doing all of this stuff...
h1 {
color:blue;
font-family:serif;
font-size:24px;
}
div {
border: 1px solid black;
}
div.main p {
color:red;
}
#specialid {
float:left;
}
When you look at a CSS file, you will see it is divided into a bunch of stanzas, like this. Each of these stanzas is called a "selector statement": They all follow the same pattern:
<style>
h1 {
font-size: 2em;
color: red;
}
p {
font-size:5em}
.coolpara {
color:green;
}
#myfave {
color:yellow;
background-color: black;
}
</style>
<h1> Heading</h1>
<p class="coolpara">Some Content</p>
<p id="myfave">Some Content</p>
Though simple in principle, CSS selectors can be confusing. Here are some basic selector types:
<style>
div#cssdemo h1 {
font-size: 3em;
color: red;
}
div#cssdemo p {
font-size:5em}
.coolpara {
color:green;
}
div#cssdemo #myfave {
color:yellow;
background-color: black;
}
</style>
<div id="cssdemo">
<h1> Heading</h1>
<p class="coolpara">Some Content</p>
<p id="myfave">Some Content</p>
</div>
Some Content
Some Content
<style>
div#main p {
color:red;
}
div#main > p.blue {
color: blue;
}
</style>
<div id="main">
<p> regular (red) paragraph</p>
<p class="blue"> not a regular paragraph (blue) </p>
</div>
Various representations:
(also hsl, hsla)
div.main {
color: rgb(150,150,150);
background-color: (#b0c4ee);
text-align: center;
text-decoration:underline;
font-family: "Times New Roman", Times, Serif;
font-style:italic;
font-size:1.25em;
border: 4px green solid;
border-radius:20%;
}
here is a sample paragraph doing all of this stuff...
<style>
p.fixed {
font-size: 20px;
background-color: gray;
}
p.em-small {
font-size: 0.6em;
background-color: blue;
}
p.em-big {
font-size: 2em;
background-color: red;
}
div.pixel-box {
width: 70px;
height: 70px;
border: 1px solid black;
}
div.percent-box {
width: 20%;
height: 30px;
border: 1px solid black;
}
div.viewport-box {
width: 30vw;
height: 30vh;
border: 1px solid black;
}
</style>
<p class="fixed">This paragraph will follow the rules in p.fixed -- size 20px</p>
<p class="em-small">This paragraph will follow the rules in p.em-small -- size 0.6em</p>
<p class="em-big">This paragraph will follow the rules in p.em-big: 2em</p>
<div class="pixel-box">.pixel-box</div>
<div class="percent-box">.percent-box</div>
<div class="viewport-box">.viewport-box</div>