@Sarah 2015-12-27T03:41:15.000000Z 字数 21979 阅读 2266

CSS selectors

css

All HTML elements are selectors

We've used a number of HTML elements as CSS selectors so far: we've styled the HTML tags

You may have guessed this, but if not, we'll say it outright: any HTML element can be a CSS selector! You can modify

Instructions
Give it a whirl! Change the entire HTML body's background-color to #C6E2FF.

body{
    background-color:#C6E2FF;
}

Multiple Selectors

As you've seen, it's possible to nest HTML elements inside one another, like so:

I like tacos!

So what if you want to grab

s that are inside two

s, and not all

s? You select those in the CSS tab like this: div div p { /*CSS stuff!*/ } Instructions On the CSS tab, select only the h3 header nested inside three

s and change its color to red.

div div div h3{
    color:red;
}

One selector to rule them all

There's also a very special selector you can use to apply CSS styling to every element on the page: the * selector. For example, if you type

{
border: 2px solid black;
}
You'll create a two-pixel wide solid black border around every element on the HTML page.

Instructions
Go ahead and use the universal selector to put a 1px dashed #3A5FCD border around every element on the page. See how each element looks like it's in its own box on the page? This is part of the HTML/CSS "box model," which we'll cover in the next lesson.

*{
 border: 1px dashed #3A5FCD;   
}

Rock Your Selectors

Great work! Selectors can be a bit tricky, but the more you use them, the more comfortable you'll become.

Instructions
Let's make sure you really know your stuff.

On the CSS tab:

Set all paragraph text to the hexadecimal color #00E5EE.
Set all paragraph text for paragraphs nested inside div tags to the hex color #CC0000. (What color will they turn if they've already been told in step #1 to be #00E5EE? See the Hint!)
Put a border with the hex color #3A5FCD around every HTML element. It can be solid, dotted, dashed, 2px, 3px, whatever you like!

/*Add your CSS below!*/
*{
 color:#00E5EE;  
 border:1px dotted #3A5FCD;
}
div p{
   color: #CC0000;
}

Branching

You can think of an HTML document as a tree: elements "branch out" from the main trunk (the tags). The first two big branches are and , and branches multiply and become finer as you get to elements like

Instructions
We've sketched a potential family tree out for you in the editor (check the Result tab). When you think you've wrapped your mind around the HTML "tree," hit Save & Submit Code!

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>The Great Tree of HTML</title>
    </head>
    <body>
        <div id="p1">P</div>
        <div id="p2">P</div>
        <div id="p3">P</div>
        <div class="space"></div>
        <div id="title">Title</div>
        <div id="div">Div</div>
        <div class="space"></div>
        <div id="head">Head</div>
        <div id="body">Body</div>
        <div class="space"></div>
        <div id="html">HTML</div>
    </body>
</html>

Parents, children, and siblings

If you think of the tag as the trunk of the tree, you can think of its immediate branches— and —as its children. Both tags are children of , and is their parent element. Because they are both immediate children of (that is, they are both only one element away), they are siblings.

Just like a real family, elements have children, grandchildren, great-grandchildren, and so on (though we don't make this distinction with HTML—a child of an element, and all that child's children, are children of the first parent).

Instructions
For those of you who think more visually, there's a little diagram in the index.html tab to the right.

Remember: an element is a child of EVERY element wrapped around it, even if that element is several "branches" away!

When you're ready, hit Save & Submit Code to continue.

<!DOCTYPE html>
<html> <!--The trunk of the tree!-->
    <head> <!--Child of html, parent of title,
           sibling of body-->
        <title></title> <!--Immediate child of head,
                        child of head AND html-->
    </head>
    <body> <!--Child of html, parent of p,
           sibling of head-->
        <p></p> <!--Immediate child of body,
                child of body AND html-->
    </body>
</html>

Swinging from branch to branch

All right! Now that you have an idea of how HTML documents are structured, it's time to see how good you are at navigating from branch to branch.

