<

Introduction to CSS (Part 1)

Posted on
6,080 Points
80 Views
Last Modified:
Published
Experience Level: Beginner
5:18
The viewer will receive an overview of the basics of CSS showing inline styles.

Video Steps

1. In the head tags 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 to ensure no browser defaults are present

nav>ul {list-style-type: none; width:100%; height:3em; padding:0; margin:0;}

Open in new window

4. Position the list elements in line on one row with a width of 60 pixels

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

Open in new window

5. Create your navigation menu as follows


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

Open in new window

0
Author:Jason Baker
0 Comments

Suggested Videos

Title Views Activity
Embedded Flash in HTML5 102
PHP, jQuery, and Form Actions 978
Look For Files Using PHP 462
Introduction to jQuery (Part 2) 907
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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