CSS bagian 1

CSS merupakan singkatan dari Cascading Style Sheet. CSS digunakan untuk menampilkan tampilan web agar lebih menarik. diibaratkan kita mempunyai bangunan rumah namun rumah tersebut belum di cat sehingga belum terlihat menarik jika dipandang. namun setelah dicat atau diwarnai rumah tersebut indah dipandang oleh mata.

ada beberapa cara untuk membuat link CSS yaitu secara eksternal, internal, CSS @import rule, Inline Style,….

  1. External Stylesheet : kita membuat file CSS yang terpisah dengan file html. misalnya nama file CSSnya style.css dimana isinya sebagai berikut:
h1 {
color: green;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
} 

kemudian kita membuat file htmlnya dengan nama file hello-word.html

<!DOCTYPE html>
<html>
   <head>
        <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
        <h1>Hello world!</h1>
         <p>I Love CSS</p>
   </body>
</html>
 

cara memangil file CSS yang sudah dibuat tadi dengan cara memasukan tag:

<link rel=”stylesheet” type=”text/css” href=”style.css”>

dari css tersebut di dapatkan bahwa untuh elemen h1 (heading 1) tulisannya berwarna hijau dan memliki garis bawah (underline) dan juga untuk elemen p (paragraph) memiliki ukuran font 25 px dengan style huruf ‘Trebuchet MS’, sans-serif

2. Internal Styles : tag CSS berada dalam 1 file dengan HTML. misalnya contoh seperti diatas. tinggal menambahkan tag <style> sesudah head kemudian masukan tag CSS nya.

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {
                  color: green;
                  text-decoration: underline;
            }
             p {
                   font-size: 25px;
                  font-family: 'Trebuchet MS', sans-serif;
                }
        </style>
    </head>
  <body>
        <h1>Hello world!</h1>
        <p>I  love CSS</p>
  </body> 
</html>

3.  CSS @import rule, ada 2 cara yang bisa digunakan dengan cara internal dan external stylesheet

Internal Style tag

<style>
@import url('/css/styles.css');
</style>

External Style Tag

<style>
@import 'https://fonts.googleapis.com/css?family=Lato';
</style>

4. Inline Styles : memasukkannya langsung ke dalam tag elemen .misalnya membuat warna pada tag heading 1 dan paragraph. namun untuk css tersebut hanya dapat digunakan pada Inline dimana tag css yang dimasukkan tidak dapat digunakan jika tag css tidak dimasukkan. contohnya heading 1  pada tulisan “Hai”  maka tulisan tersebut tidak berwarna hijau dan bergaris bawah karena tag cssnya tidak dimasukkan ke dalam inline heading 1 tersebut

<h1 style="color: green; text-decoration: underline;">Hello world!</h1>
<h1> Hai </h1>

<p style="font-size: 25px; font-family: 'Trebuchet MS';">I Love CSS</p>