Instructions
We've added some links in the editor to the right. On the CSS tab, target ONLY the s that are children of

s and

Set their text-decoration to none
Set their font-family to cursive
Don't change the link that's not part of the unordered list!
```
/*Add your CSS below!*/
li a{
    text-decoration:none;
    font-family:cursive;
}
```
Can you swing it?

Good work! Let's try something a little more involved.

Remember, you can reach an element that is a child of another element like this:

div div p { /* Some CSS */ }
where in this case, we'd be grabbing any
that is nested somewhere inside a
that is nested somewhere inside another
. If you want to grab direct children—that is, an element that is directly nested inside another element, with no elements in between—you can use the > symbol, like so:

div > p { /* Some CSS */ }
This only grabs
s that are nested directly inside of
s; it won't grab any paragraphs that are, say, nested inside lists that are in turn nested inside
s.

Instructions
Make all
tags have a font-family of Garamond. (Do NOT use the universal selector for this! There's a better way; see the Hint for help.)
Make the introduction paragraph and the summary paragraph have a font-weight of bold (this is a new property for you, but it works just like the others you've learned).
Make the synopsis paragraph have the color #7AC5CD.
Make the paragraphs in the unordered list have the color #000000 and text-decoration underline.

/*Add your CSS below!*/
p{
font-family:Garamond;
}
body>p{
font-weight:bold;
}
div>p{
color:#7AC5CD
}
div ul li p{
color:#000000;
text-decoration:underline;
}

See it to believe it

Excellent! You've got the hang of this, and you're starting to learn more about cascading.

As we mentioned, certain selectors will "override" others if they have a greater specificity value. ul li p { is more specific CSS than just p {, so when CSS sees tags that are both
tags and happen to be inside unordered lists, it will apply the more specific styling (ul li p {) to the text inside the lists.

There are two selectors that are even more specific than nested selectors like the ones above: classes and IDs. Check them out in the editor to the right.

Instructions
See how the classes and IDs alter the way the paragraph looks? (Note how the li p { CSS overrides the p { CSS, and the class .list_item overrides the li p { CSS.)

Hit Save & Submit Code to learn how to use these new selectors!

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Ultimate Text Challenge</title>
</head>
<body>
<p id="intro">Cascading with CSS</p>
<div>
<p>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 class="list_item">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 class="list_item">The more specific your selectors are, the higher importance CSS gives to the styling you apply!</p></li>
</ul>
</div>
<p id="summary">Greater specificity makes CSS prioritize that particular styling.</p>
</body>
</html>

p {
font-family: Garamond, serif;
}
#intro {
font-weight: bold;
color: #000000;
}
div p {
color: #7AC5CD;
}
li p {
font-family: Verdana, sans-serif;
color: #000000;
}
.list_item {
font-family: Vivaldi, cursive;
}
#summary {
font-size: 20px;
color: #000000;
}

Beyond HTML elements

HTML elements can be CSS selectors, but as we saw with the universal selector *, they're not the only selectors available.

There are two important selectors you can use in addition to the universal selector and HTML elements: classes and IDs.

Instructions
You'll see a class and an ID declared in the HTML tab. We'll get to the syntax for these in the next exercise—in the meantime, remove the comment (the leading /* and trailing */) from the CSS tab to see how they work!

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<h3 class="red">I'm an h3 header in the red class!</h3>
<h3>I'm just a regular old h3 header.</h3>
<p class="red">I'm a paragraph in the red class!</p>
<p>I'm just a regular old paragraph.</p>
<p id="rogue">I'm a rogue paragraph! I do what I want!</p>
</body>
</html>

.red {
color: red;
}
#rogue {
color: #FF00FF;
font-weight: bold;
font-family: cursive;
}

Keeping it classy

Classes are useful when you have a bunch of elements that should all receive the same styling. Rather than applying the same rules to several selectors, you can simply apply the same class to all those HTML elements, then define the styling for that class in the CSS tab.

Classes are assigned to HTML elements with the word class and an equals sign, like so:

.square {
height: 100px;
width: 100px;
}
This allows you to take elements of different types and give them the same styling.

Instructions
Create any number of HTML elements you like and give them the class "fancy". On the CSS tab, set .fancy to have a font-family of cursive and a color of #0000CD.

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Result</title>
    </head>
    <body>
        <!--Add your HTML elements with the class "fancy" below!-->
        <div class="fancy">ggggg</div>
    </body>
</html>

/*Define your CSS class .fancy below!*/
.fancy{
    font-family:cursive;
    color:#0000CD;
}

ID, please!

IDs, on the other hand, are great for when you have exactly one element that should receive a certain kind of styling.

IDs are assigned to HTML elements with the word id and an equals sign:

IDs are identified in CSS with a pound sign (#):

first {

height: 50px;

}

second {

height: 100px;

}

intro {

color: #FF0000;

}
This allows you to apply style to a single instance of a selector, rather than all instances.

Instructions
Create any number of HTML elements you like and give one of them the ID "serious". On the CSS tab, set #serious to have a font-family of Courier and a color of #CC0000.

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Result</title>
    </head>
    <body>
        <!--Add your HTML elements with the ID "serious" below!-->
        <p id="serious">ffffff</p>
    </body>
</html>

/*Define your CSS id #serious below!*/
#serious {
    font-family:Courier;
    color:#CC0000;
}

Putting it all together

Well done! You're doing great.

Now it's time to put all our newfound knowledge together:

Instructions
Check out the text in the editor to the right. On the HTML tab:

Give the h2 header an ID of "intro".
Give the first h3 and first p a class of "standout". Don't do anything to the second h3 and p!
On the CSS tab:

Inside the #intro selector, set color to #B83C3A.
Inside the .standout selector, set color to #F7AC5F and font-family to Verdana.

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Result</title>
    </head>
    <body>
        <h2 id="intro">Introduction</h2>
        <h3 class="standout" >Classes and IDs in CSS</h3>
        <p class="standout">Classes and IDs are super easy in CSS. You're using them right now!</p>
        <h3>Regular HTML Selectors</h3>
        <p>If you don't bother with a class or ID, an HTML element just gets
           the regular CSS styling for that element—or the default styling if you
           don't specify any particular styling on the stylesheet.
        </p>
    </body>
</html>

/*Add your CSS below!*/
#intro{
 color:#B83C3A;   
}
.standout{
 color:#F7AC5F;
 font-family:Verdana;
}

Even finer control

You've learned about class selectors. Now it's time to learn about pseudo-class selectors.

A pseudo-class selector is a way of accessing HTML items that aren't part of the document tree (remember the tree structure we talked about earlier?). For instance, it's very easy to see where a link is in the tree. But where would you find information about whether a link had been clicked on or not? It isn't there!

Pseudo-class selectors let us style these kinds of changes in our HTML document. For example, we saw we could change a link's text-decoration property to make it something other than blue and underlined. Using pseudo selectors, you can control the appearance of unvisited and visited links—even links the user is hovering over but hasn't clicked!

The CSS syntax for pseudo selectors is

selector:pseudo-class_selector {
property: value;
}
It's just that little extra colon (:).

Instructions
Uncomment the pseudo-class selector in the CSS tab, then check out the Result to see what happens when you pass your cursor over the links!

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Result</title>
    </head>
    <body>
    <ul>
        <li><a href="http://www.codecademy.com/">Codecademy Home</a></li>
        <li><a href="http://www.codecademy.com/learn">Learn</a></li>
        <li><a href="http://www.codecademy.com/create/creator">Teach</a></li>
        <li><a href="http://www.codecademy.com/edit_account/basic_info">Settings</a></li>
    </ul>
    </body>
</html>

a:hover {
    color: #cc0000;
    font-weight: bold;
    text-decoration: none;
}

First child

Another useful pseudo-class selector is first-child. It's used to apply styling to only the elements that are the first children of their parents. For instance:

p:first-child {
color: red;
}
Would make all paragraphs that are the first children of their parent elements red.

Instructions
On the CSS tab, set the first paragraph's font-family to cursive.

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title></title>
    </head>
    <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>
</html>

p:first-child{
    font-family:cursive;
}

Nth child

Well done! You can actually select any child of an element after the first child with the pseudo-class selector nth-child; you just add the child's number in parentheses after the pseudo-class selector. For example,

p:nth-child(2) {
color: red;
}
Would turn every paragraph that is the second child of its parent element red.

The element that is the child goes before :nth-child; its parent element is the element that contains it.

Instructions
On the CSS tab:

Set the second paragraph to the font-family Tahoma.
Set the third paragraph to have the color #CC0000.
Set the fourth paragraph to have the background-color #00FF00.
Set the fifth paragraph to have the font-size 22px.

/*Add your CSS below!*/
p:first-child{
    font-family:cursive;
}
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:2px;
}

Show it if you know it!

Feel like you're really starting to understand this CSS stuff? Prove it!

Instructions
Add three links to the body of the HTML document. They can go anywhere and the text between the tags can say whatever you like.
On the CSS tab, set the all a:hovers to have no text-decoration.
Set the first link to the color #CDBE70. (Remember: in this case, the first link also happens to be the first child of the body element.)
Set the third link to the color #FFC125.
?

/*Add your CSS below!*/
a:hover{
    text-decoration:none;
}
a:first-child{
    color:#CDBE70;
}
a:nth-child(3){
 color:#FFC125;   
}

Final section breather

Great work! So far in this course, you've learned:

A wider range of CSS selectors
About cascading
The universal selector
Class and ID selectors
Pseudo selectors
That's a lot of material. We're done covering new stuff for now—let's go over what you've learned.

Instructions
Take a minute to collect your thoughts, then hit Save & Submit Code to start the review exercises!

Multiple selectors

Remember how to reach selectors nested inside others? If you have a paragraph inside a div that's inside another div, you can get to it like this:

div div p {
/Some CSS/
}
This will style all paragraphs nested inside two divs and will leave all paragraphs that don't meet these criteria alone.

Please note: If you have adjusted your browser's zoom, tests involving font-size and height will not work correctly. To remedy this, please type Command+0 or Ctrl+0 to reset your view.

Instructions
Give the paragraphs inside the list item tags a font size of 30px.

/*Add your CSS below!*/
div ul li p{
    font-size:30;
}

Class selectors

You've also learned how to use class selectors to modify different elements (that is, you can give the same styling to an h3 header, a paragraph, a link, and a table).

Instructions
Speaking of which, those sound like great examples. On the HTML tab:

Create an h3 header and a paragraph.
Give them both a class of "fancy".
On the CSS tab, set the .fancy class to have a font-family of cursive and a color of violet (the word violet, not a hexadecimal value).

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Result</title>
    </head>
    <body>
        <!--Add your HTML below!-->
        <h3 class="fancy">
        uuu
        </h3>
            <p class="fancy">
            ggg
            </p>
    </body>
</html>

/*Add your CSS below!*/
.fancy{
    font-family:cursive;
    color:violet;
}

ID selectors

You've also learned about ID selectors, and how they can be used to target a specific element.

/* CSS */

color: #000000;

}
The example above is just a reminder.

Instructions
Add another

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Result</title>
    </head>
    <body>
        <!--Add your HTML below!-->
        <h3 class="fancy">
        uuu
        </h3>
            <p class="fancy">
            ggg
            </p>
            <p id="serious">gggg
            </p>
    </body>
</html>

.fancy{
    font-family:cursive;
    color:violet;
}
#serious{
    font-family:Courier;
    color:#8C8C8C;
}

Pseudo selectors

Home stretch! Let's toss in some pseudo-class selector magic to finish this bad boy.

Instructions
Add a third paragraph to the HTML document. On the CSS tab, use nth-child to give it a font size of 26px. Remember: your paragraph is the third paragraph, but the fourth CHILD of body. The h3 counts as the first child!

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Result</title>
    </head>
    <body>
        <!--Add your HTML below!-->
        <h3 class="fancy">
        uuu
        </h3>
            <p class="fancy">
            ggg
            </p>
            <p id="serious">gggg
            </p>
            <p>uuuuuuuu
            </p>
    </body>
</html>

/*Add your CSS below!*/
.fancy{
    font-family:cursive;
    color:violet;
}
#serious{
    font-family:Courier;
    color:#8C8C8C;
}
p:nth-child(4){
    font-size:26px;
}

