Hi there,
could anybody kindly tell me what the "a" (in the 1st line)is in this css and what is used for please? It is driving me insane and I can't find anything anywhere (apart from the w3c schools that says that the a is to order things alphabetiacally??)

#nav-menu li a
{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

cheers

Recommended Answers

All 7 Replies

Have a look a this for an explanation. Start with, What is a rule or "rule set"

It's selecting an anchor element, that's inside of a list element, that's inside of an element with the id nav-menu ; and it's applying the styles between { and } to it.


Regards, Arkinder

Hi there,
thanks for that and I had a look at the other tutorial, good stuff. The thing is that I am pretty new to Css and HTML, so still trying to get my head around it.
So in the example below the anchor is absolutely necessary, is there any way taht I can avoid using it, as in something like

#nav-menu li
{...

If you remove the a then the styles listed will no longer effect that element. <!-- this is an html comment that does nothing to the code -->

<div id="nav-menu"> <!-- just #nav-menu will affect this -->
    <ul>
        <li><a href="#">Link</a></li><!-- what you currently have will affect this -->
        <li><a href="#">Link</a></li><!-- it's an anchor tag (a) in side of a list tag (li) -->
    </ul>
</div>

So removing the a from your code will cause the styles to affect the list tag, because you will only have #nav-menu li . If you just had #nav-menu it would only affect the div with the id nav-menu.


So if you have,

#nav-menu {
    background-color: blue;
}

It will make the background color of the div with the id nav-menu blue.

If you have,

#nav-menu li {
    background-color: red;
}

Any list tag inside of the div with the id nav-menu will have a red background color.


Regards, Arkinder

Hi,
a is the anchor tag used for giving external links inside the page.In css it is used for styling the appearance of the link which is given inside the anchor tag.

< a href="http://www.best-website-designer.com">Click here</a>

typical inaccurate stuff from w3schools !

have a quick look at www.w3fools.com and learn why you should treat that site's lessons with care.

What your code does is just a typical way to style your menu, which you should create as an unordered list.

commented: Very nice link. +1

a in the first line is for link but it would work in the following way.

#nav-menu li a{................}

This css would be applied to the link whenever it is appeared in the following order.

First there must be an element with the id "nay-menu" (#nav-menu), then after that there must be li tag and then on the following link, the above css would be applied.

ok thanks that's clear

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.