Cum să adaugi CSS
Regulile dintr-o foaie de stil îi spun browserului care o citește cum să formateze pagina HTML.
Poți aduce CSS într-o pagină în trei moduri:
- CSS extern — o legătură către un fișier
.cssseparat. - CSS intern — un element
<style>plasat în secțiunea head. - CSS inline — atributul
styleal unui element HTML.
CSS Extern
Editarea unei singure foi de stil externe este suficientă pentru a schimba aspectul unui întreg site web.
Pentru ca asta să funcționeze, fiecare pagină HTML are nevoie de un element <link> în secțiunea sa <head>, care indică spre fișier.
Orice editor de text este bun pentru scrierea fișierului. Acesta trebuie să aibă extensia .css și nu ar trebui să conțină etichete HTML.
Notă: O valoare și unitatea ei stau împreună, fără spațiu între ele, așa că margin-left: 20px; este corect, iar margin-left: 20 px; nu este.
Exemplu
Un element <link> din <head> conectează foaia de stil externă la pagină.
<head>, folosiți un element <link rel="stylesheet" href="mystyle.css"> pentru a include CSS extern. Adăugați un titlu și un paragraf în body.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
mystyle.css
În fișierul legat mystyle.css vei găsi doar CSS, fără HTML.
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}