<

Introduction to CSS (Part 2)

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

Become a CompTIA Certified Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

Suggested Videos

Title Views Activity
Rounded Corner Effect in CSS 69
Using Google Font API in CSS 66
Introduction to jQuery (Part 2) 895
Introduction to PHP: Building the Form 431
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month