What you'll be building

We'll be taking advantage of CSS's powerful class and ID selectors to visually separate different classes of HTML elements—in this case, our friends from our family members and our mortal enemies.

Check out the code in the HTML and CSS tabs, then take a look at the Result tab to see what the fruits of your labor will be.

Instructions
Hit Save & Submit Code to start building your own classes!

<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title></title>
    </head>
    <body>
        <div class="friend" id="best_friend"><p>Arthur</p></div>
        <div class="friend"><p>Batmanuel</p></div>
        <div class="friend"><p>Captain Liberty</p></div>
        <div class="friend"><p>The City</p></div>
        <div class="friend"><p>Justice</p></div>
        <div class="family"><p>Mom</p></div>
        <div class="family"><p>Dad</p></div>
        <div class="family"><p>Bro</p></div>
        <div class="family"><p>Sis</p></div>
        <div class="family"><p>Rex</p></div>
        <div class="enemy"><p>Baron Violent</p></div>
        <div class="enemy"><p>The Breadmaster</p></div>
        <div class="enemy"><p>The Deadly Nose</p></div>
        <div class="enemy"><p>Dinosaur Neil</p></div>
        <div class="enemy" id="archnemesis"><p>Chairface</p></div>
    </body>
</html>

div {
    position: relative;
    display: inline-block;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    border: 2px solid black;
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
}
div p {
    position: relative;
    margin-top: 40px;
    font-size: 12px;
}
.friend {
    border: 2px dashed green;
}
.family {
    border: 2px dashed blue;
}
.enemy {
    border: 2px dashed red;
}
#best_friend {
    border: 4px solid #00C957;
}
#archnemesis {
    border: 4px solid #cc0000;
}

