abc HTML5 i CSS TUTORIAL

Eksterni CSS /EXTERNAL CSS/ (u CSS fajlu)


Sllika 1. Izbor vrijednosti atributa - Eksterni CSS /EXTERNAL CSS/

Eksterni CSS /EXTERNAL CSS/ Korištenje eksternog CSS-a se izvodi u oba dijela HTML fajla i posebna CSS fajl:

  • CSS fajl: TAG { Atribut: Vrijednost_Atributa; }
  • HTML FAJL - HEAD dio: <link rel="stylesheet" type="text/css" href="Putanja/ImeCssFajla.css">
  • HTML FAJL - BODY dio: <TAG>Sadržaj_za_izabrani_tag</TAG>

Oznake:
TAG - p | h1 | h2 | h3 | h4 | h5 | h6 | BODY | DIV | SPAN - TAG može da primi jednu od navedenih vrijednosti
p paragraf /PARAGRAPH/
h1 | h2 | h3 | h4 | h5 | h6 - zaglavlje teksta /HEADINGS/
BODY - Tekst u cijelom dokumentu
DIV - Tekst u cijeloj DIV sekciji
SPAN - Tekst u cijeloj SPAN sekciji
Naziv - Korisnik bira ime za uređenje

Atribut se definiše u CSS fajlu istom sintaksom kao i interni CSS /INTERNAL CSS/. Više atributa jednog se navodi unutar otvorenih i zatvorenih velikih zagrada { }.
Eksterni CSS /EXTERNAL CSS/ (u CSS fajlu) je idealan kad se stil koristi u više stranica. Sa eksternim CSS fajlom možete mijenjati izged Web sajta promjenom samo jednog fajla. Svaka stranica mora imati link (u HEAD dijelu) na .css fajl sa stilom /STYLE SHEET/ koristeći <link> TAG ( <link rel="stylesheet" type="text/css" href="Putanja/ImeCssFajla.css">).

Slijedeća animacija prikazuje kako se iz internog /INTERNAL/ krerira eksterni css /EXTERNAL CSS/.

Kreirati eksterni css /EXTERNAL CSS/ iz internog /INTERNAL/ css-a, postupak:

  1. CSS fajl.
  2. Kreirati css fajl na odgovarajući folder.(10_BODY_red.css).
  3. HTML fajl.
  4. HEAD dio.
  5. Dodati naredbu za povezivanje HTML i CSS fajla <link rel="stylesheet" type="text/css" href="Putanja/ImeCssFajla.css">.
  6. Označiti dio između <STYLE> </STYLE>.
  7. CTRL+X (Označiti za premještanje).
  8. CSS fajl.
  9. EDIT, PASTE - Premjestiti označeni dio u CSS fajl.
  10. Snimiti izmjene u CSS fajlu.
  11. HTML fajl
  12. Višak obrisati ( <STYLE> </STYLE>).
  13. Kraj.

Primjer 1. Alfabetski redoslijed - velika slova /UPPER CASE/.

Aktivnost

html5 fajl

.css (Eksterni CSS fajl)

Ispis na ekranu

Alfabetski redoslijed - velika slova /UPPER CASE/

<!DOCTYPE html>
<html>
<head><title>Numerisana lista</title>
<link rel=stylesheet href="css/20_OL_upper_alpha.css" type="text/css">
</head>
<body>
<OL>
<LI>voda</LI>
<LI>sok</LI>
<LI>kafa</LI>
<LI>mlijeko</LI>
</OL>
</body></html>

Fajl: 20_OL_upper_alpha.css

ol {
list-style-type: upper-alpha;
}

A. voda
B. sok
C. kafa
D. mlijeko

Daljnji rad:

Prozor na dnu stranice je namjenje za provjeru koda:
- kopirajte kod (edit, copy, paste ili CTRL+C, CTRL+V ili DRAG&DROP metodom), editovanje je moguće u prozoru

Index