<

Introduction to CSS (Part 1)

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

Suggested Videos

Title Views Activity
Drop-Cap Effect in CSS 81
Using Google Font API in CSS 69
PHP, jQuery, and Form Actions 961
Lists and Links 104
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Forums on the internet are sites that provide a place for those who have an interest in a specific topic to meetup virtually to share in their passion with others around the world that also have such an interest.

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month