Professional Documents
Culture Documents
CSSWebsiteTutorial
Home
WEBSITETEMPLATESFLASHWEBSITESCMSTEMPLATES
Templates
Blog
CustomServices
Search
FreeResources
Contact
FlashTutorials
Dreamweaver
Fireworks&
Photoshop
WebDesign
CSS
CorelDraw
&Resources
Tutorials
IllustratorTutorials
Tutorials
Tutorials&Resources
Tutorials
Tutorials
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
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