<

Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x

Introduction to CSS (Part 1)

Posted on
6,075 Points
75 Views
Last Modified:
Experience Level: Beginner
5:20
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
Comment
Author:Jason Baker
0 Comments

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month