You are on page 1of 21

2/10/2016

CSSWebsiteTutorial
Home

WEBSITETEMPLATESFLASHWEBSITESCMSTEMPLATES

Templates
Blog
CustomServices

Search

FreeResources
Contact

FlashTutorials

Dreamweaver

Fireworks&

Photoshop

WebDesign

CSS

CorelDraw

&Resources

Tutorials

IllustratorTutorials

Tutorials

Tutorials&Resources

Tutorials

Tutorials

Adsby Google CSSHTMLLearnCSS Website CSSClass

CSSTutorials

Youarehere::Home>FreeResources>CSSTutorials>CSSWebsiteTutorial

CSSWebsiteTutorial

ResponsiveWebsiteDesign

New!
SimpleHTML5WebsiteNew!
MultilayeredParallaxScrolling
ParallaxScrolling
Backgrounds

Like

99

Tweet

121

LearnhowtocreateawebsiteusingHTMLandCSSStyles.
BelowisthepreviewoftheCSSwebsiteyouwilllearntocreate.

Borders
CollageGallery
CoolTextEffects
CustomFonts
DropDownMenu
Forms
Gallery
LightboxEffect
MultipleShadowsinCSS
OverlappingMenus
Preloader
Shadows
StackingGallery
SlidingMenus
TabbedContentBox
TipsonusingCSSwithIE
Website

FreeWebDesign
Resources
HTML5&CSS3Website
Templates New!
WebsiteTemplates
FireworksLogos
IllustratorLogos
WebsiteBackgrounds
FlashPhotoGalleries
DynamicTextScroller
WebsiteAddOns

Articles

Wewillsplitthiswebpageintofourparts:
HeaderArea
PreviewArea
ContentArea

Whatsthebestwaytocreate
abusinesswebsite?New!
Pros&ConsofWebsite

FooterArea

Templates

AlltheaboveAreasdefinedabovearecontianedinsideadivwithid"wrapper".

WebDesignTrends2013

Definethis<divid="wrapper">justafterthestarting<body>tag.

CoolWebsiteMenuIdeas
ReadymadeEcommerce
Solutions

Let'shavealookatthebasicformatofthewebpage:

PopularWebDesignTrends
2011

http://www.entheosweb.com/tutorials/css/website.asp

1/21

2/10/2016

CSSWebsiteTutorial

HowtoBuildaWebsite

1
2
3
4
5
.
.
.
.
.
.
12
13
14
15

WebDesignIdeas

WebDesignTutorials
WebDesignTips
NavigationTips
FastLoadingWebSites
ExpandableWebsiteDesign
CustomizeTemplates
CoolBulletTips
GraphicDesignIdeas
TableTips'n'Tricks

<body>
<divid="wrapper">
<!CODEFORHEADERAREA>

<!CODEFORPREVIEWAREA>

<!CODEFORCONTENTAREA>

<!CODEFORFOOTERAREA>

</div><!#wrapper>

</body>

TheCSScodefor<divid="wrapper">istogiveitaBlue(#1D4D6B)backgroundcolor.
Thisbackgroundcolorgetsappliedtoalltheelementswhicharecontainedinsidethis
wrapperdiv.

1
2
3

#wrapper{
background:#1D4D6B
}

HEADERAREA
Let'sstartwiththeHeaderArea.
TheHeaderAreaconsistsoftheCompanyNameandtheMainNavigationMenu.

ThisHeaderismadeusingonlyfourdivelements.
LeftHeaderandRightHeaderdivcontainedinsidetheCenterHeaderdiv.
ThelastdivistheMainHeaderdivthatcontainsalltheotherthreediv'sinsideit.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

http://www.entheosweb.com/tutorials/css/website.asp

2/21

2/10/2016

CSSWebsiteTutorial
<divid="header">
<divid="center_header">

<divid="left_header">
CompanyName
</div><!#left_header>
<divid="menu">
<ahref="home.html">Home</a>
<ahref="About.html">AboutUs</a>
<ahref="Services.html">Services</a>
<ahref="Partners.html">Partners</a>
<ahref="Contact.html">ContactUs</a>
</div><!#menu>
</div><!#center_header>
</div><!#header>

