help with css!

Question

im really confused, i am pretty new to this so please bear with me. i ave been asked to select something using an id selector and give it a 8px solid top border with a spercific color

what i am confused about is what a id selector is, i know you hve to use a # but thats all.

i have tryed:

copyright {}

id.copyright {}

if either of these are right then its somewhere else i am going wrong. but atleast once i know il know where i am lol

Answer 1 · 2014-03-30T11:48:08Z

March 30, 2014 11:48am

in your html it would look like this,

<div id="red">

to select it in your css it would look like this

#red {
    border: 1px solid red,
}

so you assign an id using id="foo" and you select it in your css using the hash tag then the id name.

hope this helps.

Answer 2 · 2014-03-30T12:06:42Z

March 30, 2014 12:06pm

An id is used as a handle to one specific element in HTML. It has it's counterpart, the "class" which is a handle to multiple elements. An id is actually not needed in most cases (almost all). Now, just because they aren't needed doesn't mean you shouldn't use them; they'll make life a lot easier.

For example, say you have a document

<body>
<p>Blah blah blah</p>
<p>Hello World</p>
<p> More blah blah blah</p>
</body>
</html>

Now say you wanted to select the middle p tag only. Well, we have sort of a dilema, huh? You could use some nth or child selectors, but that's completely overboard. Instead you add an id to the p you want to target and add styles to that are different from other paragraphs in the document.

<body>
<p>Blah blah blah</p>
<p id="hello">Hello World</p>
<p> More blah blah blah</p>
</body>
</html>

Now, if I wanted to apply styles to that p tag I could do a few things:

I could use a tag selector (just p) and add styles to any p tag in the document. Though the tag has an id, it still inherits properties that are applied to a normal p tag; because it's still a paragraph.

p{
 font-size: 18px;
 color: blue;
}

/* To select our special p tag we can use #hello or p#hello. I prefer just #hello, */

#hello{
 background-color: gray;
 border-radius: 4px;
}

Though only a few styles are applied to #hello, it actually looks like this

#hello{
 font-size: 18px;
 color: blue;
 background-color: gray;
 border-radius: 4px;
}

Note: An id name, for example "hello", can only be used once in the document. No other element in the document can have an id with the name "hello." If you wanted to apply styles to multiple elements, you would use a class.

<body>
<p class="blah">Blah blah blah</p>
<p id="hello">Hello World</p>
<p class="blah"> More blah blah blah</p>
</body>
</html>

Now I can style those two classes with one rule, without any of it affecting my paragraph with the id "hello."

p{
 font-size: 18px;
 color: black;
}

p.blah{
 width: 100%;
 margin: 0 auto;
}

#hello{
 width: 50%;
 background-color: green;
}

/*In this case, both .blah and #hello inherit the properties from p; but both have properties specific to themselves. */

You could even slap that class on to an <h1> or any tag.

Welcome to the Treehouse Community

Looking to learn something new?

Matt Arnold

Matt Arnold

help with css!

copyright {}

id.copyright {}

2 Answers

Wayne Priestley

Wayne Priestley

Matt Arnold

Matt Arnold

Ricardo Hill-Henry

Ricardo Hill-Henry