Kod źródłowy HTML
<body>
<div class="blok1">
<div class="widget">
<p>To jest widget 1</p>
</div>
</div>
<div class="blok2">
<div class="widget">
<p>To jest widget 2</p>
</div>
</div>
</body>Sposób dodawania styli w CSS
/* stylizowanie obiektu z klasą blok1 */
.blok1{ }
/* stylizowanie obiektu z klasą blok2 */
.blok2{ }
/* stylizowanie wszystkich obiektów div */
div{ }
/* stylizowanie wszystkich paragrafów */
p{ }
/* stylizowanie wszystkich obiektów z klasą widget */
.widget{ }
/* stylizowanie wszystkich obiektów z klasą widget wewnątz obiektu z klasą blok1 */
.blok1 .widget { }
/* stylizowanie wszystkich paragrafów wewnątz klasy widget wewnątrz klasy blok1 */
.blok1 .widget p{ }Jak widzicie, możemy pewne elementy stylizować globalnie odnosząc się do wszystkich znaczników html na stronie lub możemy też dodawać style dla specyficznych elementów, które znajdują się wewnątrz innych elementów.
Pamiętajcie o kolejności ustalania styli:
Style globalne są najmniej ważne, a kokretne ustawienie styli nadpisze te globalne.
Np. ustalenie koloru dla paragrafu
p{color:brown;}zostaje zastąpione bardziej precyzyjnym wpisem
.widget p{color:blue;}W przykładzie powyżej ostatecznie kolor tektu wewnątz paragrafu, który znajduje się we wnętrzu kontenera o klasie widget wyświetli się na niebiesko, a inne paragrafy poza klasą .widget wyświetlą się na brązowo.
Zazwyczaj, jeśli dodajecie jakieś style i nie widać efektu, będzie to oznaczać, że gdzieś te właściwości są nadpisywane.
W większości przypadków lepszym rozwiązaniem jest stylizowanie elementów dodając również klasy zewnętrzne dla właściwości indywidualnych danej sekcji.
Właściwości wspólne najlepiej stylizować globalnie, aby się nie powtarzać, czyli np. jeśli chcemy żeby wszystkie paragrafy na stronie miały kolor ciemnoszary to możemy taką właściwość określić w ten sposób:
p{ color:rgb(34, 34, 34); } Dodawanie styli dla wielu elementów i klas
Jeśli chcemy dodać te same wartości właściwości do wielu klas czy elementów strony (czyli selektorów), możemy je dodować za pomocą przecinka. Poniżej przykład przypisania ramki dla 3 selektorów:
.blok1, .blok2, p{
border:1px solid black;
} Pamiętajcie, że nie wszystkie selektory można grupować, tak jak w przykładzie powyżej! (np. a:link, a:visited, a:hover należy stylizować osobno)