CSS

Hvad er CSS

CSS står for Cascading Style Sheets, og er den metode man anvender til at formatere sine websider. Det fungerer ved at CSS koden fortæller browseren hvordan den skal vise HTML-koden.

I praksis gør man det ved at linke til en CSS-fil i HTML-sidens <head>-sektion. Det med rødt er min tilføjelse for at gøre det tydeligt.

	<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" lang="da"/>
	
	<link rel="stylesheet" href="style.css" /> <!-- Link til CSS-->
	
	<title>HTML skabelon med CSS</title>
	
	...

Herefter oprettes filen style.css i samme mappe som ens HTML-dokument, og CSS kommandoerne indsættes i style.css. For at ramme de forskellige tekstelementer med anvender vi deres elementnavnt. Som du så i ovenstående eksempel skriver vi indholdet af tag'et efterfulgt af curly-brackets ( { } ) og skriver CSS-koden deri. Jeg har indsat kommentarfelter i CSS kode ( tekst der er omgivet af /* */, for at beskrive hvad der sker.

Læg mærke til enheden em, som angiver størrelsen i forhold til den font størrelse dokumentet anvender (16px som standard). 2em svarer til \( 2 \cdot 16 = 32 px \) og 1.5em til \( 1,5 \cdot 16 = 24px \). Vil man ændre størrelsen af skriften i hele dokumentet sætter man en universel standardstørrelse ved hjælp af * som herunder

	/* Universel fontstørrelse (standard) */
* {
font-size: 16px;
}

/* Overordnet formatering der gælder alle overskrifttyper */	
h1, h2, h3 {	
font-family: arial;
font-weight: 900;
}

/* Formatering der gælder de enkelte overskrifttyper */
h1 {
font-size: 2.2em;
}

h2 {
font-size: 1.8em;
}

h3 {
font-size: 1.3em;
}

/* Formatering der gælder <p> */
p { 
font-family: verdana;   
}	

Resultatet af ovenstående kode kan du se her:

Ved at holde den indholdsmæssige kode væk fra designet kan man ændre sit design et sted. Derfor bør man holde design og kode skarpt adskilt.

Du kan hente både HTML- og CSS koden til ovenstående ved at højreklikke på nedenstående henvisninger og vælge: Gem link som:

HTML-kode: html_skabelon_med_CSS.html

CSS-kode: style_example.css

Læs mere om CSS: http://www.w3schools.com/css/css_syntax.asp

Målrettet design

Når man skal lave nogle generelle ændringer så kan man fint anvende de elementer man skriver koden med. Men nogle gange har man brug for enkelte elementer får et andet design. Det gøres ved enten at give elementet en unik identifikation (id="ID_betegnelse") eller et tilhørsforhold til en klasse (class="klasse_betegnelse").

id og class

id og class anvendes til at identificere enkelte elementer.

  • id anvendes når det er i et og kun et tilfælde det skal anvendes
  • class anvendes når det er et design der skal anvendes mere end en gang

Der er rent teknisk intet til hinder for at man kan anvende det samme id-tag mere end en gang, men det hjælper designeren af koden til at holde styr på hvad man laver.

Herinder har jeg ændret lidt i skabelonen og indsat id="red" i den første <p> tag og class="blue"> ved de sidste to. id rammer en gang i koden og class to gange.

	<h1>Overskrift</h1>
	
<p id="red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ac nisi a sagittis. Pellentesque fringilla quis turpis vitae congue. Integer vel eleifend ex. Quisque ultricies tempor sem a facilisis.</p>
	
<h2>Under-overskrift</h2>
	
<p class="blue">Duis eu quam a augue commodo lobortis. Nulla quis justo ac nulla venenatis finibus. Nam non vestibulum lectus. Nunc nec sapien scelerisque, egestas felis at, suscipit elit.</p>
	
<h3>Under-under-overskrift</h3>
	
<p class="blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ac nisi a sagittis. Pellentesque fringilla quis turpis vitae congue. Integer vel eleifend ex. .</p>

Derudover indsættes følgende linier i css-filen:

	/* farvekoder tilføjet 01 */
		
p#red {
color: red;
}

p.blue {
color: blue;
}

Læg mærke til, at # anvendes ved id og . ved class. Resulatet af ovenstående kode er:

Du kan se siden her: html_eksempel_med_id_og_class.html

Download HTML-koden: html_eksempel_med_id_og_class.html

Download CSS-kode: style_example_02.css

Du kan læse mere om id og class her: https://www.w3schools.com/css/css_syntax.asp

<div> og <span>

Hvis man ønsker at gruppere elementer anvender man enten blok-elementet <div> eller inline-elementet <span>.

  • <div>: anvendes som et blok-element. Bruges til at danne sit eget eller gruppere blok-elementer
  • <span>: anvendes som et inline-element. Bruges til at markere elementer inde i et blok-element

