Linkowanie arkuszy z HTML

Linkowanie do zewnętrznego arkusza CSS

Zewnętrzny arkusz CSS jest połączony z dokumentem HTML za pomocą znacznika <LINK>:

Znacznik <LINK> znajduje się wewnątrz sekcji <HEAD>. Opcjonalny atrybut TYPE określa typ mediów, np. text/css.

Arkusze wewnątrz dokumentów HTML

Arkusz styłów można umieścić wewnątrz dokumentu HTML stosując element <STYLE>:

<STYLE TYPE="text/css" MEDIA=screen>
BODY { background: url(foo.gif) red; color: black }
P EM { background: yellow; color: black }
.note { margin-left: 5em; margin-right: 5em }
</STYLE>

Importowanie arkuszy stylów

Arkusz można importować komendą @import:

<STYLE TYPE="text/css" MEDIA="screen, projection">
@import url(http://www.htmlhelp.com/style.css);
@import url(/stylesheets/punk.css);
DT { background: yellow; color: black }
</STYLE>

Style w elementach

Style mogą występować w poszczególnych elementach przy użyciu atrybutu STYLE:

<P STYLE="color: red; font-family: 'New Century Schoolbook', serif">Paragraf z czcionką w kolorze czerwonym</P>

Atrybut CLASS

Atrybut CLASS precyzuje, do jakiej klasy należy dany element:

.punk { color: lime; background: #ff80c0 }
P.uwaga { font-weight: bolder; color: red; background: white }

Atrybut ID

Atrybut ID definiuje styl dla konkretnego elementu:

#wdg97 { font-size: larger }
<P ID="wdg97">Welcome to the Web Design Group!</P>

Element SPAN

Element SPAN pozwala na nadanie stylu segmentowi tekstu:

<SPAN CLASS="firstwords">Pierwsze słowa paragrafu</SPAN>
<SPAN STYLE="font-family: Arial">słowa</SPAN>

Element DIV

Element DIV zawiera blok elementów:

<DIV CLASS="note">
<H1>Divisions</H1>
<P>Element DIV definiuje sekcję dokumentu.</P>
</DIV>

CSS tutoriale