How do I style HTML with CSS?

I have tried, but I c开发者_开发技巧an't figure out how to style these elements:

<div class="tabs">
<ul class="tabsNavigation">
<li><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
<li><a href="#tab3">Tab3</a></li>
</ul>

How would I do that?

---

Just refer to

.tabs ul
{
}

or

.tabs ul li
{
}

---

Listamatic has many examples and a tutorial

---

Using the operator ">" (immediately after), you prevent the styles are applied to elements within the structure you are using html based. Example: If other DIVs, LIs, as these will not have changed their styles.

DIV.tabs {

}
DIV.tabs > .tabsNavigation {

}
DIV.tabs > .tabsNavigation > LI {

}
DIV.tabs > .tabsNavigation > LI > a {

}

Thanks.

---

If you want to style the list itself, use:

ul.tabsNavigation{}

and if you want to style each li, use:

ul.tabsNavigation li{}

or the links?

ul.tabsNavigation a{}

---

.tabs>ul>li{ /* your style */ }

or

.tabsNavigation>li{ /* your style */ }

Remember to include your css styles.

---

What you want is this: For classes use .className and for id's use #idName

.className {
style: property;
}

#idName {
style: property;
}

Here is a JSFiddle of your example:

http://jsfiddle.net/Mutant_Tractor/aXdJ9/1/

---

You can do inline styling or Use a css file to define your styles. for inline styling you can do the following. This will give the div tabs a red background.

<div class="tabs" style="background:red;">
<ul class="tabsNavigation">
<li><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
<li><a href="#tab3">Tab3</a></li>
</ul>

If you want to define your style in a css file then you can reference the css file in your html file like this

<link href="css/yourfile.css" rel="Stylesheet" type="text/css" />

define the css classes in your html tags:

<ul class="tabsNavigation">

Then in your css file you would do

.tabsNavigation{
background:red;
border:1px solid blue;
width:400px;
height:300px;
}