TheHeaderAreahastwobackgroundcolors.Thelightershadeofbluecolorapplied
tothe<divid="header">.
Thedarkershadeofbluecolorisappliedto<divid="center_header">.Thisdivis
positionedatthecenterofthewebpagehorizontallyusingtheautomarginproperty.
Nowwe'llmakethetextCompanyNamebigandthemenuhovereffectusignCSS
styles.
We'lladdsomespacebetweenthemenulinksusingthepaddingproperty.
TomaketheCompanyNametextbiggerwe'llhavetodefinethefontsizepropertyfor
the<divid="left_header">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#header{

background:#074266
}
#center_header{

background:#053350

height:100px

margin:auto

width:980px

}
#left_header{
float:left
fontsize:40px
lineheight:100px
textalign:center
width:370px
}
#menu{

float:right

height:30px

margin:42px00

width:530px

http://www.entheosweb.com/tutorials/css/website.asp

3/21

2/10/2016

CSSWebsiteTutorial
#menua{

color:#EEEEEE

fontsize:15px

fontweight:bold

padding:8px12px

}
#menua:hover{
background:#1E90FFurl(images/hovermenuitems.png)repeatx
}

TheExplanation
[For"header"div]
Line2background:#074266
AppliesadarkshadeofBlue(#074266)tothedivwithid"header".

[For"centerheader"div]
Line5background:#053350
TosetthemoredarkerShadeofBlue(#053350)tothedivwithid"center_header".

Line6height:100px
Setstheheightofthecenter_headerto100pixels.

Line7margin:auto
Centeresthe"centerheader"divhorizontally.
Marginautowontworkifwidthisnotspecified.

Line8width:980px
Setswidthto980pixels.

[For"leftheader"div]
Line11float:left
Floatsthe"leftheader"divtotheleft.

Line12fontsize:40px
Setthefontsizeto40pxtoallthetextinside"leftHeader".

Line13lineheight:100px
Topositionthetextinthemiddle(vertically).

Line14textalign:center
Topositionthetextinthecenter(horizontally).

Line15width:370px
Setswidthofthe"leftheader"div.

[For"menu"div]
Line18float:right
Floatsthe"menu"divtoright.
http://www.entheosweb.com/tutorials/css/website.asp

4/21

2/10/2016

CSSWebsiteTutorial

Line19height:30px
Setstheheightof"menu"div.

Line20margin:42px00
Topositionthedivatthemiddle(vertically)insidethe"centerheader"div.

Line21width:530px
Setsthewidthof"menu"div.

[Forallanchortags"a"inside"menu"div]
Linecolor:#EEEEEE
SetsthetextcolortoLightCement(#EEEEEE)Color.

Linefontsize:15px
Setsthefontsize.

Linefontweight:bold
Makesthetextlooklittlebolder.

Linepadding:8px12px
Toprovidespaceof12pixelsbetweentwolinksand8pixelspacingatthetopand
bottomofthelink.

[ForHoverEffecton"a"tagsinsidethe"menu"div]
Line30background:#1E90FFurl(images/hovermenuitems.png)repeatx
Changesthebackgroundofthelinksonmousehover.
Thisistheimageused.

PREVIEWAREA

ThePreviewAreacontainsthreetransparentboxes.Theseboxesshowsomepart(34
lines)ofthecompletetopicandhavea[more]linkthatlinkstotheoriginaltopic.
Thetransparencyisappliedusingatransparentimage.

HtmlCodeforthePreviewArea

http://www.entheosweb.com/tutorials/css/website.asp

5/21

2/10/2016

CSSWebsiteTutorial

Thethreepreviewboxesarecontainedinsidethedivwithid"center_preview",and
"center_preview"diviscontainedinside"preview"div.Eachpreviewboxhasanid
"topic".

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<divid="preview">
<divid="center_preview">

<divid="topic">
<h2>Topic1</h2>
<p>
SomeDescriptionabouttheTopic1.SomeDescriptionabouttheTopic1.
SomeDescriptionabouttheTopic1.SomeDescriptionabouttheTopic1.
SomeDescriptionabout...<ahref="#">[readmore]</a>
</p>
</div><!#topic>
<divid="topic">
<h2>Topic2</h2>
<p>
SomeDescriptionabouttheTopic2.SomeDescriptionabouttheTopic2.
SomeDescriptionabouttheTopic2.SomeDescriptionabouttheTopic2.
SomeDescriptionabouttheTopic2.SomeDescriptionabouttheTopic2.
SomeDescriptionaboutthetopic2.
S...<ahref="#">[readmore]</a>
</p>
</div><!#topic>
<divid="topic">
<h2>Topic3</h2>
<p>
SomeDescriptionabouttheTopic3.SomeDescriptionabouttheTopic3.
SomeDescriptionabouttheTopic3.SomeDescriptionabouttheTopic3.
SomeDescriptionabouttheTopic3.SomeDescriptionabouttheTopic3.
SomeDescriptionabouttheTopic3.SomeDescriptionabouttheTopic3.
SomeDescriptionabouttheTopic3.
SomeDescriptionabou...<ahref="#">[readmore]</a>
</p>
</div><!#topic>
</div><!#center_preview>
</div><!#preview>

CSSCodeforthePreviewArea
ThePreviewAreaandthethreetextboxeshaveabackgroundimage.Thetextbox
backgroundimageisapngformat.Theimagecanbemademoretransparentusing
imageeditors.OnlypngandgifformatssupporttransparencywithoutusingCSS.The
http://www.entheosweb.com/tutorials/css/website.asp

6/21

2/10/2016

CSSWebsiteTutorial

jpgformatdoesnotsupporttransparency,butitcanbemadetransparentusingCSS
OpacityProperty.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

#preview{

color:#EEEEEE

height:300px

}
#center_preview{

height:300px

width:980px

margin:0auto

background:url(images/wave.png)

}
#topic{

background:url(images/topic.png)repeat

width:300px

float:left

fontsize:13px

margin:40px10px10px10px

border:1pxsolid#444

borderradius:10px

mozborderradius:10px

webkitborderradius:10px

}
#topich2{

