Stap 1: De CSS
* {marge: 0; padding: 0}
img, fieldset {border: geen}
: focus {overzicht: geen}
lichaam {lettertype-familie: Arial; lettertype-grootte: 12px; background: #-d1dde1}
.wrapper {breedte: 994px; marge: 0 auto}
/**************************************Header****************************************/
koptekst {breedte: 100%, float: left; url: achtergrond (.. / images/header_bg.jpg) herhalen-x 0 0; min-width: 994px}
koptekst #logo {float: left; marge: 2px 0 0 0}
kop .num {float: recht; lettertype-grootte: 42px; lijn-hoogte: 35px; kleur: #6aae0f; url: achtergrond (.. / images/phone_img.png) neen-repeat 0 8px; opvulling: 0 0 0 55px; hoogte: 60px; lettertype-familie: Georgië; lettertype-stijl: cursief}
kop .num span {float: left; margin-top: 22px}
/***********************************Navigation Bar*************************************/
NAV {breedte: 100%, float: left; achtergrond: #136589; marge: 25px 0; text-align: center}
NAV ul {breedte: auto; lijst-style: none;}
NAV ul li {display: inline-block; marge-rechts: 30px positie: relatief; padding: 15px 0}
NAV ul li een {display: block; text-decoration: none; lettertype-grootte: 14px; lijn-hoogte: 12px; kleur: #fff; lettertype-familie: 'AvantGarde-Demi'; text-transform: hoofdletters; padding-links: 10px}
NAV ul li.active een {kleur: #f8db54; url: achtergrond (.. /images/nav_hover.jpg) neen-repeat 0 3px}
NAV ul li een: hover {kleur: #f8db54; url: achtergrond (.. / images/nav_hover.jpg) neen-repeat 0 3px; }
/ *** Links Banner Container *** /
#banner_container {float: left; breedte: 100%;}
#banner_container .left_banner {float: left breedte: 443px hoogte: 266px; url: achtergrond (.. / images/left_bg.jpg) neen-repeat 0 0; opvulling: 37px 26px 0px 26px;}
#banner_container .left_banner h2 {lettertype-grootte: 38px; lijn-hoogte: 40px; kleur: #c5df57; lettertype-familie: Georgië; text-align: centreren; text-transform: hoofdletters; padding-bodem: 35px; lettertype-weight: normal;}
#banner_container .left_banner p {lettertype-grootte: 21px; lijn-hoogte: 30px; kleur: #2d2d2d; lettertype-familie: 'MyriadPro-regelmatige'; lettertype-stijl: cursief;}
/***********************************HTML5 Slider**************************************/
#banner_container .slider_container {breedte: 495px, float: left; positie: relatieve}
#banner_container .slider_container .slider {float: left; breedte: 495px;}
#banner_container .slider_container .left_arrow {url: achtergrond, positie: absoluut; boven: 134px; links: 10px (.. / images/left_arrow.png) neen-repeat 0 0; breedte: 37px; hoogte: 36px; z-index: 5}
#banner_container .slider_container .right_arrow {positie: absoluut, boven: 134px, rechts: 10px; url: achtergrond (.. / images/right_arrow.png) neen-repeat 0 0; breedte: 37px; hoogte: 36px; z-index: 5}
#banner_container .slider_container .slider .slide_content {breedte: auto, float: left; positie: relatief;}
#banner_container .slider_container .slider .slide_content img {float: left}
#banner_container .slider_container .slider .slide_content .text_line {positie: absoluut; links: 0, onder: 0; url: achtergrond (.. / images/text_bg.png) herhaal 0 0; lettertype-grootte: 13px; lijn-hoogte: 13px; lettertype-familie: 'MyriadPro-regelmatige'; opvulling: 7px 10px}
/ *** Hoofdmacht tekst Container *** /
#body_container {breedte: 994px, float: left; achtergrond: #fff; margin-top: 5px}
#top_section {breedte: 960px, float: left; padding: 30px 17px 15px 17px}
#top_section h2 {lettertype-grootte: 30px; lijn-hoogte: 20px; kleur: #484747; lettertype-familie: 'MyriadPro-regelmatige'; padding: 0 0 17px 0; font-weight: normal; text-transform: hoofdletters}
#top_section h2 span {kleur: #-80b439}
#top_section p {lettertype-grootte: 16px; lijn-hoogte: 20px; kleur: #484747; lettertype-familie: 'MyriadPro-regelmatige'; padding-bottom: 15px}
#top_section .van_img {float: recht; marge: 0 0 0 11px}
#top_section .house_img {float: left; marge: 0 15px 0 0}
/ *** Getuigenis & Contact Container *** /
#bottom_container {breedte: 994px, float: left; achtergrond: #d1dde1; padding: 25px 0 0 0}
#bottom_container .common_box {breedte: 237px, float: left; marge-rechts: 52px}
#bottom_container. common_box.second {breedte: 260px;}
#bottom_container .common_box h3 {lettertype-grootte: 18px; lijn-hoogte: 14px; kleur: #27a9e1; lettertype-familie: 'Avante'; padding-bottom: 12px}
#bottom_container .common_box p {lettertype-grootte: 12px; lijn-hoogte: 18px; kleur: #136589; lettertype-familie: "MyriadPro-regelmatige";}
#bottom_container .common_box p.last {kleur: #-27a9e1}
#bottom_container .common_box .name {float: recht; text-decoration: none; font-grootte: 12px; lijn-hoogte: 18px; kleur: #27a9e1; margin-top: 27px}
#bottom_container .common_box .contact {float: links, breedte: 100%; lijst-stijl: none; padding: 10px 0 0 0}
#bottom_container .common_box .contact li {breedte: 100%, float: left; lettertype-grootte: 12px; lijn-hoogte: 18px; kleur: #27a9e1}
#bottom_container .common_box .contact li een {float: left; text-decoration: none; kleur: #-27a9e1}
#bottom_container .common_box .contact li een: hover {tekst-decoratie: onderstreping}
#bottom_container .common_box .contact li span {float: left; kleur: #2d2d2d; breedte: 72px}
/**************************************Footer*****************************************/
voettekst {breedte: 100%, float: left; url: achtergrond (.. / images/footer_bg.jpg) herhalen-x 0 0 #d1dde1; margin-top: 30px; min-width: 994px}
#menu {breedte: 100%, float: left; lettertype-grootte: 10px; lijn-hoogte: 10px; lettertype-familie: 'MyriadPro-regelmatige'; text-transform: hoofdletters}
#menu .footer_nav {breedte: auto, float: left; lijst-stijl: none; padding: 13px 0 14px 16px}
#menu .footer_nav li {float: left; marge-rechts: 20px}
#menu .footer_nav li een {float: left; text-decoration: none; kleur: #FFF; }
#menu .footer_nav li een: hover {kleur: #-f3d508}
#menu .footer_nav li.active een {kleur: #-f3d508}
/*********************************Footer Social Icons***********************************/
#menu .social_icon {breedte: auto, float: recht; lijst-stijl: geen}
#menu .social_icon li {float: left; marge-rechts: 20px}
#menu .social_icon li.last {marge-rechts: 0}
#menu .social_icon li .facebook {float: left breedte: 36px hoogte: 36px; url: achtergrond (.. /images/Facebook.png) neen-repeat 0 0}
#menu .social_icon li .facebook:hover {url: achtergrond (.. /images/Facebook.png) neen-repeat 0 - 36px}
#menu .social_icon li .google {float: left breedte: 36px hoogte: 36px; url: achtergrond (.. /images/google_plus.png) neen-repeat 0 0}
#menu .social_icon li .google:hover {url: achtergrond (.. /images/google_plus.png) neen-repeat 0 - 36px}
#menu .social_icon li .twitter {float: left breedte: 36px hoogte: 36px; url: achtergrond (.. /images/Twitter.png) neen-repeat 0 0}
#menu .social_icon li .twitter:hover {url: achtergrond (.. /images/Twitter.png) neen-repeat 0 - 36px}
/**********************************End Footer Text*************************************/
voettekst .bottom_nav {float: left; lijst-style: none;}
voettekst .bottom_nav li {float: left; lettertype-grootte: 10px; lijn-hoogte: 30px; lettertype-familie: 'MyriadPro-regelmatige'; kleur: #27a9e1; opvulling: 0 8px; achtergrond: url (.. /images/li_bg.jpg) neen-repeat juiste 9px}
voettekst .bottom_nav li.first {padding-links: 16px}
voettekst .bottom_nav li.last {achtergrond: geen}
voettekst .bottom_nav li een {float: left; text-decoration: none; kleur: #27a9e1;}
voettekst .bottom_nav li een: hover {tekst-decoratie: onderstreping}
/**************************************The End***************************************/
De standaardcode
* {marge: 0; padding: 0}
img, fieldset {border: geen}
: focus {overzicht: geen}
lichaam {lettertype-familie: Arial; lettertype-grootte: 12px; background: #-d1dde1}
.wrapper {breedte: 994px; marge: 0 auto}
Er zijn bepaalde codes die zijn zeer gemeenschappelijk, en gebruikte telkens die we schrijven een CSS-bestand, noemen we het ook als een standaardcode in CSS. En bovenstaande is niets meer dan de standaardcode, waar in de eerste regel we hebben gesteld de standaard marge en opvulling van onze lay-out naar nul of een 0 met behulp van de universele selector. In de tweede en derde lijn, wij hebben de grens voor afbeeldingen en FIELDSET-(Formulierinvoer) ingesteld op geen, en focus op geen omtrek. Dit zal ervoor zorgen dat alle onze beelden blijven grens gratis, ongeacht welke browser van de gebruiker gebruikt om te surfen op de website. Hoewel wij elke vorm nog niet gemaakt, maar om aan de veiligere kant we dat in de standaardcode als voorzorgsmaatregel, schrijven zoals u kunnen in de contact pagina maken zou. Vervolgens in de vierde en vijfde regel, hebben wij de standaardlettertypefamilie-, tekengrootte en kleur van de achtergrond voor de hoofdtekst van de webpagina instellen, en ook de standaardbreedte van 994 pixels en marge van 0 auto voor het div-element met een soort wrapper instellen.
