Der CSS Code der Homepage stellt sich wie folgt dar:

@charset "utf-8";
/* CSS Document */

/* =======================================
 ALLGEMEINER BEREICH
======================================= */

*{
    font-family: Verdana, Arial, "Arial Black", sans-serife;
    font-size: 100%;
}

:link {
    color: #303030;
}

:visited :hover {
    color: #888888;
}

h1 {font-size: 140%;
    color: #B60F80;
    margin: 0;

}

h6 {
    font-size: 120%;
    color: #B60F80;
    margin: 0;
}
   
#wrapper {
    width: 100%;
    height: 100%;
    background-color: #F7F7F7;
}

header {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

/* =======================================
 MENÜ BEREICH
======================================= */

nav {
    background-color: #303030;
    border: 1px solid #888888;
    border-radius: 4px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    color: #888;
    display: block;
    margin-top: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

nav a:link{color: #888888;
}

  nav ul {
    margin: 0;
    padding: 0;
  }

    nav ul li {
      display: inline-block;
      list-style-type: none;
     
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -ms-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
    }
     
      nav > ul > li > a > .caret {
        border-top: 4px solid #aaa;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        content: "";
        display: inline-block;
        height: 0;
        width: 0;
        vertical-align: middle;
 
        -webkit-transition: color 0.1s linear;
         -moz-transition: color 0.1s linear;
           -o-transition: color 0.1s linear;
        transition: color 0.1s linear;
      }

      nav > ul > li > a {
        color: #888888;
        display: block;
        line-height: 56px;
        padding: 0 24px;
        text-decoration: none;
      }
         
        nav > ul > li:hover {
            background-color: #B6B6B6;
        }

        nav > ul > li:hover > a {
            color: #888888;
        }

        nav > ul > li:hover > a > .caret {
            border-top-color: #888888;
        }
       
        nav ul li img {
            float: left;
            width: 16px;
            height: 16px;
            margin: 14px 5px;
            padding: 6px;
            background: #888;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            border-radius: 25px;
            -webkit-transition: all .5s ease-in-out;
            -moz-transition: all .5s ease-in-out;
            -o-transition: all .5s ease-in-out;
            -ms-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
        }
   
      nav > ul > li > div {
            background-color: #B6B6B6;
            border-top: 0;
            border-radius: 0 0 4px 4px;
            box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
            display: none;
            margin: 0;
            opacity: 0;
            position: absolute;
            width: 157px;
            visibility: hidden;
            z-index: 100;
            -webkit-transiton: opacity 0.2s;
            -moz-transition: opacity 0.2s;
            -ms-transition: opacity 0.2s;
            -o-transition: opacity 0.2s;
            -transition: opacity 0.2s;
      }

        nav > ul > li:hover > div {
          display: block;
          opacity: 1;
          visibility: visible;
        }
       
          nav > ul > li > div ul > li {
            display: block;
          }

            nav > ul > li > div ul > li > a {
                color: #888888;
                display: block;
                padding: 12px 24px;
                text-decoration: none;
            }

              nav > ul > li > div ul > li:hover > a {
                background-color: #B6B6B6;
              }
   
    nav #current img {
    background-color: #B60F80;
    }
   
/* =======================================
 CONTENT BEREICH
======================================= */
   
.content-index {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    height: 660px;
    border: 1px solid #888888;
    border-radius: 4px;
    background-image: url(images/index/bike-content.jpg);   
}

.content-index #index{
    width: 300px;
    height: auto;
    margin-right: 20px;
    margin-top: 30px;
    line-height: 2;
    float: right;
    text-align: center;   
}

        .content {
            width: 800px;
            height: auto;
            margin-right: auto;
            margin-left: auto;
            border: 1px solid #888888;
            border-radius: 4px;
            background-color: #DEDEDE;
        }

.content #uebermich-foto {
    width: 300px;
    height: auto;
    float: right;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 10px;
}

.content #uebermich-text {line-height: 1.5;}

        #box {
            padding-top: 20px;
            padding-bottom: 20px;
        }
       
        #ueberschrift {margin-top: 30px;
                       margin-left: 30px;
        }
       
.content #touren {
    width: 800px;
    line-height: 1.5;
    text-align: center;
    margin-top: 30px;
    height: auto;
}

.content #touren #touren-tour1 {
    width: 150px;
    height: auto;
    margin-top: 10px;
    margin-right: 20px;
    border: 1px solid #888888;
    border-radius: 4px;
    text-decoration: none;
    padding:10px;
}

.content #touren #touren-tour2 {
    width: 150px;
    height: auto;
    margin-top: 10px;
    border: 1px solid #888888;
    border-radius: 4px;   
    padding: 10px;
    text-decoration: none;
}

.content #touren #tour {
    text-align: left;
}

.content #touren #tour-tobecontinued {
    text-align: center;
    font-size: 200%;
    margin-top: 100px;
    margin-bottom: 100px;
    font-weight: bold;
}

.content #galerie {
    width: 800px;
    line-height: 1.5;
    text-align: center;
    margin-top: 30px;
    height: auto;
}

.content #galerie #galerie-links {
    width: 150px;
    height: auto;
    margin-top: 10px;
    margin-right: 20px;
    border: 1px solid #888888;
    border-radius: 4px;
    text-decoration: none;
    padding:10px;
}