width:200px

padding:10px0050px

}
#topicp{

padding:5px10px10px10px

lineheight:20px

}
#topica{

color:#FFFFFF

fontweight:bold

TheExplanation
[For"preview"div]
Line3color:#EEEEEE
Setsthecolorofallthetextinsidethe"preview"divtoLightCement(#EEEEEE)
http://www.entheosweb.com/tutorials/css/website.asp

7/21

2/10/2016

CSSWebsiteTutorial

Color

Line4height:300px
SetstheheightofthePreviewArea.

[For"center_preview"div]
Line7height:300px
Setstheheightofthe"center_preview"Areadiv.

Line8width:980px
Setsthewidthto980pixels.

Line9margin:0auto
Tocenterthedivhorizontally.

Line10background:url(images/wave.png)
Background

[For"topic"div]
Line13background:url(images/topic.png)
Setsthetransparent"png"formatimagebackground.Theimageisrepeatedin
bothdirectionbydefault.

Line14width:300px
Setsthewidthof"topic"divto300pixel.

Line15float:left
Toalignthedivhorizontally.

Line16fontsize:13px
Setsthefontsizeto13pixels.

Line17margin:40px10px10px10px
Setsthespacingbetweenthe"preview"divandthe"topic"div.

Line18border:1pxsolid#444
Sets1pixelbordertothe"topic"div.

Line19borderradius:10px
Line20mozborderradius:10px
Line21webkitborderradius:10px
BorderradiusPropertyforallthebrowsres.Itmakesthecornersroundinshape.

[Forallthe"H2"tagsInside"topic"div]
http://www.entheosweb.com/tutorials/css/website.asp

8/21

2/10/2016

CSSWebsiteTutorial

Line25width:200px
Tochangethedefaultwidthforthe"H2"tagof100%.

Line26padding:10px0050px
Tomovethetextinsidethe"H2"tagstotheright.

[Forallthe"p"tagsInside"topic"div]
Line29padding:5px10px10px10px
Toprovidespacebetweenthetextandthecontainer"topic"div.

Line30lineheight:20px
Setsthelineheightforallthetextinsidethe"p"tag.

[Forallthe"a"tagsInside"topic"div]
Line33color:#FFFFFF
SetsWhite(#FFFFFF)colortextforthelinksinsidethe"topic"div.

Line34fontweight:bold
Toincreasetheboldnessofthelinktext.

CONTENTAREA
TheContentAreahasaSidebarontheleftthatcontainslinkstootherpages.
Thedivontherightisthemaincontentbox.

TheHtmlcodefortheContentArea

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

http://www.entheosweb.com/tutorials/css/website.asp

9/21

2/10/2016

CSSWebsiteTutorial
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<divid="container">
<divid="center_container">
<divid="sidebar">
<divid="title">Sidebar</div>

<ul>

<li><b>WebsiteLink</b>

LinksDescription....<ahref="#">[more]</a></li>

<li><b>WebsiteLink</b>

LinksDescription....<ahref="#">[more]</a></li>

<li><b>WebsiteLink</b>

LinksDescription....<ahref="#">[more]</a></li>

<li><b>WebsiteLink</b>

LinksDescription....<ahref="#">[more]</a></li>

<li><b>WebsiteLink</b>

LinksDescription....<ahref="#">[more]</a></li>

<li><b>WebsiteLink</b>

LinksDescription....<ahref="#">[more]</a></li>

<li><b>WebsiteLink</b>

LinksDescription....<ahref="#">[more]</a></li>

</ul>
</div><!#sidebar>

<divid="content">
<h2>WelcometoOurWebsite</h2>
<p>Descriptionofthewebsite.Description
ofthewebsite.Descriptionofthewebsite.
Descriptionofthewebsite.Descriptionof
thewebsite.Descriptionofthewebsite.Description
ofthewebsite.Descriptionofthewebsite.
Descriptionofthewebsite.Descriptionofthewebsite.
Descriptionofthewebsite.Descriptionofthewebsite.</p>
<divid="left_list">
<ul>
<li><ahref="#">ContentsListItems</a></li>
<li><ahref="#">ContentsListItems</a></li>
<li><ahref="#">ContentsListItems</a></li>
<li><ahref="#">ContentsListItems</a></li>
</ul>
</div><!#left_list>

<divid="right_list">
<ul>
<li><ahref="#">ContentsListItems</a></li>
<li><ahref="#">ContentsListItems</a></li>
<li><ahref="#">ContentsListItems</a></li>
<li><ahref="#">ContentsListItems</a></li>
</ul>
</div><!#right_list>
</div><!#content>
</div><!#center_conatiner>
</div><!#container>

CSScodefortheContentArea
http://www.entheosweb.com/tutorials/css/website.asp

10/21

2/10/2016

CSSWebsiteTutorial

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
#container{

height:320px

}
#center_container{

background:#DDD

height:320px

width:980px

margin:0auto

}
#sidebar{

