Webontwerp voor kinderen CSS

Welkom bij de vijfde les van onze serie Web Design for Kids, alles over CSS.

We hebben heel hard gewerkt aan onze HTML-inhoud, dus nu is het tijd om het er mooi uit te laten zien! We zullen hier dingen aan onze HTML-pagina toevoegen en een nieuw bestand starten: a CSS document.

Bekijk de voltooide website die we aan het bouwen zijn. De bestanden voor deze les kunnen hier worden gedownload en vergeet niet om vragen te stellen in het opmerkingengedeelte onderaan deze pagina.

Wat is CSS Precies?

Voordat we beginnen met coderen, zorgen we eerst dat we begrijpen wat CSS is. CSS betekent Cascading Style Sheets en het is een taal die ons helpt de manier te veranderen waarop onze HTML-pagina eruitziet.

In de bovenstaande afbeelding toont de browser aan de linkerkant een website zonder CSS, nee styling, terwijl de website aan de rechterkant styling heeft. De styling is geschreven in een CSS-bestand-veel beter!

CSS wordt geschreven in een apart bestand met behulp van onze teksteditor. Ons HTML-document is opgeslagen met een .html extensie, maar ons CSS-document wordt opgeslagen met een .css uitbreiding.

Een CSS-bestand maken

We zullen een gloednieuw document moeten starten in onze teksteditor en dit opslaan als "tutstown.css" in "tutsfolder"; naast de map "index.html" en de map "images".

HTML & CSS

Om ons CSS-document stijlen toe te passen op ons HTML-document, moeten we ze aan elkaar koppelen. Dit gebeurt via een element binnen het head-element helemaal bovenin ons HTML-document.

We voegen deze link direct onder onze titel toe:

 Tuts Town  

Er zijn een paar belangrijk attributen opnemen in dit zelfsluitende element, waarvan de eerste is type. Het typekenmerk vertelt de browser wat de type van inhoud die we koppelen. In dit geval is het een text / css het dossier.

Het tweede kenmerk dat we hier zien is rel, die de browser vertelt wat de relatie is tussen de HTML en het gekoppelde document (onze CSS). Het CSS-document is een stylesheet voor onze HTML, dus dat is wat we hier opnemen.

Ten slotte hebben we de href die je misschien nog herinnert van ons elementen. Het wijst ergens anders. In dit geval vertelt het de browser waar het CSS-bestand te vinden is waarnaar we hebben gelinkt.

Als alles goed is gekoppeld, ziet de pagina er anders uit wanneer u deze in de browser vernieuwt:

Klassen

In ons CSS-bestand kunnen we de HTML-elementen vermelden die we hebben gebruikt en aangeven hoe we willen dat ze eruit zien. Er zijn veel manieren om naar de elementen te wijzen die we willen, en HTML-klassen zijn een van die manieren.

HTML-klassen zijn attributen die we aan elementen kunnen toevoegen. Als een element een klassenaam heeft, kunnen we dit gebruiken in onze CSS.

De gekozen klassenaam moet een woord zijn of woorden die de inhoud in dat element beschrijven.

Een klas toevoegen aan onze kan er ongeveer zo uitzien:

 

Klassen zijn niet uniek, dus verschillende elementen kunnen dezelfde klassennaam hebben. Dit maakt het toevoegen van dezelfde stijlen aan veel elementen veel eenvoudiger; we zullen dit in actie zien wanneer we onze winkelfoto's bekijken!

Hoe CSS is geschreven

De manier waarop je code schrijft heet het syntaxis. Net als bij HTML moet CSS op de juiste manier worden geschreven om te kunnen werken.

Laten we naar ons CSS-bestand springen en, alleen voor de praktijk, het veranderen Achtergrond kleur van de koptekst naar blauw.

.primary-header background-color: blue; 
Er zijn veel stukken om goed te krijgen!

Dus onze CSS begrijpt dat wat we richten een klassenaam is, we moeten een paar dingen doen:

  • We moeten een punt zetten . voor de naam.
  • De stylinginstructies bevinden zich tussen accolades,
  • Wat we gaan stylen (Achtergrond kleur) wordt onmiddellijk gevolgd door een dubbele punt : 
  • Vervolgens voegen we de waarde toe (wat is blauw in dit geval). 
  • Elke stijl moet eindigen met een puntkomma ; 

Het kan heel gemakkelijk zijn om deze te vergeten!

Sla dit CSS-bestand op en vernieuw de browser; als je dit nog niet open hebt, kun je dat doen door te dubbelklikken op het "index.html" bestand in de "tutsfolder". Hoe netjes is dat?!

Belangrijk! Laten we nu deze stijl verwijderen, want onze site heeft geen blauwe kop!