.content #galerie #galerie-rechts {
    width: 150px;
    height: auto;
    margin-top: 10px;
    border: 1px solid #888888;
    border-radius: 4px;
    text-decoration: none;
    padding:10px;   
}

.content .video {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
}

.content #kontakt { margin-top: 20px;
                    margin-left: 20px;
}

.content #kontakt #text {
    width: 350px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

.content #kontakt #kontakt-eingabe {margin-left: 30px;
}

.content #kontakt #eingabefeld1{
    width: 200px;
    height: 30px;
    border: thin solid #000000;
}

.content #kontakt #eingabefeld2 {    width: 320px;
                                    height: 150px;
                                    border: thin solid #000000;
}

.content #copyright {font-size: 80%;
                     margin-top: 30px;
}

footer {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #888888;
    border-radius: 4px;
    margin-top: 8px;
    text-align: center;
    background-color: #DEDEDE;
}

/* =======================================
 GALERIE BEREICH
======================================= */

.slider {box-shadow: inset 0 0 2px hsla(0,0%,0%,.2),
                0 3px 1px hsla(0,0%,100%,.75),
                0 -1px 1px 2px hsla(0,0%,0%,.1);
    width: 500px;                   
    height: 350px;                               
    margin-right: auto;
    margin-left: auto;               
    margin-top: 80px;                 
    margin-bottom: 80px;
    padding: .5em;
    background-color: #DEDEDE;       
}
   
.slider:before {box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.2),
                inset 0 -2px 1px hsla(0,0%,0%,.4),
                0 5px 50px hsla(0,0%,0%,.25),
                0 20px 20px -15px hsla(0,0%,0%,.2),
                0 30px 20px -15px hsla(0,0%,0%,.15),
                0 40px 20px -15px hsla(0,0%,0%,.1);
    background-color: #DEDEDE;                 
    content: '';
    z-index: -1;
    margin-right: auto;                                           
    margin-left: auto;                       
    margin-top: 50px;                       
}

.slider li {
    box-shadow: 0 -1px 0 2px hsla(0,0%,0%,.03);
    list-style: none;
    position: absolute;
}

.slider input {display: none;}

.slider label {
    background-color: #111;
    border: .2em solid transparent;
    bottom: .5em;
    border-radius: 100%;
    cursor: pointer;
    display: block;
    height: .5em;
    left: 24em;
    opacity: 0;
    position: absolute;
    transition: .25s;
    width: .5em;
    visibility: hidden;
    z-index: 10;
}

.slider label:after {
    border-radius: 100%;
    bottom: -.2em;
    box-shadow: inset 0 0 0 .2em #111,
                inset 0 2px 2px #000,
                0 1px 1px hsla(0,0%,100%,.25);
    content: '';
    left: -.2em;
    position: absolute;
    right: -.2em;
    top: -.2em;
}

.slider:hover label {
    opacity: 1;
    visibility: visible;
}

.slider input:checked + label {background-color: #B60F80;}

.slider:hover li:nth-child(1) label {left: .5em;}

.slider:hover li:nth-child(2) label {left: 2em;}

.slider:hover li:nth-child(3) label {left: 3.5em;}

.slider:hover li:nth-child(4) label {left: 5em;}

.slider img {
    height: 350px;
    opacity: 0;
    transition: .25s;
    width: 500px;
    vertical-align: top;
    visibility: hidden;
}

.slider li input:checked ~ img {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

/* =======================================
 MEDIA QUERIES BEREICH
======================================= */

@media only screen
and (min-width:320px)
and (max-width:480px) {
*{font-size: 95%;}
header img {width:320px;}
header {width:320px;}   
nav {width:320px;}
.content {width:320px;}
.content-index {width: 320px;
                height: 300px;
                background-size: 320px 320px;
                padding-bottom: 20px;}
.content-index #index{margin-top: 0px;}
.content #touren #tour-tobecontinued {width:320px;
                                      margin-top: 50px;
                                      margin-bottom: 50px;}
.content #touren {width: 320px;}
.content #galerie {width: 320px;}
.slider {width:280px;
         height:186px;}
.slider:before{margin-top: auto;
               margin-bottom: auto;}
.slider img {width:280px;
             height:186px;}
.content #kontakt #text{width: 200px;}
.content #kontakt #eingabefeld2 {width: 200px;}
footer {width:320px;}
}
   
   

Im ersten Teil des CSS wurden allgemeine Informationen für das CSS festgelegt.

Im nästen Bereich wird das Menü mit samt den eingebundenen Icons formatiert. Die Farbe der Icons wird mit Hilfe der Hintergrundfarbe verändert, da die transparenten Icons in die HTML Datei eingebunden wurden.

Die unterschiedlichen Anforderungen an den Content Bereich werden als nächstes festgelegt. Der Content Bereich variiert von Seite zu Seite und somit sind auch unterschiedliche Anforderungen an das CSS gestellt.

Als vorletztes wird der Galerie Bereich formatiert.

Im letztn Abschnitt werden die Anforderungen an das CSS festgelegt falls die Homepage auf Samrtphones aufgerufen wird.

Weitere Links zu diesem Thema:

Webdesign - Grundgerüst

Webdesign - HTML Code