border: 5px solid #000000;
Krótki poradnik dla osób początkujących w HTML i CSS
Po zdefiniowaniu wszystkich właściwości w odpowiednich polach i uzyskaniu satysfakcjonującego efektu można wdrożyć wygenerowaną ramkę do swojego projektu. Można to zrobić poprzez nadanie konkretnemu elementowi (np. div) klasy i przypisanie właściwości CSS, lub poprzez utworzenie elementu z atrybutem "style" (mniej polecana metoda).
Przykład:
Generator wygenerował kod:border: 10px double #15b259; border-radius: 0px;Dodajemy go do naszego arkusza stylów (np. pliku "style.css") lub do pliku HTML między znacznikami
<style></style>jako klasę lub ID. Klasa musi zaczynać się od znaku ".", a ID od "#". Możemy nadać jej dowolną nazwę:
.myBorder { border: 10px double #15b259; border-radius: 0px; }
Teraz chcąc uzyskać efekt w naszym pliku HTML musimy odwołać się w elemencie do utworzonej przez nas klasy CSS.
Fragment przykładowego pliku index.html:
Przed:<div>Testowy napis</div>Po:
<div class="myBorder">Testowy napis</div>Uwaga! Żeby taki kod umieszczony w pliku .css zadziałał, musimy przed wykonaniem tego kodu (najlepiej w sekcji
<head></head>) umieścić odwołanie do tego pliku, np:
<link rel="stylesheet" href="style.css">
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="myBorder">Testowy napis</div> </body> </html>Przykładowy plik CSS (style.css):
.myBorder { border: 10px double #15b259; border-radius: 0px; }Uwaga! W tym przypadku oba pliki muszą znajdować się w tym samym folderze. Alternatywnie można zmienić ścieżkę pliku style.css na własną.