<

Introduction to CSS (Part 2)

Posted on
6,115 Points
115 Views
Last Modified:
Published
Experience Level: Beginner
4:07
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors.

Video Steps

1. Create your external css file by saving it as style.css then set up your style tags


<style>

</style>

Open in new window

2. Reference the nav tag and set your properties.


nav {position relative; left: 0; top:10%;}

Open in new window

3. Set the reference for the UL element and styles for it as well as setting the background color to green


nav>ul {list-style-type: none; width:100%; height:1.5em; padding:0; margin:0; background-color:#00FF00;}

Open in new window

4. Position the list elements in line on one row with a width of 60 pixels making sure to give 5 pixels of padding in between


 nav>ul>li{display:inline; width:60px; padding:5px;}

Open in new window

5. Set a class selector to be used on the links with no underline for the link a background color of purple and text color of white


.navlinks{color:#ffffff; background-color:#FF00FF; text-decoration:none;}

Open in new window

6. Setup your navigation as such:


<nav>
		<ul>
				<li><a class="navlinks" href="#">Home</a></li>
				<li><a class="navlinks" href="#">Contact</a></li>
				<li><a class="navlinks" href="#">About</a></li>
		</ul>
</nav>

Open in new window

0
Author:Jason Baker
1 Comment
LVL 9

Comment

by:Rowby Goren
Hi

Van you post a link to part one of your series,

Thanks

...RRowby
0
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month