<

[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x

Introduction to CSS (Part 2)

Posted on
6,092 Points
93 Views
Last Modified:
Experience Level: Beginner
4:09
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
Comment
Author:Jason Baker
1 Comment
 
LVL 9

Expert Comment

by:Rowby Goren
Hi

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

Thanks

...RRowby
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month