Simplyfy your CSS – oder Überblick in der style.css

Ordnung in der Style.css - im Cascading Style Sheet oder in den Cascading Style Sheets - hilft auf nichts zu vergessen und ermöglicht es ein und dieselbe Style.css öfter zu verwenden. Hier erkläre ich meine Art ein CSS aufzubauen und biete eine Muster CSS und Muster XHTML Seite als download an.

Um sich das Leben als WebDesigner so einfach wie möglich zu machen, ist es unumgänglich sich an Ordnung zu gewöhnen. Jede Webseite hat ihre Ordnung / ihre Struktur. Diese Struktur zu vereinfachen ermöglicht CSS. Es nutzt aber die einfachste Struktur mittels XHTML nichts, wenn dann die benötigte Style.css ungeordnet oder unübersichtlich angelegt ist.

Struktur einer Webseite
Webseite und CSS Ordnung

Jeder WebDesigner hat “seine” Ordnung in der Style.css. Ich stelle hier die meine vor und erkläre auch wieso ich diese Art des Überblicks in einer Style.css gerne mag und dann auch nichts dabei vergesse. Am Schluss des Artikels gibt es eine Muster Style.css und die dazugehörige XHTML Struktur als Download für jeden der mag. Erklärungen warum was wann wieso so und nicht anders gestaltet wurde, gebe ich in diesem Artikel jedoch nicht durchgängig.

Der Screenshot zeigt ein klassisches zweispaltiges Layout. Oben die Navigation, dann der Inhalt /content rechts daneben das Menü oder die Sidebar und unten die Fußzeile oder den Footer.

Struktur der Webseite im Cascading Style Sheet übernehmen

Für mich hat es sich bewährt, wenn ich mit der Stuktur in der Style.css anfange und mir selber eine Erinnerungsstütze am Anfang einbaue.

Dies sieht dann so aus:

/* 
muster style zweispaltiges layout flexible breit
author: mts
author uri:http://www.webdesign-in.de/
*/
html {	margin: 0, padding: 0;}
body {}
li {	}
/*--structure two columns flexible width for ie css between html head --*/
.navaussen {}
.postaussen {}
.footeraussen {}
.navinnen,.postinnen,  .footerinnen {	}
.clear {}
/*--content--*/
.content {}
/*--sidebar--*/
.sidebar {}

Achtung: Wie ich diese Struktur gestaltet habe steht in der Muster Style.css drin. Hier würde es den Rahmen der Lesbarkeit sprengen.

Zwischen Schrägstrich und Stern stehen Kommentare in einer Style.css. Die ermöglichen, dass man schnell was findet und strukturieren gut. Ich nutze sie gerne, aber nicht im Übermaß. So wie ich gerne Schubladen nutze, aber dennoch nicht jedes Wäschestück einzeln seine Schublade hat. ;)

Html und body werden gerne und oft als Gestaltungselement vergessen. Nutzt man die, kann man sich ziemlich häufig ein weiteres Div ersparen.

Browservorgaben zurückstellen

Die Listenelemente (li) mag ich anders gestalten als von den Browsern vorgegeben, daher stelle ich sie zurück. Genauso mit margin, padding, das erspart einem dies jedes Mal zu wiederholen. Wer sich mehr mit den Browservorgaben beschäftigen mag den verweise ich gerne zu Erich Meyerweb. Er hat fast alle XHTML Elemente zurückgestellt Reset Reloaded. Dies ermöglicht bei der Gestaltung mehr, doch sollte man dann CSS ziemlich gut können.

All over the world oder HTML Tags der Reihe nach aufzählen

Welcher WebDesigner hat nicht schon mal auf den HTML Tag i oder em vergessen. Und – ach ja -select und caption gibt es ja auch.

Damit mir dies nicht zuoft passiert ;) zähle ich die häufigst gebrauchten HTML Tags einfach auf. Dies sieht in meiner Style.css dann so aus:

/*--all over the world--*/
html, body {	font: 0.9em/1.4em "Gill Sans MT", "Gill sans", "Trebuchet ms", sans-serif;}
h1 {}
h2 {}
h3 {}
usw... alle anderen im Musterdownload

Ich vergebe eine generelle Schriftgröße, generellen Linienabstand und gib dann die Schriften an. Dies gilt solange, solange ich bei einem Element nichts anderes definiere. Erspart Arbeit und ständig dran denken.

Links – die Verweise – gleich gestalten

Ein Besucher findet relativ rasch das System einer Webseite heraus, wenn sie eines hat. Daher sollten die Links als solche erkennbar sein. Ausnahmen sollten auch einem System folgen. So definiere ich zuerst für alle Links (a) und wenn nötig Ausnahmen extra.

/*--for all links--*/
a {}
a:link {}
a:visited {}
a:link:focus {}
a:link:hover {}
a:visited:hover {}
a:link:active {}
a:visited:active {}

Bilder als Links

Genauso gehe ich vor, wenn es daran geht Bilder als Links zu gestalten.

/*--images as a link--*/
a img {}
a:link img {}
a:visited img {}
a:link:active img, a:visited:active img {}

Farbe, Überschriften, Schriftgröße, Listen und mehr geben.

Dem Inhalt (content) der Sidebar und dem Footer einzeln aufzählen und dabei einiges an Gestaltungsmöglichkeiten vorgeben.

