Internal Cascading Style Sheets
Cascading Style Sheets also known as CSS, can make your job easier as a web designer. Using some simple HTML CSS coding can bring life to an html created list. I'll tell you more about the details of CSS programming language, in my up coming CSS tutorials. For now, we're going to add a little style to our list using the Internal CSS technique.
Adding Style to My List
How I add CSS Style to a single page on my website is easy. If I want the web page to look different from the rest of my website, I use an Internal CSS programming coding. Follow the example below, it'll show you one way it can be done.
Example 1
<!DOCTYPE html>
<html>
<head>
<title>HTML List Example</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100px;
background-color: #f1f1f1;
</style>
</head>
I added the CSS code in the head section of the document. The text is bode, so you can see the new coding I added.
Example 2
<body>
<h1>Learning A New Language</h1>
<ol>
<li>Foreign
<ul>
<li><a href="#English">English</a></li>
<li><a href="#Spanish">Spanish</a></li>
<li><a href="#French">French</a></li>
<li><a href="#Mandarin">Mandarin</a></li>
<li><a href="#Hindi">Hindi</a></li>
<li><a href="#Arabic">Arabic</a></li>
</ul>
</li>
<li>Programming
<ol>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
<li><a href="#Javascript">Javascript</a></li>
<li><a href="#SQL">SQL</a></li>
<li><a href="#PHP">PHP</a></li>
<li><a href="#C++">C++</a></li>
</ol>
</li>
</ol>
</body>
</html>
I added an html code to each item on list. The code goes in the head section of the document. The text is bode, so you can see the new coding I added.
Example 3
BEFORE
- English
- Spanish
- French
- Mandarin
- Hindi
- Arabic
- Programming
- HTML
- CSS
- Javascript
- SQL
- PHP
- C++
Example 4
AFTER
That's how you customize a nested list using html coding. It's a list that we converted into an navigation bar.
Let's move on to the next lesson, that's if you don't have any questions.
If you have any questions about creating nested list using html, please use the dussicion group or send me an PM here at Wealthy Affiliate.
UP NEXT: - HTML Code: HTML and Notepad
Reply
