Co to jest CSS?
Css to kod współpracujący z plikami HTML, który umożliwia nadanie wyglądu stronom internetowym. W poprzedniej wersji HTML i CSS stosowało się wyłącznie
w plikach z rozszerzeniem css. Więcej na ten temat przeczytasz później. Podobnie jak HTML, CSS nie jest językiem programowania. Nie jest jednak też
językiem znaczników — jest językiem arkuszy stylów (ang. style sheet language). Oznacza to, że pozwala on selektywnie stosować style do elementów
w dokumentach HTML np do paragrafów <p> obrazów <img> a nawet całego ciała dokumentu <body>.
Budowa selektora
W odróżnieniu od pliku HTML, nie ma nawiasów trójkątnych <...>. Zamiast nich są klamry
{...}, które określają początek i koniec zasad wyglądu dla znacznika w pliku html.
Powyższy kod należy rozumieć w następujący sposób: Całe ciało dokumentu będzie miało kolor tła lightblue.
body {
background-color: lightblue;
}
Opis budowy selektora
SELEKTOR - to element HTML na początku reguły. Pozwala wybrać który znacznik html chcesz wizualnie zmienić. W przykładzie wyżej chodzi o znacznik
<body>. Aby dodać styl do innego elementu, po prostu zmień selektor (ich listę znajdziesz w dziale HTML).
DEKLARACJA - to wyrażenie znajdujące się pomiędzy nawiasami klamrowymi {background-color: lightblue;}
możesz dodawać więcej właściwości do jednej deklaracji. Musisz pamiętać aby oddzielać je średnikami.
WŁAŚCIWOŚĆ - to jedna z dostępnych cech, które można modyfikować dla określonego elementu widoczengo na stronie internetowej. Może to być kolor tła, rozmiar, kolor czcionki i wiele innych.
WARTOŚĆ WŁAŚCIWOŚCI - Z prawej stronie właściwości za dwukropkiem wpisuje się wartość właściwości, która nadaje jedną z wielu możliwych opcji dla danej właściwości (np. istnieje więcej kolorów, które można ustawić jako kolor tła).
body {
background-color: lightblue;
}
ZAPAMIĘTAJ!
- Na końcu każdej deklaracji musisz wpisać średnik
;, aby oddzielić ją od kolejnej.
- Między właściwością, a wartością właściwości zawsze wstaw dwukropek:, jego brak spowoduje błąd składni.
- Wszystkie deklaracje muszą być wstawione pomiędzy nawiasy klamrowe{}, przed nawiasami jest nazwa selektora, klasy lub identyfikatora.
What is CSS?
Css is a code that works with HTML files that allows you to give the appearance of web pages. In the previous version, HTML and CSS were used only
in files with the HTML extension. You can read more about it later.Like HTML, CSS is not a programming language. However, it is not either
markup language - is the language of the stylesheets. This means that it allows you to selectively apply styles to elements in HTML documents,
for example to paragraphs <p> images <img> and even the entire body of the document <body>.
Structure of the CSS selector
Unlike the HTML file, there are no angle brackets <...>. There are buckles instead
{...}, which define the beginning and end of the appearance rules for the tag in the html file.
The above code should be understood as follows: The entire body of the document will have the background color lightblue.
body {
background-color: lightblue;
}
Description of the selector structure
SELECTOR - is the HTML element at the beginning of the rule. It allows you to choose which html tag you want to visually change.
The example above is about a tag <body>. To add a style to another element, just change the selector (see the HTML section for a list of them).
DECLARATION - is an expression between the curly braces {background-color: lightblue;}
you can add more properties to one declaration. You must remember to separate them with semicolons.
PROPERTY - is one of the available features that can be modified for a specific element visible on the website. It could be the background color, font size, color and much more.
PROPERTY VALUE - On the right side of the property, after the colon, enter a property value that gives one of many possible options for a given property (e.g. there are more colors that can be set as the background color).
body {
background-color: lightblue;
}
REMEMBER!
- You must enter a semicolon at the end of each declaration
;, to separate it from the next.
- Always include a colon between the property and the property value:, its absence will result in a syntax error.
- All declarations must be placed between the curly braces{}, The name of the selector, class, or identifier is in front of the parentheses.