<

Watch Introduction to CSS (Part 1)

Posted on
6,080 Points
80 Views
Last Modified:
Published
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
Author:Jason Baker
0 Comments

Suggested Videos

The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
Via various tools, systems and automated alerts I generate thousands of emails per day. Using a common method to send these emails makes it easier to standardize these messages. One key feature of these email methods is stylized emails. This article…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month