Style those divs!

Good! Now let's give our divs a basic look. (We'll use classes in a minute to change the appearance of our divs depending on whether a given person is a friend, family member, or nefarious nemesis.)

We've started the div selector for you with a little positioning magic (display: inline-block and margin-left: 5px). We'll explain these in the next lesson!

Please note: If you have adjusted your browser's zoom, tests involving height and width will not work correctly. To remedy this, please type Command+0 or Ctrl+0 to reset your view.

Instructions
In the meantime, give your divs a makeover on the CSS tab:

Give them a height and width of 100 pixels.
Set their border-radius to 100%. (Can you guess what this does before you look?)
Give them a border that's two pixels wide, solid, and black.

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>My Social Network</title>
    </head>
    <body>
        <!--Add your HTML below!-->
    <div></div> 
    <div></div> 
    <div></div> 
    </body>
</html>

/*Add your CSS below!*/
div {
    display: inline-block;
    margin-left: 5px;
    height:100px;
    width:100px;
    border-radius:100%;
    border:2px solid black;
}

Use classes to add class

Good work! Now that we've added classes to our HTML document, we can add a little style to them.

Instructions
Give members of your "friend" class a border that's 2px dashed #008000.
Give members of your "family" class a border that's 2px dashed #0000FF.
Give members of your "enemy" class a border that's 2px dashed #FF0000.

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>My Social Network</title>
    </head>
    <body>
        <!--Add your HTML below!-->
    <div class="friend"></div>  
    <div class="family"></div>  
    <div class="enemy"></div>   
    </body>
