/    Sign up×
Community /Pin to ProfileBookmark

block level tags

Copy linkTweet thisAlerts:
Dec 12.2002

I was wondering if someone could explain to me how exactly block level tags work.

If I put

.test {
font: red;
}

and then apply it to a <div class=”test”> the font color inside of this should be red. What I have my question with is when you have a large number of classes. Is there a certain way to arrange them so they all work? I seem to have the most problem when I try to do stuff to links. For instance if I do something like this

.test A {
text-decoration: none;
}

It seems like it only works some of the time. Any ideas?

One other thing…Is .test A or a.test the correct meathod?

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesDec 12.2002 — [font=georgia]Style Sheets need a valid HTML tree to work properly so the place to start is with the HTML validator at http://validator.w3.org/. And there's a CSS validator at http://jigsaw.w3.org/css-validator/.

The selector [font=monospace].test a[/font] refers to [font=monospace]a[/font] elements that are contained by elements of class [font=monospace]test[/font].

[font=monospace]

<div.test><a href="www.w3.org">W3C</a></div>

[/font]

[font=monospace]a.test[/font] refers to [font=monospace]a[/font] elements of the class [font=monospace]test[/font].

[font=monospace]

<a class="test" href="www.w3.org">W3C</a>

[/font]

It's all there in the CSS1 Specification http://www.w3.org/TR/REC-CSS1 which is an easy read.[/font]
Copy linkTweet thisAlerts:
@Rick_BullDec 12.2002 — [i]Originally posted by pyro [/i]

[B].test {

font: red;

}

[/B][/QUOTE]

It should be [b]color[/b]: red not font.
Copy linkTweet thisAlerts:
@pyroauthorDec 12.2002 — It should be color: red not font.[/QUOTE]
Ooops..I knew that. It was 1am my time when I posted that. Brain wasn't working so well...?

Anyway, thanks for the link. I'll take a look at that.
Copy linkTweet thisAlerts:
@Robert_WellockDec 12.2002 — Block-level elements typically contain inline elements and other block-level elements, when rendered visually, block-level elements usually begin on a new line as apposed to inline elements, <div> is considered block-level.
Copy linkTweet thisAlerts:
@King_PellinoreDec 13.2002 — Note the Order of Precedence.

Easier understood by example.

I have a site, on which I have a navy background and I set my links to another colour, like so:

A {color: #FFF;}

If I also want to include a white footer, as a DIV, I would want a special colour for the links on that one. Say, my div has ID="footer". Here follows:

#footer A {color: #000;}

Now, the [b]point[/b]:

The first statement refers to [i]all[/i] the links in the document, while the second refers to a [i]part[/i] of that "[i]all[/i]". It is very important that I put the first statement [b]before[/b] the second, because the browser would then think:

Colour all links white

Colour some of them black

and not

Colour some links black

Colour all links white,

because then I would have all the links white, that's not what I want.

Ok, sorry for really going into the basics like that.
Copy linkTweet thisAlerts:
@pyroauthorDec 13.2002 — I guess I was more wondering if it made a difference when you have a lot of <div> tags. For instance do you need to have the first class that you use on the page defined first?
Copy linkTweet thisAlerts:
@StefanDec 13.2002 — [i]Originally posted by pyro [/i]

[B]I guess I was more wondering if it made a difference when you have a lot of <div> tags. For instance do you need to have the first class that you use on the page defined first? [/B][/QUOTE]

No, you can have them in any order in your HTML.

However the order in which you declare your CSS rules does make a difference in which rule has priority.

To understand it you really need to read the CSS documentation for how the Cascading works

http://www.w3.org/TR/REC-CSS2/cascade.html#cascade
×

Success!

Help @pyro spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...