FunToMakeAWebsite.com

 

contenttitleicon HTML #2 ()

SooBest

HTML (Hyper Text Markup (tags)Language)

<head>   //list in line, so it looks like menu
<style>
ul#menu li { display:inline;}
</style>
</head>

<ul id=”menu”>
 <li>a</li>
<li>b</li>
 <li>c</li>
</ul>

ul#menu {padding:0;}
ul#menu li{display:inline;}
ul#menu li a {
 Background-color:orange;
Color: black;
 Padding: 10px 20px;
 Text-decoration: none;
  Border-radius: 4px 4px 0 0;}

ul#menu li a: hover{Background-color: green;}
<div style=”background-color:orange; color:black;padding:20px;”>  //<div> is a block-level element, used for containe for other HTML element, style and class are common <div> element. When use CSS, <div> can be used to Style block of content.</div>


<style>#header {
Background-color:orange;
Color:black;
Text-align:center;
Padding:5px;}

#nav{

Line-height:20px;
Background-color:grey;
Height:467px;
Width:100px;
Floating:left;
padding:5px; }

#section{
Width:300px;
Float:left;
Padding:10px;}

#footer{
Background-color:orange;
Color:black;
Text-align:center;
Padding:5px;}
</style>

<body>

<div id=”header”>
<h1> Here is where the header goes</h1>
</div>

<div id=”nav”>

fox<br>
giraffe<br>
elephant<br>
</div>

<div id =”section”>

<p> fox description</p>
<div id=”footer”>
Updated date
</div>
</body>

<span> //<span>element is an inline element that is used as a container for text. Style and class are common in <span>, usually for a small chuck of html inside a line
</span>

----------------------------------------------------------------

div.Category{                                                          //class attribute is used to defined equal styles for

Background-color:orange;                                      //elements with same class name.

Color:black;

Margin: 20px 0 20px 0;

Padding: 20px;

}

<div class=”Category”> ……</div>

---------------------------------------------------------------------------------

<head>

    <style>

          Span.extra{  font-size:150%; color:red;}

    </style>

</head>


<body>

<h1> here <span class=”extra”> are EXTRA LARGE 150%</span>words </h1>

</body>