</html>

/*Add your CSS below!*/
div {
    display: inline-block;
    margin-left: 5px;
    height:100px;
    width:100px;
    border-radius:100%;
    border:2px solid black;
}
.friend{
    border:2px dashed #008000;
}
.family{
    border:2px dashed #0000FF;
}   
    .enemy{
    border:2px dashed #FF0000;
}

No ID, no entry

Excellent! Now let's create two IDs: "best_friend" and "archnemesis".

Instructions
Assign the first ID to a div in your "friend" class (that's right: you can have a tag with a class and an ID!) and the second to a div in your "enemy" class.

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>My Social Network</title>
    </head>
    <body>
        <!--Add your HTML below!-->
    <div id="best_friend" class="friend"></div> 
    <div class="family"></div>  
    <div id="archnemesis" class="enemy"></div>  
    </body>
</html>

Identify your IDs

Okay! Now we just need to assign separate CSS styling to #best_friend and #archnemesis so we can quickly pick them out from our regular friends and enemies.

Instructions
Give your #best_friend a border of 4px solid #00C957 and your #archnemesis a border of 4px solid #CC0000.

div {
    display: inline-block;
    margin-left: 5px;
    height:100px;
    width:100px;
    border-radius:100%;
    border:2px solid black;
}
.friend{
    border:2px dashed #008000;
}
.family{
    border:2px dashed #0000FF;
}   
    .enemy{
    border:2px dashed #FF0000;
}
#best_friend{
    border: 4px solid #00C957
}
#archnemesis{
 border :4px solid #CC0000   
}

