<

Introduction to CSS (Part 2)

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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Join & Write a Comment

Suggested Videos

Title Views Activity
Embedded Flash in HTML5 81
Embedded Videos in HTML5 59
Rounded Corner Effect in CSS 57
Introduction to jQuery (Part 2) 552
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month