CSS

→ CSS = " Cascading Style Sheets "

→ Šetrí veľa práce, lebo upresňuje štýly pre viacero prvkov

Možnosti pridania CSS do HTML stránky

Inline → pridaním style atribútu danému prvku
Internal → pridaním <style> prvku do hlavičky stránky
External → pridaním <link> prvku do hlavičky

Inline CSS

→ Používa sa výhradne na stanovenie unikátnych štýlov pre jeden prvok

//index.html

<h1 style="color:blue;" >A Blue Heading</h1>
<p style="color:red;" >A red paragraph.</p>

Internal CSS

→ Používa sa na definovanie štýlov prvkov na jednej HTML stránke

→ Internal CSS sa uvádza vždy v <head> danej stránky

//index.html

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>My First Heading.</h1>
<p>My first paragraph.</p>

</body>
</html>

External CSS

→ Používa sa na definovanie štýlov prvkov pre viacero HTML stránok

→ Odkaz na daný style sheet sa uvádza v <head> danej stránky

//index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>My First Heading.</h1>
<p>My first paragraph.</p>

</body>
</html>

//styles.css

p {
color: red;
}
h1 {
background-color: blue;
}

CSS syntax

//styles.css

p {
    color: red;
    text-align: right;
}
h1 {
    background-color: blue;
    font-size: 5rem;
    font-family: sans-serif;
    text-align: center;
}

CSS komentáre

//styles.css

// Toto je CSS komentár na jeden riadok
/*
Toto je viacriadkový CSS komentár
/*

CSS border

border-type:

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden

//index.html

<head>
<style>
p {
    border-color: #008080;
    border-width: 2px;
    border-style: solid
    //alebo
    border: 2px solid #008080;
}
</style>
</head>
<body>
     <p>Tento text má okraje</p>
</body>

//output

Tento text má okraje

CSS padding

//index.html

<head>
<style>
p {
    border: 2px solid #008080;
    padding: 2rem;
}
</style>
</head>
<body>
     <p>Tento text má okraje a padding</p>
     <p>Tento text má okraje a padding</p>
     <p>Tento text má okraje a padding</p>
</body>

//output

Tento text má okraje a padding

CSS margins

//index.html

<head>
<style>
p {
    border: 2px solid #008080;
    padding: 2rem;
    margin: 3rem;
}
</style>
</head>
<body>
     <p>Tento text má okraje, paddings a margins</p>
     <p>Tento text má okraje, paddings a margins</p>
     <p>Tento text má okraje, paddings a margins</p>
</body>

//output

Tento text má okraje, paddings a margins

Zhrnutie

style atribút definuje inline CSS
<style> definuje internal CSS
<link> odkazuje na external CSS súbor
<head> obsahuje <link> a <style> elements
<color > mení farbu textu
<font-family> upravuje štýl textu
<del> odstránený text
<border> definuje ohraničenie
<padding> definuje veľkosť miesta od prvku po ohraničenie
<margin> definuje vzdialenosť medzi jednotlivými prvkami