<div> og <span> anvendes når HTML5's standard-elementer ikke er tilstrækkelige. Det kan f.eks. være at vi ønsker at lave en helt speciel formatering af nogle afsnit

I koden herinder har jeg valgt at farve en del af teksten i det første p-element grønt. Det skal gøres ved hjælp af span, da det skal gøres inde i et blok-element. Derudover har jeg valgt give baggrunden en grå farve fra og med <h2> overskriften og fremefter

	<h1>Overskrift</h1>
	
<p id="red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span id="green">Curabitur condimentum ac nisi a sagittis</span>. Pellentesque fringilla quis turpis vitae congue. Integer vel eleifend ex. Quisque ultricies tempor sem a facilisis.</p>

<div class="grey_background">
	
	<h2>Under-overskrift</h2>
	
	<p class="blue">Duis eu quam a augue commodo lobortis. Nulla quis justo ac nulla venenatis finibus. Nam non vestibulum lectus. Nunc nec sapien scelerisque, egestas felis at, suscipit elit.</p>
	
</div>
	
<h3>Under-under-overskrift</h3>
	
<p class="blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ac nisi a sagittis. Pellentesque fringilla quis turpis vitae congue. Integer vel eleifend ex. .</p>


For at ramme vores to nye span- og div-elementerne tilføjer vi følgende i bunden af filen:

	/* farvekoder tilføjet 02 */

#green {
color: green;
}

.grey_background {

background-color: grey;

}

Du kan se resultatet af ovenstående kode her: html_skabelon_med_id_og_class.html

Download HTML-koden: html_skabelon_med_id_og_class.html

Download CSS-kode: style02.css

Rækkefølge

Vær opmærksom på at CSS-koden bliver læst fortløbende. Det betyder, at hvis man man skriver en kode der rammer det samme element to gange, så er det, den sidste kode der vil blive anvendt.

Det er en af de ting der kan drille når man laver CSS, så forsøg at være så metodisk og struktureret du kan være når du skriver din kode.

Overtag designet

Alle browsere har deres egen måde at vise de forskellige elementer på. Hvis man gerne vil have den fulde kontrol, så skal man indsætte følgende i sit CSS script:

	/* Nulstil alle parametre*/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}

Du kan også vælge at downloade det ovenstående i en CSS-fil, gemme den i din CSS-mappe og så henvise til den i style.css. På den måde

For at henvise til filen skal du tilføje følgende øverst i din style.css

	@import url("reset.css");

Download: reset.css

Boks-modellen

Når man skal placere et element på en side, så vil browseren som udgangspunkt placere den venstrestillet og med de afstande til siden andre elementer den har som standard. Begreberne man anvender er padding, border og margin, og placere sig som på illustrationen herinder

Beskrivelsen af de enkelte elementer i boks-modellen.

  1. Indhold
  2. Indholdet er selve elementet og størrelsen af elementet styres ved at målrette CSS. For tekst er det f.eks. størrelsen og afstand mellem tegne.

  3. Padding
  4. Padding er afstanden mellem elementet og rammen - altså hvor meget luft der skal være ud fra indholds-elementet til rammen (border).

  5. Border
  6. Border (rammen) bruges hvis man ønsker at indramme sit element. Det kan f.eks. være en streg, der skal gå rundt om et billede eller en tekst.

  7. Margin
  8. Margin angiver hvor langt der skal være fra elementets ramme til et andet elements ramme (border).

Herunder vil jeg gennemgå boksn-modellens elementer i en blandet rækkefølge, da det giver bedst mening.

Du kan med fordel anvende w3schools testfunktion til at eksperimentere med boksmodellen: http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel.

CSS-kode: padding og margin

CSS-koden til border og padding kan sættes på 4 måder. Herunder bliver det kun vist med padding,da det samme gælder for margin.

1. Hvis alle sider skal have samme værdi:

	padding: 2em;

2. Hvis hver side skal have en individuel værdi:

	padding-top: 2em;
padding-right: 1em;
padding-bottom: 3em;
padding-left: 4em;

Dette har også en "shorthand", hvor man kun skriver værdierne i rækkefølgen: top, højre, bund, venstre:

	padding: 2em 1em 3em 4em;
padding: top højre bund venstre;

3. Hvis top/bund og siderne skal have hver deres værdi parvist. Første værdi er top/bund - den anden siderne:

	padding: 2em 1em;
padding: top/bund højre/venstre

4. Hvis top og bund skal have hver deres værdi, men siderne skal være ens:

	padding: 1.5em 1em 4em;
padding: top bund Højre/venstre 

Vær opmærksom på: Top- og bundmargin kan kolapse, forstået på den måde, at hvis man har to elementer hvor det første har en bundmargin på 50px og det andet en topmargin på 20px, så vil de 20px blive "slugt" af det øverste element.

Du kan læse mere om padding her: http://www.w3schools.com/css/css_padding.asp

Du kan læse mere om margin her: http://www.w3schools.com/css/css_margin.asp

