CSS i HTML - podstawy

Witajcie. Ostatnio ogarnęłam proste kody CSS i HTML, które dla niektórych mogą się okazać niezwykle przydatne, ponieważ parę dni temu dostałam kilka wiadomości z prośbą objaśnienia, jak można to zrobić. Zapraszam do czytania i korzystania!

KOD NA NIESTANDARDOWY FONT 

Dobrze, oto pierwszy z kodów. Przy znajomości prostych komend spokojnie dasz sobie z nim radę, jednak wolę coś, niecoś ci na ten temat przypomnieć.

h3.post-title odpowiada za tytuł posta.

h2.date-header odpowiada za datę posta.

.comments h4 odpowiada za napis „Brak komentarzy”

.wiget h2 odpowiada za tytuł gadżetu. Jeżeli chcesz zmienić font jedynie w np. prawej kolumnie, należy napisać .column-right-inner.wigeth2

Teraz przejdźmy do kodu:

1. Wchodzimy na stronę z fontami. Najlepiej na Google Font

2. Wybieramy sobie fonta.

3. Wchodzimy w Dodaj Arkusz CSS na Bloggerze, w Zaawansowanych opcjach edycji bloga.

4. Wpisujemy taki kod: h3.post-title {font-family: Miss Fajardose;}

Na koniec jeszcze sprawdźmy anatomię kodu:

h3.post-title {font-family: Miss Fajardose;}

h3.post-title - czyli część odnosząca się do TYTUŁU POSTA

font-family: - ten tekst pozwala na wyświetlenie naszego fonta.

<h3 class="post-title entry-title" itemprop="name" style="background-color: #eeeeee; color: #999999; font-family: &quot;miss fajardose&quot;; font-size: 50px; font-stretch: normal; font-weight: normal; line-height: normal; margin: 0.75em 0px 0px; position: relative; text-align: center;">

Twój tekst próbny</h3>

Legenda:

background-color: #eeeeee — kolor tła

color: #999999 - kolor fonta

font-family: &quot;Miss Fajardose&quot - rodzaj fonta, w tym przypadku Miss Fajardose

font-size: 42px -wielkość fonta

Aby użyć kodu, wchodzimy w post/stronę na blogu i przechodzimy w opcje HTML, po czym wklejamy kod. 

Podgląd:

Twój tekst próbny

USUNIĘCIE RAMEK I CIENI NA ZDJĘCIU.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

.BlogList .item-thumbnail img {

  padding: none !important;

  border: none !important;

  background: none !important;

  -moz-box-shadow: 0px 0px 0px transparent !important;

  -webkit-box-shadow: 0px 0px 0px transparent !important;

  box-shadow: 0px 0px 0px transparent !important;

}

No i to w sumie tyle. Mam nadzieję, że kody wam pomogły. Do zobaczenia w następnym poście, który pojawi się za niedługo ^^.