CSS (1/4)

   

Zoek eerst eens op het net en check de definitie van CSS. Zie ook w3schools voor heel veel info over CSS.

Je geeft met CSS eigenschappen aan 'bouwblokken' (tags: div/p/span/etc) waarmee je je site op bouwt. Je kunt classes en ID's toekennen aan tags waarmee je eigenschappen aan een tag kunt koppelen.

Ik heb al op w3schools een deel van die tutorial doorgelezen.
Maar ik snap het nog niet precies.

Vandaar die vraag van mij. Maar klopt het nou wel of niet wat ik dacht?

Met CSS kun je in hoge mate de weergave van je pagina bepalen en kun je effecten bereiken die met HTML tags alleen niet mogelijk zijn. Zo kun je bijvoorbeeld bepalen dat alle tags 18 Points groot moet zijn in de kleur rood en met het lettertype Arial.

Het is dus veel flexibeler dan HTML wat de vormgeving betreft.
CSS stelt je in staat om alle stijlelementen van een website in een document onder te brengen. Dat wil zeggen dat je maar een document hoeft te veranderen om alle pagina's van je site aan te passen. Wil je bijvoorbeeld de kleur van al je Headings veranderen of het lettertype dat je in je paragrafen gebruikt? Dan verander je het CSS document en alle pagina's nemen deze stijl dan over.

Met HTML zou je al deze wijzigingen in alle pagina's moeten aanbrengen, wat veel meer werk is. De pagina's van je site worden sneller doordat je veel minder code hoeft te gebruiken. Hierdoor wordt je site dus sneller om te laden.
CSS code is browser-vriendelijk. Het wordt ondersteund door browsers Internet Explorer 3 en hoger en Netscape 4 (gedeeltelijk) en hoger. Lagere browsers negeren CSS waardoor het daar niet voor problemen zorgt.

Poster: ccc
Dus het klopt niet wat ik dacht?

 

Wat jij dacht klopt wel je kan met CSS aangeven  waar iets moet komen te staan in absolute of resolute waarde. Je kan aan de hand van ID's (status namen o.i.d.) zeggen welk gedeelte van de CSS belangrijk is voor hem en dus ook waar die kan komen te staan!

Poster: ccc
Dus het klopt niet wat ik dacht?

 

Wat precies dacht je dan zelf? Dat je een naam aan een stijl/opmaak kunt geven is inderdaad correct. Maar met CSS kun je nog veel meer.

CSS is voor de opmaak, HTML is voor de inhoud. Zo zou je grofweg een scheiding kunnen maken.

Ik begrijp nu denk het verschil en hoe het werkt.

Is er misschien iemand die zo een css bestand heeft en dat ik kan vergelijken met een webpagina. Zodat ik kan zien wat zo'n css bestand doet als ik iets bepaalds invoer.
Zo heb ik mijzelf een aantal jaar terug ook html geleerd. Kijken naar andere pagina's, kijken wat het daar doet en dan zelf uitproberen.
Weet niet of mijn manier ook met css mogelijk is.

Je kunt met css je hele design maken als het moet. Een handige tool is trouwens topstyle pro. Iedere verandering in je css zie je daarin direct terug en het heeft css code completion voor als je even niet meer precies weet hoe het elementje ook weer werkte! succes

Poster: ccc
Ik begrijp nu denk het verschil en hoe het werkt.

Is er misschien iemand die zo een css bestand heeft en dat ik kan vergelijken met een webpagina. Zodat ik kan zien wat zo'n css bestand doet als ik iets bepaalds invoer.
Zo heb ik mijzelf een aantal jaar terug ook html geleerd. Kijken naar andere pagina's, kijken wat het daar doet en dan zelf uitproberen.
Weet niet of mijn manier ook met css mogelijk is.

 

AboutDJ.nl (mijn trots) en Vout.nl zijn 2 sites van mij die compleet met een CSS file gestyled zijn. In de template file staat bijvoorbeeld geen enkele tabel en alles word gepositioneerd door middel van de stylesheet (alleen Joomla gooit er jammer maar helaas wat tabellen in maar ach daar is wel overheen te komen).