Meer reacties

CSS stelt ons ook in staat om opmerkingen in ons bestand op te nemen die de browser zal negeren, maar ze zullen er iets anders uitzien dan onze HTML-opmerkingen.

Een CSS-commentaar bevindt zich in deze symbolen: / * * /

/ * Dit is een opmerking in CSS * /

Het CSS-document in de oefenbestanden zal een paar nuttige opmerkingen bevatten om de dingen verder uit te leggen.

Het lichaam

Het allereerste stukje echte styling dat we op onze website kunnen doen, is het veranderen van de Achtergrond kleur naar dat mooie lichtgele. Er zijn enkele kleurwaarden die kunnen worden uitgeschreven in CSS, zoals blauw in de voorbeeldcode hierboven en de browser begrijpt dit. Voor andere, minder gebruikelijke kleuren moeten we de kleuren opnemen hexadecimaal, of hex, nummer in plaats daarvan.

Alle kleuren hebben een hexadecimaal getal dat overeenkomt. Browsers begrijpen niet veel kleuren als ze worden uitgeschreven, maar ze begrijpen hex-nummers heel goed. Het hex nummer voor onze lichtgele kleur is # FAF8DA, en we willen dat toepassen op de , om de hele pagina te vullen.

body achtergrondkleur: # FAF8DA; 

Belangrijk! Er is geen noodzaak voor een punt in de voorkant van lichaam hier omdat het geen klassenaam is. In plaats daarvan hebben we meteen naar het lichaamselement gewezen.

Als je nieuwsgierig bent naar de hexadecimale waarde van andere kleuren, kan deze zeshoekige site erg handig zijn.

fonts

We kunnen ook de doopvont (de stijl van letters) voor onze website met lichaam in onze CSS.

Het enige wat we op dit punt moeten weten, is dat we dat moeten doen link een lettertype van Google naar ons HTML-document. Zodra deze zijn gekoppeld, begrijpt de browser dit en kunnen we deze gebruiken.

Hier is een blik op de link die we moeten toevoegen binnen de van onze HTML (dezelfde plaats waar we ons CSS-document hebben gekoppeld!)

Dan kunnen we dit opslaan en naar ons CSS-document gaan:

body font-family: 'Open Sans'; 

Hiermee wordt het lettertype voor alle tekst op de pagina ingesteld als Open Sans.

De kop

Binnen de koptekst zullen we de tekstkleur en -grootte en de afbeeldingsgrootte van de stad veranderen.

Ten eerste moeten we de juiste HTML-klassen toevoegen aan de elementen in de header, zodat we deze in onze CSS kunnen gebruiken.

In de opening

label laten we een klasse van toevoegen main-titel en binnen de we zullen een klasse toevoegen van town-voorvertoning:

 

Welkom bij Tuts + Town

Een illustratie van de toren van de Stad Tuts.

In ons CSS-document kunnen we nu naar deze elementen verwijzen door middel van de klassenamen die we hebben ingesteld en beginnen met stileren.

We hebben hier een tamelijk grote lettergrootte ingesteld 70px. px, of pixels, is als een punt op het scherm. Deze punt is gevuld met kleur en wordt gebruikt als een maateenheid. Het imago van onze stad is ook vrij groot, dus we zullen dat instellen 650 pixels breed.

De kleur eigenschap bepaalt de kleur van de tekst, die hier (# 205D76) Is donkerblauw.

.hoofdtekst font-size: 70px; kleur: # 205D76;  .town-preview width: 650px; 

Hoofd

Onthoud dat we in het algemeen kleinere secties hebben die een afbeelding en tekst bevatten. We moeten een formaat instellen voor deze afbeeldingen en de koppen en lijsten opmaken met CSS.

Afbeeldingen

Het eerste dat we moeten doen is de grootte van de gebouwafbeeldingen instellen. Om de beeldformaten allemaal samen in te stellen, kunnen we dezelfde klassenaam gebruiken voor verschillende elementen.

We willen dezelfde klassenaam toevoegen, gebouw, naar alle drie de winkelafbeeldingen in onze HTML en verander ze dan allemaal tegelijk in onze CSS, zoals deze:

.gebouw width: 200px; 

rubrieken

Onze drie kleinere koppen kunnen ook dezelfde klassennaam hebben en we zullen die gebruiken om de kleur en lettertypegrootte van de tekst.

.categorie-heading color: # 205D76; lettertypegrootte: 30px; 

Lijsten en links

Na het kopje binnen elke sectie hebben we onze ongeordende winkellijsten - onthoud ze? Naast het wijzigen van de grootte en de kleur van de links hier, moeten we ook de kleur van de lijst wijzigen kogel punten.

Laten we een klasse toevoegen store-lijst naar de