CSS - Cascading StyleSheets. Tips, info, redskaber og links om CSS

Lær at bruge CSS (typografiark)
Danske sider :	HTML.dk god CSS Turtorial! css forum hos kandu.dk Facts om CSS @begynder Koder til css og stylesheets. activedeveloper.dk - Artikler/hjælp/info
På engelsk :	Cascading Style Sheets W3C world wide web JavaScript Kit (CSS tutorials) Web Developers WebsiteTips About.com - flere gode links Index D O T CSS The Advanced CSS Reference
(Links til andre hjemmesider åbner i nyt vindue)
Andre links:
Artikler og emner:	Drop tabeller til layout : Citat: "Tabeller til layout burde efterhånden være en saga blot. Det er desværre bare ikke tilfældet. I denne artikel ridser vi kort fordelene ved CSS-design op, og giver et eksempel på, hvordan et CSS-design kan skabes." Læs mere: www.html.dk/artikler/00043/ Hvorfor tabeller er tåbelige til layout. Se siden: www.stylesheets.dk
Tips og tricks: på Teknik og Sjov:	webdesign101.dk CSS popop uden JavaScript Design knapper med CSS 3D tekst med CSS Printvenlige sider med CSS Style Sheet Skifter Runde hjørner med css: www.pcfreek.dk/?p=271 www.webdesign101.dk/css/roundcorners/ Filtre (virker ikke i Mozilla): CSS filer Examples CSS Visual Filters Gennemsigtigt billede (Min html huskeliste) Kanter/borders (Min html huskeliste) Menu med css (Nederst) Menu med linksbeskivelse ved mouse over Tonet baggrund med repeat-y og -x Fikseret bundbjælke med <div> Scroll på et område med <div> og forklaring af 'div' Forum - spørgsmål om html, css, webdesign generelt samt grafik og programmer
Far ver på scroll bar med CSS: http://www.websitetips.com (Engelsk) Giv dine scroll bars nye farver med CSS
Hvis disse links ikke virker, så vær sød at give mig besked!
Se mit allerførste forsøg med info og stylesheet HER
Værktøj/redskaber:
Du kan fint bruge Notesblok eller lign. til at skrive dine stylesheets! Du skal bare gemme dem som .css filer. På min side Om Webdesign er der gode links til gratis programmer. Eller du kan finde en html editor HER eller HER (Se evt også under Computer ting \| Hard&Software. Der er også gode links til at finde gratis programmer.) Jeg har i lang tid selv brugt: Stone's Text Tool - til at lave både css og html dokumenter. Siden foråret 2003 har jeg brugt HTML-Kit til begge dele. Med dette er du langt. Man behøver ikke meget for at lave hjemmesider, og med css kan man være kreativ - og lave smarte layouts - uden brug af avancerede programmer. Stylesheet er nærmest uundværligt, når du først har lært det. Hjælp til farvekoder: Download evt. også "Html Paint brush". Til at præcisere farver. (Zip 199 KB) Programmet skriver html koden for dig, men det er ikke xhtml standard. Det kan dog lave koden på alle farver. Du kan også finde RGB eller hex-koder på alle farver overalt på din skærm med dette lille program der hedder "Eyedropper": Download HER (Zip 120 KB) Programmet lægger sig i status baren, og du skal højreklikke på ikonet for at slå til og fra. Her på Teknik og Sjov: Find farven og kopier hex-koden (IE) Du kan også finde en fortegnelse over websikre farvekoder (hex-code) på min side HER. (Nyt vindue) Om websikre farver: her

Validering

Vil du validere dine stylesheets, så kan du gøre det via W3C CSS Validation Service
HTML.dk Om validering

Til top

Artikler på Teknik og Sjov - en oversigt

Menuer med css

(Se evt. også linket "Design knapper med CSS" her ovenover)

Her er et eksempel på, hvordan du kan lave en menu med brug af css.

KLIK HER

Det der sker er blandt andet, at cellen skifter farve ved mouse over.
Du kan også få det til at ligne knapper ved at lave border og background, hvis du ønsker det.

Håber dette kan give dig nogle ideer til hvad man kan gøre.
Vil du vide mere, så prøv evt. nogle af de links der er på denne side til "Lær at bruge css"

Der er nogle links til css menuer her: teknikogsjov/webdesign/scripts/scripts.asp#menu

Du refererer til dit stylesheet ved at indsætte dette link i <head> sektionen:
<link rel="stylesheet" type="text/css" href="stylesheet.css" />

Tonet baggrund.

Jeg vil her beskrive, hvordan du kan lave en baggrund, der er tonet fra mørk til lys - fra venstre mod højre eller fra oven og ned.

Jeg vælger fra venstre mod højre i dette eksempel.

Først skal du lave et billede. Det behøver kun at være nogle få pixels højt og det må ikke være breddere end et lile skærmvindue, for så kommer der scrolls for neden. Du må også gerne bruge dette billede:

baggr-gray (1K)

Du skal notere præcis hvad farven helt til højre i billedet er for en.
I dette tilfælde hedder den #e9e9e9. Dette skal anføres som background-color.
Dernæst skal billedet sættes ind. Det gør du ved at angive stien til dit billede med background-image.
Fidusen er nu at få billet til at gentage sig i en lang række nedefter, men ikke over hele skærmen. Dette gør du ved at sætte background-repeat til: repeat-y. (y står for vertikalt og x for horisiontalt).

Altså, her er hvad der skal stå i dit stylesheet:

body {
  background-color: #e9e9e9;
  background-image: url( "baggr-gray.gif");
  background-repeat: repeat-y;
}

Du kan selvfølgelig også sætte et ensfarvet billede ind - i en anden farve end baggrunden - eller måske et mønster....

Hvis du vil have det ind foroven i stedet for i venstre side, så skal du bruge repeat-x, og dit billede skal i stedet stå på højkant:


     Det er faktisk meget simpelt og der er mange designmuligheder i det.

     Vil du se sider, hvor dette er brugt så klik her
     Eller se denne hjemmeside.

Cascading Stylesheets (CSS)