HTML and CSS (navigation bar)

Question

How do I enter the following code into CSS so that I don't have to copy and paste it in every HTML page?

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

My issue is especially with the "ul" and "li" -I am not sure what to do with this! Any help would be greatly appreciated- thanks!

RhinoWalrus · Accepted Answer · 2013-10-09 16:46:11Z

2

Place your css in a separate file and use the following directive to make it accessible in each page:

<link href="url to stylesheet.css" rel="stylesheet" type="text/css">

answered Oct 9, 2013 at 16:46

RhinoWalrus

3,0992 gold badges35 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhetzie · Accepted Answer · 2013-10-09 16:50:47Z

0

Place the html in a seperate .CSS stylesheet and reference it as:

<link href="url to stylesheet.css" rel="stylesheet" type="text/css">

To use the ul and li tags you would write something similar to this:

<ul>

<li>
            <a href="#">Item 2</a>
            <ul>
                <li><a href="">Sub Item 1</a></li>
                <li><a href="">Sub Item 2</a></li>
                <li><a href="">Sub Item 3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Item 3</a>
            <ul>
                <li><a href="">Sub Item 1</a></li>
                <li><a href="">Sub Item 2</a></li>
                <li><a href="">Sub Item 3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Item 4</a>
            <ul>
                <li><a href="">Sub Item 1</a></li>
                <li><a href="">Sub Item 2</a></li>
                <li><a href="">Sub Item 3</a></li>
            </ul>
        </li>   
    </ul>

answered Oct 9, 2013 at 16:50

Bhetzie

2,94010 gold badges34 silver badges44 bronze badges

2 Comments

Jasmine078 Over a year ago

I have already created a style sheet. My issue is with how I would input the code into it. For instance, would I need to create tags for <div id=" "> or <ul id=" "> and, if so, how would I go about doing this?

Bhetzie Over a year ago

you would do <ul id ="">

Archer · Accepted Answer · 2013-10-09 16:46:44Z

0

Create a CSS file and link it to your HTML file.

answered Oct 9, 2013 at 16:46

Archer

793 bronze badges

Comments

vishalkin · Accepted Answer · 2013-10-09 16:47:59Z

0

Add your css in separate .css file and call it in html file

<!DOCTYPE html >
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head>
<body>
</body>
</html>

answered Oct 9, 2013 at 16:47

vishalkin

1,2552 gold badges13 silver badges25 bronze badges

Collectives™ on Stack Overflow

HTML and CSS (navigation bar)

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related