<

Improve company productivity with a Business Account.Sign Up

x

Introduction to CSS (Part 2)

Posted on
6,108 Points
108 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Join & Write a Comment

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month