font-weight - grubość czcionki
font-size - wielkość czcionki
text-align - wyrównanie tekstu
class - klasa - klasyfikuje, grupuje. W CSS odwołując się do klasy zamiast tagu należy najpierw dać kropke. aby sklasyfikować grupę należy dopisać do tagu class="nazwa". np. <p class="nazwa"> Text </p>wtedy w css można się odwołać do każdego tagu tej grupy przy wpisaniu .nazwa
id - Identyfikator - Identyfikuje TYLKO JEDEN tag. wywołuję się go przy użyciu # np. <p id="nazwa"> Text </p> wtedy w css można się odwołać do tego konkretnego tagu przy wpisaniu #nazwa

Nazywając klasy lub identyfkatory nie używamy SPACJI!
/* KOMENTARZ W CSS */

W CSS selektor (selecor) to cześć stylu która poprzedza otwierający nawias klamrowy. Określa on do jakiego elementu odnosi się dana reguła.

**Selektory**
Selektor	Wyjaśnienie
p	wybierze wszystkie elementy o nazwie p
.foo	wybierz wszystkie elementy których class="foo"
#identyfikator	wybierz wszystkie elementy których id="identyfikator"
div, p	wybierz wszystkie elementy o nazwie div oraz p
div p	wybierz wszystkie elementy o nazwie p wewnątrz elementu div
div .foo	wybierz wszystkie elementy class="foo" które znajdują się wewnątrz div
div p.foo	wybierz wszystkie elementy o nazwie p, których class="foo" - wewnątrz elementu div
[data-nazwa]	wybierz atrybuty o takiej nazwie

Przykład:

Jakiś tam tekst

HTML:
    
        <p class="testowy-akapit">Jakiś tam tekst</p> 
        <p id="akapit1" class="testowy-akapit">Jakiś tam tekst</p>
        <p class="testowy-akapit">Jakiś tam tekst</p>
        <p class="testowy-akapit">Jakiś tam tekst</p>
    
CSS:
    
        .testowy-akapit
        {
           color: blue;
        }
        #akapit1
        {
         text-align: center;
         font-size: 25px;
         color: red;
         font-weight: bold;
        }

div
- divistion (podział) - block
width
- pozwala zmienić szerokość bloku, centrowanie tekstu jest zgodne z rozmiarem bloku.
span
- rozpiętość/zakres - inline

div i span to tagi neutralne span dotyczy tylko w obrębie samego tekstu a div dotyczy całego bloku dostępnego na stronie oraz daje enter po tekscie.

block

inline

inline-block

W div można zmienić typ wyświetlania display z blockowego na inline lub inline-block. inline-blok łączy funckje inline z możliwością ustawienia odpowiedniej dla nas szerokości i wysokości bloku z użyciem width i height inline-block to blocki wyświetlane w lini.

Priorytet (dokładność) w selektorach:

Odziedziczony→Selector tag→Class selector→Id selector→Inline CSS→!important.
Piorytet Kaskadowy czyli priorytetowość idzie od prawej do lewej strony, !important ma największy priorytet.
Jeśli priorytet (ważność) jest RÓWNA to wybierane właściwości są łączone, a te co wystąpiły później nadpisują wcześniejsze. W innym przypadku liczy się nie kolejność, a "ważność". Im bardziej dokładny wybór tym ma wyższą wartość.

Zmienne

--nazwazmiennej: 25px; - zmienna
odwołanie się do zmennej np. : padding: var(--nazwazmiennej); (var - variable - zmienna)
zmienne stworzone w kontenerze można wykorzystać tylko w elementach które znajdują się wewnątrz kontenera a nie poza nim. np. wstawienie zmiennej do body lub * umożliwi wykorzystanie zmiennej we wszystkich elementach. Czyli tworzenie zmiennej w "Rodzicu" umożliwia wykorzystanie jej w "dzieciach".
użycie selektora :root{} - służy do wstawiania zmiennych używanych globalnie.

Darmowy hosting zapewnia PRV.PL