float:left

width:280px

margin:10px

paddingbottom:10px

background:#EEE

}
#sidebar#title{

lineheight:30px

padding:00015px

marginbottom:10px

fontsize:16px

fontweight:bold

background:url(images/title.png)repeatx

}
#sidebarul{

liststyle:none

width:280px

}
#sidebarli{

padding:5px5px

fontsize:13px

http://www.entheosweb.com/tutorials/css/website.asp

11/21

2/10/2016

CSSWebsiteTutorial

}
#sidebara{

color:#000

}
#content{

width:670px

height:300px

margin:10px10px10px0

background:#EEE

fontsize:14px

float:right

}
#contenth2{

padding:10px010px20px

}
#contentp{

margin:15px

}
#left_list,#right_list{

width:270px

float:left

margin:10px10px20px50px

}
#left_listul,#right_listul{

liststyle:url("images/li.png")

}
#left_lista,#right_lista{

lineheight:30px

TheExplanation
[Forthe"container"div]
Lineheight:320px
Setstheheightofthecontainerto320pixels.

[For"center_container"div]
Linebackground:#DDD
SetsLightGrey(#DDDDDD)colortothebackground.

Lineheight:320px
Setsheightof"center_container"to320pixels.

Linewidth:980px
Setswidthto980pixels.

Linemargin:0auto
Setsspacingonlyonleftandrightsideofthe"center_container".
TopositionthedivatthecenterHorizontally.

[For"sidebar"div]
Linefloat:left
Topositionthe"sidebar"divontheleftside.

Linewidth:280px
Widthofthe"sidebar"div.

Linemargin:10px

http://www.entheosweb.com/tutorials/css/website.asp

12/21

2/10/2016

CSSWebsiteTutorial

Createsspacingof10pixelsoneachsideofthe"sidebar".

Linepaddingbottom:10px
Forspacingbetweenthetextandthe"sidebar"divatthebottomportionofthe
"sidebar".

Linebackground:#EEE
LightestGrey(#EEEEEE)Colorforthebackgroundcolor.

[For"title"divinside"sidebar"div]
Linelineheight:30px
SetsLineHeightto30pixelsforthetextinsidethe"title"div.

Linepadding:00015px
Tocreatespacingontheleftsideof"title".
Thespacingvaluesfortop,right,bottomiszeropixel.

Linemarginbottom:10px
Forspacingbetweenthe"title"divandthetextinsidethe"sidebar"..

Linefontsize:16px
Setsfontsizeto16pixels.

Linefontweight:bold
Tomakethetextboldstyle.

Linebackground:url(images/title.png)repeatx
A12X30pixelimageisrepeatedalongxaxisforthebackground.
Thepadding,lineheightareaffectedbythebackgroundimage.
Themarginisnotaffectedbythebackgroundimage.

[Forall"ul"tagsinside"sidebar"div]>
Lineliststyle:none
Removesthebulletlistingstyle.

Linewidth:280px
Setsthewidthofthe"ul"htmlelementsameasthewidthof"sidebar".

[Forall"li"itemsinside"sidebar"div]
Linepadding:5px5px
Forspacingbetweentwo"li"elementsonallsides.

Linefontsize:13px
Reducesthefontsizeto13pixels.
http://www.entheosweb.com/tutorials/css/website.asp

13/21

2/10/2016

CSSWebsiteTutorial

[Forall"a"tagsinside"sidebar"div]Linecolor:#000
Setsthetextcolorofalltheanchor"a"elementsinsidethe"sidebar"divto
Black(#000000).

[For"content"div]
Linewidth:670px
Lineheight:300px
Setswidthandheightofthe"content"div.

Linemargin:10px10px10px0
Forspacingbetween"content"andthe"center_container"ontop,rightandbottom
portion.

Linebackground:#EEE
Setsthebackgroundcolor.

Linefontsize:14px
Setsthefontsizeofthetextinsidethe"content"div.

Linefloat:right
Toalignthe"content"divontherightsideof"center_container"div.

[Forall"h2"tagsinside"content"div]
Linepadding:10px010px20px
Setsspacingontop,bottomandleftsideofthe"h2"tagelement.

[Forall"P"tagsinside"content"div]
Linemargin:15px
Toprovidespacingbetween"p"tagelementand"content"div.

[For"left_list"and"right_list"containedinside"content"div]
Linewidth:270px
Setsthewidthofbothdivsto270px

Linefloat:left
Toalignthe"left_list"and"right_list"horizontally.

Linemargin:10px10px20px50px
Providesspacingbetweenthe"left_list","right_list"andtheparent"content"div
element.Thevaluesareappliedclockwisestartingfromthetop.

http://www.entheosweb.com/tutorials/css/website.asp

14/21

2/10/2016

CSSWebsiteTutorial

[Forall"ul"tagsinside"left_list"and"right_list"div]
Lineliststyle:url("images/li.png")
Replacesthebulletstylewithanimage.

[Forall"a"tagsinside"left_list"and"right_list"div]
Linelineheight:30px
Setstheheightofalltheanchor"a"tagsto30px.

FOOTERAREA

Thefooterareaismadeusigntwodiv's.
Theleftfooterareacontainsthelinkstothesocialnetworksites.
Therightfooterareacontainsthefootermenuandthecopyrightinformation.

HtmlCodefortheFooterArea

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<divid="footer">
<divid="center_footer">
<divid="left_footer"><b>FindUsOn</b>
<ul>
<li><ahref="#"><imgsrc="images/facebook.png"/></a></li>
<li><ahref="#"><imgsrc="images/twitter.png"/></a></li>
<li><ahref="#"><imgsrc="images/youtube.png"/></a></li>
<li><ahref="#"><imgsrc="images/rss.png"/></a></li>
</ul>
</div>

<divid="right_footer">
<ahref="home.html">HOME</a>
<ahref="about.html">ABOUTUS</a>
<ahref="services.html">SERVICES</a>
<ahref="partners.html">PARTNERS</a>
<ahref="contact.html">CONTACTUS</a>
</div>

<span>YourWebsiteName2011</span>

</div>
</div>

http://www.entheosweb.com/tutorials/css/website.asp

15/21

2/10/2016

CSSWebsiteTutorial

CSScodefortheFooterArea
The"footer"divcontainedinsidethe"wrapper"divhasadarkblue(#1D4D6B)
backgroundshade.
The"center_footer"divcontainedinsidethe"footer"divhasablack(#000000)colored
background.We'llpositiontheSocialNetworkingiconsinsidethe<ul></ul>tags
horizontally.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

#footer{

height:130px

}
#center_footer{

background:#000

height:130px

width:980px

margin:0auto

}
#left_footer,#right_footer{

width:450px

padding:20px

float:left

}
#left_footerb{

color:#fff

}
#left_footerli{

float:left

margin:020px

}
#left_footerimg{

