CSS

CSS eller Cascading Style Sheets er et programmeringssprog man anvender til at definere det visuelle udseende for hjemmesider. Ofte skriver man det i et dokument, man kalder for style.css og derefter anvender man det i sine HTML eller PHP dokumenter. WordPress teamer bruger CSS og HTML til at vise data frem, der er dannet af WordPress. Enhver WordPress hjemmeside indeholder en style.css fil, hvor en programmør har skrevet nogle regler for hvordan formatet på hjemmesiden skal laves af WordPress.

CSS er et meget simpelt sprog og samtidig nemt at lære. Der er mange hjemmesider, som har CSS gudies for begyndere inkl. WP Webdesign. De kan hjælpe WordPress brugere i gang med at lære det og anvende det på deres egen hjemmeside. Eftersom det er simpelt at forstå kan utroligt mange WordPress brugere forstå det grundlæggende blot ved at kigge i deres temas style.css fil.

CSS eksempler

[css]
body { 
font-size:1em;
color: #444;
background-color:#FFFFFF; 
} 
 
h1 { 
font-size:18px;
text-transform:uppercase;
}
 
.post-title { 
font-size: 16px; 
color: #000000;
font-weight:normal;
}
[/css]

Dele af HTML også kaldet divs eller bare elementer kan styles direkte i CSS. Designere kan også anvende klasser eller det man kalder for “identifiers”, som kan definere forskellige sektioner af hjemmesiden der styles med CSS. Det hjælper dem med at genbruge (DRY – Don’t Repeat Yourself) forskellige stylinger på de samme HTML elementer på hjemmesider, men i forskellige sektioner. Eksempelvis kan man style sin h1 title på sin blog anderledes end h1 elementer andre steder på den samme siden.

[css]
<div id="header">
 

<h1 class="blog-title">
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>
</h1>

 
</div>
[/css]

HTML koden ovenfor indeholder en identifier kaldet “header” og en klasse kaldet for “blog-title”. Disse sektioner kan vi referere til i vores stylesheet med CSS:

Klasser i CSS defineres med et #.

[css]
#header { 
background-color:#4C0000;
height:120px;
width:100%;
padding:20px; 
} 
 
h1.blog-title a { 
font-color:#FFFFFF; 
font-size:16px;
font-family: Georgia, "Times New Roman", serif; 
text-decoration:none;
} 
[/css]

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *