Creating CSS From Scratch

HOME SERVICES PRODUCTS CONTACT US
Technology Horizon
ABOUT FEATURED PRODUCTS
i-Click : An E-learn System

Technology Horizon is an out sourcing program developer specializing
for Basic Education
in the front and back end development. To view some of our system
just click our products.
Techno Quizzer: An online
Quiz Creator
To better serve our customer and you we are undergoing a face-lift;
so if you have some inquiry about our products feel free to contact us.
CONTACT US:
Phone: (088) 858-8888

Fax : (088) 858-5555
Email: techorizon@technohorizon.com
Copyright : Technology Horizon Home | Services | Products | Contact Us

All Rights Reserved
HOME SERVICES MAIN
PRODUCTS MENU US
CONTACT
HEADER
Technology Horizon
ABOUT FEATURED PRODUCTS
i-Click : An E-learn System

Technology Horizon is an out sourcing program developer specializing
for Basic Education
in the front and back end development. To view some of our system
just click our products. SIDE BAR
Techno Quizzer: An online
CONTENT Quiz Creator
To better serve our customer and you we are undergoing a face-lift;
so if you have some inquiry about our products feel free to contact us.
CONTACT US:
Phone: (088) 858-8888

Fax : (088) 858-5555
Copyright : Technology Horizon

All Rights Reserved FOOTER Home | Services | Products | Contact Us
5 Elements and Width:
Main Navigation : width = 760px ; height=50px
Header: width = 760px ; height=150px
Center : width = 480px ; height=depends on content
Side Bar : width = 280px ; height=depends on content
Footer : width = 760px ; height=66px
Width and Height Attribute: % , auto , px (1024)

The <div> Tag
- short for division
- divides the content into individual sections
- Each section can then have its own
formatting, as specified by the CSS
** <div> tag will be used to Create

a canvass defined in the Layout.
<html>
<head><title>CSS Template</title></head>
<body>
<div id=page_container>
<div id=main_nav> MAIN Navigation </div>
<div id=header> HEADER </div>
<div id=content> CONTENT </div>
<div id=side_content> SIDE CONTENT </div>
<div id=footer> FOOTER </div>
</div>
</body>
</html>
Create a NEW Blank File where You will define
your CSS (say style.css)
style.css
#page_container {
width: 760px;
background: red;
}
In the index.html file
- Specify the location and Filename of CSS
(e.i. style.css)
- Add the following line inside <head> and </head> tag
<link rel="stylesheet" href="style.css" media="screen"

type="text/css">
CSS File that defines
the style
<html>
<head><title>CSS Template</title>
<link rel="stylesheet" href="style.css" media="screen" type="text/css">