/*--lists headlines colors images  content--*/
.content ol {}
.content ol li {}
.content  ul {}
.content ul li {}
.content img {}
.content h3 {}
/*--lists fonts colors images headlines sidebar--*/
.sidebar {}
.sidebar p {}
.sidebar ul {}
.sidebar ul ul {}
.sidebar ul li {}
.sidebar ul li ul li {}
.sidebar ul li img {}
.sidebar ul li ul li img {}
.sidebar ul li a img {}
.sidebar ul li ul li a img {}
.sidebar ul li h3 {}
/*--lists fonts colors images headlines footer--*/
.footerinnen {}
.footerinnen p {}
.footerinnen img {}
.footerinnen a img {}
.footerinnen ul {}
.footerinnen ul li {}
.footerinnen ul li h3 {}

Necessary – das meist auch noch nötige einzeln aufzählen

Irgendwann vergibt man eine class left, center, right, oder braucht eine Navigation.

/*--necessary--*/
.navigate {}
.left {}
.right {}
.center {}
img .left {}
img .right {}
img .center {}

Mit dieser Struktur in meiner Style.css vergesse ich eben so schnell nichts und ich habe genug Möglichkeiten die Gestaltung auszubauen indem ich die Cascade der Cascading Style Sheets ausnutze. :zwinker:

weiterführende Links zu CSS

Muster style.css und Muster index.html
Download eine Schachtel mit dem Pfeil nach unten
Donwload bei Klick auf die Schachtel
Viel Spaß und Freude damit ,mts


Basis Know-how CSS
InternetmarketingInternetmarketing Buchempfehlung

Top

4Kommentare zu : Simplyfy your CSS – oder Überblick in der style.css

3 Kommentare
  1. 1

    Warum benutzt du nur Klassen und keine IDs, obwohl die Sidebar etc. einmalig ist?

  2. Autor mts von WebDesign-in.de mts
    2

    Hallo gute Frage,
    navaussen, postaussen und footeraussen sind -wenn wer mag wiederholdbar bei dem Layout – sie sind ja auch gleich und man könnt sie gleich benennen ;)

    genauso die Sidebar – wenn dies jemand wirklich niemals wiederholt kann er aus navaussen, postaussen und footeraussen und sidebar eine ID machen

    dann sind die HTML Klassen für sein Layout semantisch richtig,…aber bekommt man ein vorgegebenes HTML (zb von einem CMS) kann man dies oft nicht beeinflussen

  3. 3

    Nettes Style-Sheet.. Sind die pseudo-classes “a:visited:hover” eigentlich IE 6 tauglich?

1 Trackback
  1. Ein WordPress Theme entsteht, [ 25.10.08 um 19:14 ] [...] ist die style.css auch gleich dabei. Diese Mustervorlage nehme ich für dieses Beispiel um das XHTML Grundgerüst zu [...]
  2. Tweets
Deine Meinung
... zum Thema
Name und E-mail sind nötig


WebDesign Angebot

mein Angebot

Ich biete benutzerfreundliches, barrierefreies WebDesign und InternetMarketing, denn was nützt die schönste Homepage, wenn sie keiner findet. Schalk und Support ist inclusive.
Kontakten Sie mich einfach » E-Mail

InternetMarketing Angebot

Mieten Sie meine Kreativität

Ich habe jede Menge Idee und Können, wie man auch ihren Shop, ihre Homepage und ihr Business im Internet bekannt macht.
Kontakten Sie mich einfach » E-Mail

WebDesign Preise

Preise by mts

Professionelles WebDesign ist eine Investition. Billig und günstig sind andere ..ich bin gut und bezahlbar.
Kontakten Sie mich einfach » E-Mail


Achtung: Sie haben JavaScripts und/oder CSS deaktiviert. Sie können diese Inhalte nutzen, einiges an Funktionen steht jedoch nicht zur Verfügung.

Zu den Inhalten springen

« zurück

vor »

  • WebDesign Icon

    WebDesign

    WebDesign ist mehr als Grafik- und Printdesign. WebDesign und Website Marketing sind Geschwister. Rund um WebDesign.
  • WebDesign Tutorials Icon

    WebDesign Tutorial

    Kein WebDesigner fällt vom Himmel. Mal ein Online Shop, mal Community, mal Web 2.0 social Media oder Wiki. Erfahrungen uvm.
  • CSS Icon

    CSS

    Ich habe zig CSS Beispiele, Erkenntnisse irgendwo auf der Festplatte meines PCs und Gehirns. Ich gebe diese gern weiter :-).
  • InternetMarkering Icon

    InternetMarketing

    Wie verkauft man im WWW unter Ausnutzung der SUMAs, der Social Media Dienste. Internet Marketing Praxis uvm..
    und Website Promotion
  • SEO Icon

    SEO

    SEO ist weder Geheimwissen noch 0815 Tätigkeit, - schlicht notwendig für den Erfolg im WWW. Meine Erfahrung mit SEO.
  • Internet Recht Icon

    Internet Recht

    Was tun bei Abmahnungen. Rechtsfallen sind u.a. free Download, Fotos, Marken, Forum, Kommentare. Wo gibt es Hilfe.
  • Schokolade Icon

    ..und außerdem ...

    mein Blog | mein Netzwerk | barrierefreies WebDesign | Usability im WebDesign | Net-Lexikon | WordPress Themes

©  2004 - 2010Professional Webdesign barrierefrei auf WebDesign-in.de, ImpressumImpressum Lizenz||Top