CSS

Cascading Style Sheets (CSS)

Einbinden von CSS

CSS direkt in der HTML Seite

<style type="text/css">
h1 {color:maroon}
body {background: yellow}
</style>

Das link Tag

Das Link Tag muss im Header einer HTML Seite sein.

<link rel="stylesheet" type="text/css" href="blabla.css" media="all"/>

Das media Attribut kann folgende Werte aufweisen (nicht abschliessend): all, aural, braille, embossed, handheld, print, prjection, screen, tty, tv.

@import directive

Das Import Statement muss an erster Stelle innerhalb eines <style> Tags plaziert werden.

<style type="text/css">
@import url(sheet2.css); /* @import comes first */
h1 {color:maroon}
body {background: yellow}
</style>

Das media Attribut kann auch angegeben werden:

@import url(blabla.css) print

Direkt in den Elementen

<p style="color: red">A P</p>

Comments

Kommentare können wie folgt gemacht werden:

/*  mein Kommentar */

Selectors

Id Selectors

Id's dürfen in einem CSS nur einmal definiert werden!

#idsample { top: 100px; left: 5%; position: absolute; 	 color: black; } /* idsample ist der Identifier*/

Im HTML kann so auf Id's referenziert werden.

<div id=idsample>
bla bla
</div>

Class Selectors

Im CSS:

p.warning {font-weight: bold;}

Im HTML

<p class=warning>
bla bla
</p>

Andere Selektoren

* {color: red;} /*Universal selector*/
div * p {color: red;} /*Universal selector */
h1 h2 {color: red;} /*Type selector */
u > li {color: red;} /*Child selector */
table + p {color: red;} /*Adjacent sibling selector */
p.mystyle {color: red;} /*Class selector */
h1#myid {color: red;} /*Id selector */

p[class] {color: red;} /*Presence of an attribute selector,

*/

a[rel="Home"] {color: red;} /*Attribute value selector */
a[rel~="ome"] {color: red;} /*Partial attribute value selector */

CSS Samples

Menu

Im HTML:

<div>
   <!-- Menu ist auf der linken Seite -->
   <div id="menu">
     <a href="${request.contextPath}/faces/dreamcar/postrequestforparts.xhtml">post request for parts</a>
   </div>

   <!-- Conent auf der rechten Seite -->
   <div>
      Conent
   </div>
</div>

Im Css:

#menu {
 float: left;
 padding-right: 40px;
}

Resourcen

• http://www.freecsstemplates.org/
• http://www.w3schools.com/cssref/default.asp