CSS is in de basis vrij makkelijk, wil je echter wat complexere pagina's gaan bouwen dan wil het nog wel eens wat kopzorgen geven. AboutDJ bijvoorbeeld is een site die me behoorlijk wat tijd heeft gekost om alle cross browser proof te krijgen zonder daarvoor ranzige hacks te moeten gebruiken. Voordeel is wel dat het me een flinke besparing in de code opleverde, dus minder kb's dataverkeer is dus minder traffic.... helaas wel meer bezoekers gekregen dus ik slurp nog iedere maand een kleine 30gb aan dataverkeer bij mijn host weg

CSS heeft eigenlijk alleen maar voordelen en sinds IE7 er is is daar de CSS ondersteuning ook redelijk goed voor elkaar, hacks heb je dus steeds minder nodig om een site cross browser proof te krijgen. Gewoon zorgen dat je nette semantische HTML gebruikt en alles komt goed.

Handig als web design hulpje is overigens Firefox + webdevelopper toolbar. Source code + CSS bekijk je er erg makkelijk mee. Voor CSS design sites moet je eens kijken op cssvault.com, cssbeauty.com, cssdrive.com etc etc.

Niet te vergeten: CSS werkt samen met HTML. Je geeft in CSS eigenschappen aan elementen in HTML. Je hebt dus beide nodig om een pagina zichtbaar te maken.

Voorbeeld van onze Stylesheet, hij blinkt niet uit in perfectie, maar er wordt nog regelmatig mee gewerkt. Maar dan zie je wat er in een CSS file zit. Als je op de View Source in je browser klikt ziej e de HTML waaruit de pagina is opgebouwd. De eigenschappen worden dmv classes en ID's aangegeven.

<span class = 'red'>Test Tekst</span> in html geeft als output : Test Tekst

En zo kun je echt alles doen: vakjes maken, kolommen etc.

Poster: Lead
hij blinkt niet uit in perfectie

 

Volgens mij alleen een beetje lomp groot geschreven maar dat houd het ook overzichtelijk en de paar kb die je bespaard met het schrijven van shorthand css code is ok te verwaarlozen.... dus eigenlijk is ie prima voor zover ik kan zien.

Ik heb meer beroerdere sites gezien dan betere zullen we maar zeggen

Poster: Reind
Handig als web design hulpje is overigens Firefox + webdevelopper toolbar. Source code + CSS bekijk je er erg makkelijk mee. Voor CSS design sites moet je eens kijken op cssvault.com, cssbeauty.com, cssdrive.com etc etc.

 

Ik gebruik eigenlijk altijd IE, maar ik zal voor de verandering Firefox eens downloaden.
Vanmiddag probeer ik even of het lukt.

Poster: Lead
Voorbeeld van onze Stylesheet, hij blinkt niet uit in perfectie, maar er wordt nog regelmatig mee gewerkt. Maar dan zie je wat er in een CSS file zit. Als je op de View Source in je browser klikt ziej e de HTML waaruit de pagina is opgebouwd. De eigenschappen worden dmv classes en ID's aangegeven.

<span class = 'red'>Test Tekst</span> in html geeft als output : Test Tekst

 

Bedankt nu heb ik eens iets om te vergelijken.
Nu heb ik dat style document eens bekeken. Maar moet ik dan niet ergens het wordje red tegenkomen dat aangeeft dat die tekst van jou rood wordt?

Of is dat soms > h4, .red ?

Poster: Reind
...maar dat houd het ook overzichtelijk en de paar kb die je bespaard met het schrijven van shorthand css code is ok te verwaarlozen....

 

En dat is nou precies de reden

Poster: ccc
 .red

 

Dat is hem :D

Door H4, .red te gebruiken geeft je aan (komma gescheiden) dat beide dezelfde eigenschappen hebben, namelijk degene tussen de { } die erachter staan.

Pfff ingewikkeld vind ik het.

Nu heb ik wat geprobeert, maar het lukt me niet.