width:60px

height:60px

}
#right_footer{

float:right

}
#right_footera{

color:#aaa

padding:010px

lineheight:21px

fontsize:13px

fontweight:bold

http://www.entheosweb.com/tutorials/css/website.asp

16/21

2/10/2016

CSSWebsiteTutorial

}
#footerspan{

color:#ccc

fontsize:13px

marginleft:150px

TheExplanation
[For"footer"div]
Line3height:130px
Setstheheightofthe"footer"div.

[For"center_footer"div]
Line6background:#000
SetsBlack(#000000)Coloredbackgroundforthe"center_footer"div.

Line7height:130px
Line8width:980px
Widthandheightofthefooter.

Line9margin:0auto
Workswiththewidthtopositionthe"center_footer"atthecenterhorizontally.

[Forboth"left_footer&right_footer"div]
Line12width:450px
Setsthewidhtof450pixelforboth"left_footer&right_footer"div.

Line13padding:20px
Paddingspaceinsidethetwodivs.

Line14float:left
Sothedivspositionthemselvesinsinglerowhorizontally.

[Forall"b"tagsinside"left_footer"div]
Line17color:#fff
SetsWhite(#FFFFFF)colorforallthetextinside"b"tagelements.

[For"li"tagsinside"left_footer"div]
Line20float:left
Tostackthesocialnetworkingiconstotheleftsideofthewebpage.

Line21margin:020px
Tosetthespacingbetweenthesocialicons.
http://www.entheosweb.com/tutorials/css/website.asp

17/21

2/10/2016

CSSWebsiteTutorial

[For"img"tagsinside"left_footer"div]
Line24width:60px
Line25height:60px
Widthandheightofthesocialnetworkingicons.

[For"right_footer"div]
Line28float:right
Topositionthe"right_footer"divtotherightsideofthe"footer"div.

[Forall"a"tagsinside"right_footer"div]
Line31color:#aaa
Setsthecolorofallthelinksinthe"right_footer"div.

Line32padding:010px
ForSpacingbetweenthelinks.

Line33lineheight:21px
Setsthelineheightofthelinks.

Line34fontsize:13px
Setsthefontsizeofthelinksto13pixels.

Line35fontweight:bold
Tomakethetextlookbolder.

[Forthe"span"tagsinside"footer"div]
Line38color:#ccc
TomakeLightGrey(#CCCCCC)Coloredtextinsideany"span"elementthatexistin
the"footer"div.

Line39fontsize:13px
Setsthefontssizeto13pixels.

Line40marginleft:150px
Positionsthetextinside"span"element150pixelsfromtheleft.

ClickHeretoDownloadExample

HighestPerformingVPS
WeOnlyUseHighPerformanceSecureServersforOurLeadingVPS.

http://www.entheosweb.com/tutorials/css/website.asp

18/21

2/10/2016

CSSWebsiteTutorial

SearchOver50,000PremiumTemplates

EnterKeyword

Search

Nowbuildingawebsiteisaseasyas123!
BUYanddownloadawebsitetemplate.Choosefromthousandsof
readymadedesigns!
CUSTOMIZEwithyourownimagesandtext.Oruseourtemplate
customizationservicesjust$499.
UPLOADyourfinishedwebsitetoyourhostingprovider.We
recommendHostgator,hostforEntheos.

PleaseLike,Tweet,ShareorCommentonthispageifyoufoundthis
tutorial/resourceuseful!

Like

99

Tweet

StumbleUpon

121

19Comments

Sortby Oldest

Addacomment...

HabibGulamali
nicetutorial
LikeReplyNov16,20118:57pm

RaziaSultanaDaffodilInstituteofIT(DIIT)
excellent
LikeReply

2Dec14,20119:12am

JoeShejo
nicetutorial.........
LikeReplyDec18,20116:41am

Load10morecomments

FacebookCommentsPlugin

Noportionofthesematerialsmaybereproducedinanymannerwhatsoever,withouttheexpresswrittenconsentof
Entheos.Anyunauthorizeduse,sharing,reproductionordistributionofthesematerialsbyanymeans,electronic,
mechanical,orotherwiseisstrictlyprohibited.

Lookingforhigh
qualityResponsive
WebsiteDesign?
Choosefromover
2000templates!
http://www.entheosweb.com/tutorials/css/website.asp

19/21

2/10/2016

CSSWebsiteTutorial

FeaturedTemplate

Template#53676
Type:WordPress
Price:$75

Entheos
LikePage

http://www.entheosweb.com/tutorials/css/website.asp

20/21

2/10/2016

Home
Aboutus
Portfolio
Testimonials
Prices
LowCostSolutions
Contact

CSSWebsiteTutorial

WebsiteTemplates

FreeTutorials

CustomServices

EcommerceTemplates

Blog

CSS

CorelDrawTutorials

BrochureDesign

Creloaded

Tutorials

FlashAnimated

CSSTutorials

ContentWriting

MagentoTemplates

Ideas&Inspiration

FullPackage

DreamweaverTutorials

DynamicWebsite

OSCommerce

BestResources

FullSite

DesignInspiration

Develpment

ZenCart

Freebies

JSAnimated

FireworksTutorials

LogoDesign

VirtuemartTemplates

Illustrator

FlashTutorials

StationaryDesign

PrestaShopTemplates

Facebook

PhotoshopTutorials

TemplateCustomization

WebDesignTutorials

FlashAnimation

FullFlashWebsite
Templates
DynamicFlash
DynamicFlashPhoto

FreeResources

WebsiteDesign

Galleries

Brochures

Flash8

PhotoGalleries

CorporateIdentity

XMLFlashSite

WebsiteTemplates

LogotypeTemplate

FlashCmsTemplates

http://www.entheosweb.com/tutorials/css/website.asp

CMS&BlogTemplates
Drupal

LogoDesign
WebDesign

Joomla

Logos&CorporateIdentities Wordpress

PowerPointTemplates

21/21

You might also like