</head>
<body>
<div id="page_container">
<div id="main_nav"> MAIN Navigation </div>
<div id="header"> HEADER </div>
<div id="content"> CONTENT </div>
<div id="side_content"> SIDE CONTENT </div>
<div id="footer"> FOOTER </div>
</div>
</body>
</head>
style.css #content {
width:480px;
#page_container { background:pink;
width: 760px; }
background: red;
} #side_content {
#main_nav{ width: 280px;
width:760px; background: green;
height:50px; }
background:orange;
} #footer{
#header{ width:760px;
width:760px; height:66px;
height:150px; background:grey;
background:blue; }
}
Content
and Side
Content
was not
Aligned
Float is a CSS positioning property
Can be associated with Text-Wrapping
Values :
* LEFT floats to left direction
* RIGHT floats to right direction
* NONE- (the default) ensures the element will
not float
*INHERIT- which will assume the float value from
that elements parent element
style.css #content {
width:480px;
#page_container {
width: 760px; background:pink;
background: red; float: left;
} }
#main_nav {
width:760px;
height:50px; #content-side {
background:orange;
}
width:280px;
#header{ background: green;
width:760px; float: right;
height:150px;
background:blue;
}
}
#footer{
width:760px;
height:66px;
background:grey;
}
Replace the Text in the content div with:
<div id=content>
The quick brown fox jump over the lazy dog
near the bank of the river. The quick brown
fox jump over the lazy dog near the bank of
the river. The quick brown fox jump over the
lazy dog near the bank of the river. The quick
brown fox jump over the lazy dog near the
bank of the river. The quick brown fox jump
over the lazy dog near the bank of the river.
The quick brown fox jump over the lazy dog
near the bank of the river.
</div>
Overlap
specify whether to keep one or both sides of an
element "clear" (i.e. no elements can appear on the
side that is clear).
Values:
none - floating elements can appear on either
side
left - floating elements can not appear on the
left (i.e. keep the left side "clear")
right - floating elements can not appear on the
right (i.e. keep the right side "clear")
both - floating elements can not appear on the
left or right (i.e. keep both sides "clear")
inherit
style.css
.
#footer{
clear: both;
width: 760px;
height: 66px;
background:grey;
}
The main things we still need to add are:
Navigation Links
Headings (Site Headings and Content Headings)
Content
Footer Information (copyright info, credits, and
alternative navigation)
Web1.html
<div id=main_nav>
<ul class=mainlink>
<li> Home </li>
<li> Services </li>
<li> Facebook </li>
<li> Contact Us </li>
</ul>
</div>
<div id=header>
<h1>Technology Horizon</h1>
</div>
a:hover {
color : red;
}
index. html
<div id=footer>
<div id=altNav>
<a href=#>Home </a>
<a href=#>Services </a>
<a href=#>Products </a>
<a href=#>Contact Us </a>
</div>
Copyright by : Technology Horizon <br>
Powered by: i-Link Business Solutions
</div>
index.html
<div id="content">
<h2> ABOUT </h2>
<p><strong>Technology Horizon</strong> is an out sourcing
program developer specializing in the front and back end
development. To view some of our system just click our
products.
</p>
<p> To better serve our customer we are undergoing a
face-lift; so if you have some inquiry about our products
feel free to contact us.
</p>
<h2> CONTACT US: </h2>
<p> Phone: (088) 858-8888 <br>
Fax : (088) 858-5555 <br>
</p>
</div>
index.html
<div id="side_content">
<h2>FEATURED PRODUCTS</h2>
<p><strong>i-Click :</strong>
An E-learn System for Basic Education
</p>
<p><strong>Techno Quizzer:</strong>
An online Quiz Creator
</p>
</div>
style.css #footer{
#header{ clear: both;
body{ width:760px; width: 760px;
font-family: height:150px; height: 66px;
Arial,Helvitica,Verdana; } background:grey;
font-size:12px; }
color:#666666; #content { #content h2 {
background:white; width:450px; margin: 0;
} float: left; padding: 0;
line-height: 18px; padding-bottom: 15px;
#page_container { padding: 10px; }
width: 760px; }
margin: auto; #side_content{ #content p {
} width:260px; margin: 0;
float: right; padding: 0;
#main_nav { line-height: 18px; padding-bottom: 15px;
width:760px; padding: 10px; }
height:50px; }
background:red;
}
The easy way to set the Header is to insert an
Image.
Save the image in the Folder images in this
example the file name of the image is
techhorizon.jpg
EDIT style.css (#header)
#header {
height:150px;
background : #ffffff url(techhorizon.jpg);
}
Next goal is to move the Header Technology Horizon
index.html The word Technology

Horizon is enclosed in the
<div id="header"> tag <h1> and </h1>
<h1> Technology Horizon </h1> So here we will create a
</div> rule for <h1> in the
style.css to Position It
correctly.
Positioning the text Technology Horizon
- Float <h1> to the Right
- then using margin-top and padding-right
properties, we can get the exact position.
- Add the rule to <h1> in the style.css
h1 {
color: #000000;
margin: 0;
padding: 0;
float: right;
margin-top: 57px;
padding-right: 31px;
}
57
px
31px
Now, lets position our Navigational Menu properly
<div id="main_nav"> Since the Navigational
<ul class="mainlink"> Menu is enclose in
<li> Home </li> <ul> and </ul> tags,
<li> Services </li> we will create a rule
<li> Products </li> in the style.css and
<li> Contact Us </li> well name that rule
</ul> mainlink
</div>
Define Rule for <ul> and well name it nav
Add this line in the style.css
<div id="main_nav">
<ul class="nav">
.mainlink li { <li> Home </li>
<li> Services </li>
color: #000; <li> Products </li>
<li> Contact Us </li>
display:inline; </ul>
background-color:#FFF; </div>
border: none;
border-color:#f3f3f3 #bbb #bbb #f3f3f3;
margin-top: 30px;
padding:.5em;
zoom: 1;
Notes:
}
. (dot) indicates class
# (number sign) indicates id

Creating CSS From Scratch

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Creating CSS From Scratch

Загружено:

Авторское право:

Доступные форматы

HOME SERVICES PRODUCTS CONTACT US

ABOUT FEATURED PRODUCTS

i-Click : An E-learn System

Phone: (088) 858-8888

Copyright : Technology Horizon Home | Services | Products | Contact Us

ABOUT FEATURED PRODUCTS

i-Click : An E-learn System

Phone: (088) 858-8888

Copyright : Technology Horizon

Width and Height Attribute: % , auto , px (1024)

** <div> tag will be used to Create

<link rel="stylesheet" href="style.css" media="screen"

<link rel="stylesheet" href="style.css" media="screen" type="text/css">

index.html The word Technology

Вам также может понравиться