Dit is mijn zogenaamde css bestand:

body.normal { background-color: green;
                                   font: normal 16px Arial; }
table.opmaak { margin-left: 10%; margin-right: 2%; width: 88%; }
td.paginatitel { font-size: 24px; color: #FFFFFF; }
td.productnaam { width: 300px; color: #ffffff; }
td.prijs  { width: 100px; }
img   { width: 240px; height: 180px; }


En dit is mijn html bestand:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Productenoverzicht</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class=‘normaal'>
       <table class=‘opmaak'>
          <tr>
               <td class=‘paginatitel' colspan=‘3'> Productenoverzicht </td>
          </tr>
          <tr>
               <td class=‘productnaam'> Test123 </td> <td class=‘prijs'> test1234 </td>
               <td class=‘afbeelding'> <img src=‘koelkast.jpg' /> </td>
          </tr>
       </table>


</body>
</html>

Als ik het goed heb moet mijn tabel nu 10% van links in min browser beginnen.
En de worden die ik gebruik moeten allemaal verschillende kleuren krijgen.

Echter het probleem is. Mijn tabel begint gewoon paf meteen links zonder 10% vanaf de kant de beginnen. En alle tekst is gewoon even groot en zonder kleur.
Weet iemand wat ik fout doe? Of is mijn css file helemaal fout?

.normal { background-color: green; font: normal 16px Arial; }
.opmaak { margin-left: 10%; margin-right: 2%; width: 88%; }
.paginatitel { font-size: 24px; color: #FFFFFF; }
.productnaam { width: 300px; color: #ffffff; }
.prijs  { width: 100px; }
img   { width: 240px; height: 180px; }


Nu moettie het doen geloof ik?

Denk er wel aan dat de verschillende versies van IE op verschillende manieren met CSS omgaan.

Om je website in alle browsers er hetzelfde uit te laten zien is erg lastig...

Ik bekijk het nu in Firefox en het werkt nog steeds niet.

http://www.crazycor.nl/test/
Moet ik soms nog iets extra's toevoegen zodat het css geactiveerd wordt?

Ik denk dat je niet goed naar je stylesheet heb gelinkt.. ik zie staan ./style.css geloof ik... de punt moet weg..

Nee dat moet ../style.css zijn als de CSS file in de root directory staat.

De index.html en de style.css staan beide in dezelfde map.
Naar mijn weten kan het dan gewoon met ./ ?

Zonder . heb ik geprobeert geen kleur. Met .. en ook geen kleur.

Nu heb ik voor de zekerheid http://www.crazycor.nl/test/style.css ingevuld.
En hierbij ook niets.

Moet er op de server soms iets speciaals geinstalleerd worden om css te laten werken?

Je zou dit kunnen proberen, als je stylesheet in dezelfde map staat.

<l i n k xhref="style.css" rel="stylesheet" type="text/css" />

 
Ik neem aan dat je gewoon een extern stylesheet hebt?

Zonder de spaties in 'link' en de 'x' voor 'href' trouwens!

[edit] oh, dat heb je al... misschien van je 'style's 'classes' maken in je index? dus ipv td class=, td style=?

Dit heb ik zojuist geprobeert en dat werkt helaas ook niet.

Het is namelijk voor mijn opleiding.

Het uitdenken van een website blablabla en een van de verplichte punten is dat de website gebruik moet maken van een stylesheet, CSS dus.

Nu krijgen we niet geleerd hoe CSS in elkaar zit dat mag jezelf uitzoeken. Dus ik ben nu al 2 weken bezig met het bestuderen van handleidingen en cursussen op het internet.
Ik stuit nu al dagen op het probleem dat ik niks te zien krijg(kleur etc.).

Is er iemand die misschien een goed forum over CSS weet zodat de mensen misschien daar weten wat ik het beste kan doen?( Het liefst een Nederlands forum)

Ik moet zo snel mogelijk dit CSS gebeuren leren, want de tijd begint te dringen :P. En ik wil graag deze module voldoende scoren.

www.html-site.nl