You've done it!

Great job! You've created a map of people you know that's differentiated based on different CSS classes.

Feel free to go ahead and change any of the CSS you've used so far, including colors, borders, and border-radii. Make it your own!

If you're looking for a bonus challenge, try adding images and links to each

so your various circles look like (and link to) your friends, family, and foes!

Instructions
Hit Save & Submit Code when you're done experimenting to finish this project and move on to more CSS lessons!

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>My Social Network</title>
    </head>
    <body>
        <!--Add your HTML below!-->
    <div id="best_friend" class="friend">dd</div>   
    <div class="family">ttt</div>   
    <div id="archnemesis" class="enemy">ddd</div>   
    </body>
</html>

/*Add your CSS below!*/
div {
    display: inline-block;
    margin-left: 5px;
    height:100px;
    width:100px;
    border-radius:100%;
    border:2px solid black;
}
.friend{
    border:2px dashed #008000;
}
.family{
    border:2px dashed #0000FF;
}   
    .enemy{
    border:2px dashed #FF0000;
}
#best_friend{
    border: 4px solid #00C957
}
#archnemesis{
 border :4px solid #CC0000   
}

See it to believe it

All right! Now that you know all about CSS, it's time to learn the last (but certainly not least) major piece of the puzzle: positioning.

Controlling the position of HTML elements allows you incredibly fine control over how your pages look. No longer will your

s sit directly on top of one another! (Unless you want them to.)

As we mentioned, elements populate the page in what's known as the CSS box model. Each HTML element is like a tiny box or container that holds the pictures and text you specify.

Check out the image in the Result tab: that's what the box model looks like! (We'll cover the details of margins, borders, and padding in the next section.)

Instructions
See for yourself—use the universal selector to draw a 1px dashed border of hex color #0000FF around every HTML element.

*{
 border: 1px dashed #0000FF;   
}

CSS selectors

All HTML elements are selectors

Multiple Selectors

One selector to rule them all

Rock Your Selectors

Branching

Parents, children, and siblings

Swinging from branch to branch

Can you swing it?

See it to believe it

Beyond HTML elements

Keeping it classy

ID, please!

first {

second {

intro {

Putting it all together

Even finer control

First child

Nth child

Show it if you know it!

Final section breather

Multiple selectors

Class selectors

ID selectors

menu {

Pseudo selectors

What you'll be building

Style those divs!

Use classes to add class

No ID, no entry

Identify your IDs

You've done it!

See it to believe it

内容目录