Question

I have a website in which the html code is as below:

<div id="navmenu"><a id="home" href="http://www.abc.com" ><span>HOME<span></a>
<a id="about" href="http://www.abc.com/about-us/"><span>ABOUT US</span></a>
<ul class="about-child">
           <li><a href="#">Hard Drives1</a></li>
           <li><a href="#">Hard Drives<2/a></li>
 </ul>

I want to call these ul and li tags to create CSS but I dont know how to style li and ul using CSS because I am using separate CSS tags for Home and About.

Answer 1

If you need to select all the <li> tags, use this:

li {... css rules ...}

If you need to select all the <li> tags inside the <ul class="about-child">, use this:

ul.about-child li {... css rules ...}

If you need to select all the <li> tags inside any <ul> tag, use this:

ul li {... css rules ...}

And to include the stylesheet, you can either include it via <link>:

<link rel="stylesheet" href="style.css" />

Or by embedding the stylesheet in your document:

<style type="text/css">
    li {... css rules ...}
    ul.about-child li {... css rules ...}
    ul li {... css rules ...}
</style>