CSS-kode: border

border kan sættes med en shorthand: bredde, type og farve. Det kan gøres med en "shorthand" eller udspecificeret.

	border: 1px solid grey;

Du kan læse mere om border her: http://www.w3schools.com/css/css_border.asp.

Farver

Når man taler om farver i computersammenhænge taler man om det man kalder additive farver. Skærmens farver dannes ved hjælp af farverne rød, grøn og blå og kaldes for RGB.

"AdditiveColor" by SharkD at engelsk Wikipedia Later versions were uploaded by Jacobolus at en.wikipedia. - Transferred from en.wikipedia to Commons. Licensed under Public Domain via Wikimedia Commons.

Der er grundlæggende 3 metoder til at beskrive farverne:

  • Ved hjælp af navngivne farver, f.eks: red
  • Ved hjælp af RGB-værdierne angivet som hexadecimale tal, f.eks: #FF0000
  • Ved hjælp af RGB-værdierne angivet i 10-talssystemet, f.eks: rgb(255,0,0)

Navngivne farver

Browserer supporterer 140 navngivne farver, som du kan finde her: http://www.w3schools.com/colors/colors_names.asp. Disse 140 farvenavne har den fordel at man kan anvende dem når man tester og laver sit grundlæggende design. I praksis bliver farver ofte tilpasset

Eksempler:
Black Red Green Blue White HotPink

RGB-værdier

RGB farver er beskrevet enten ved hjælp af hashtag (#) efterfulgt af 6 hexadecimale cifre, der parvist definerer hver farve: #XXXXXX eller ved hjælp af rgb() hvor værdierne for den enkelte RGB farve står i parantesen: rgb(XXX, XXX, XXX)


Sort

#000000

rgb(0,0,0)


Rød

#FF0000


rgb(255,0,0)


Grøn

#00FF00

rgb(0,255,0)


Blå

#0000FF

rgb(0,0,255)


Hvid

#FFFFFF

rgb(255,255,255)

RGB-metoden er den mest anvendte, da hexadecimale tal er meget anvendt i computersammenhænge, men decimaltallene bliver anvendt mere og mere.

Grå nuancer

Grå nuancer dannes ved at hver af RGB værdierne er ens


#000000
rgb(0,0,0)


#3F3F3F
rgb(63,63,63,)

#7F7F7F
rgb(127,127,127)

#BFBFBF
rgb(191,191,191)

#FFFFFF
rgb(255,255,255)

Jordfarver

Jordfarver dannes ved at lade farverne falde med samme værdi


#FAE6D2
rgb(250,230,210)

#FADCBE
rgb(250,220,190)
#FAC896
rgb(250,200,150)
#C8A078
rgb(200,160,120)

#C8823C
rgb(200,130,60)

#A08264
rgb(160,130,100)

Farveskemaer

Når man laver sin hjemmeside vil man gerne sammensætte den af farver der passer sammen. Dertil kan man anvende diverse farvehjul der findes på nettet. En af de mere simple og effektive er Color Calculator: https://www.sessions.edu/color-calculator/:

Ved hjælp af denne kan man skabe en farvepalette, hvor man kan kopiere farvekoderne fra. Der findes også mere avancerede farvepaletter f.eks:

Læs mere om farver:

Fra w3schools: http://www.w3schools.com/html/html_colors.asp

Color Picker (wc3schools): https://www.w3schools.com/colors/colors_picker.asp

Fra min guide (teknisk): http://www.vidas.dk/foto/foto_farver.html

Selectors

Ved hjælp af selectors kan man målrette sit CSS script til at ramme mere præcist. Det kan f.eks. være det første element i en liste eller den første række i en tabel.

Der er et overblik over selektorer

Læs mere: https://www.w3schools.com/cssref/css_selectors.asp

CSS3

CSS3 --> Nye smarte måder at skrive ting på - uden at kunne programmere. <-- CSS3

Den nyeste version af CSS og tilføjer funktionalitet til ens design, som førhen krævede at man programmerede løsningerne.

Du kan se nogle vilde eksempler her, hvor der er anvendt CSS3: https://webdesign.tutsplus.com/articles/15-inspiring-examples-of-css-animation-on-codepen--cms-23937

Du kan få en introduktion til CSS3 her: http://www.w3schools.com/css/css3_intro.asp.

CSS3 generators

https://www.cssmatic.com/

http://enjoycss.com/

Læs mere om

Alle CSS guides på w3school:

Læs mere: http://www.w3schools.com/css/default.asp

Syntax

http://www.w3schools.com/css/css_syntax.asp

Farver

Grundlæggende: http://www.w3schools.com/css/css_colors.asp

Fra min guide (teknisk): http://www.vidas.dk/foto/foto_farver.html

Selectors

Selectors: http://www.w3schools.com/css/css_combinators.asp

CSS3 - Nyeste version

Instroduktion: http://www.w3schools.com/css/css3_intro.asp