Cara menggunakan contoh css inline

CSS(Cascading Style Sheet) merupakan sebuah bahasa pemrograman web yang memiliki fungsi dan tujuan untuk mengatur atau mendesign tiap-tiap komponen dari HTML seperti elemen dan tag. dengan menggunakan CSS kita dapat mengatur ukuran, warna dan bentuk dari element HTML. Mengganti font, mengatur margin dan mengatur padding dan banyak lagi yang dapat di lakukan menggunakan CSS untuk mempercantik atau men-design halaman website. Belajar CSS Dasar Cara Penulisan CSS

Table of Contents Show

Teknik penulisan CSS Inline Style
Teknik penulisan CSS Internal Style
Teknik penulisan CSS External Style
TUTORIAL MENARIK LAINNYA
Membuat Bentuk Segitiga Dengan CSS
Membuat Lingkaran Dengan CSS
Membuat Template Web Responsive Dengan HTML dan CSS
Cara Membuat Text Di Tengah Dengan HTML dan CSS – Sebenarnya cara membuat text berada di tengah sudah pernah kita jelaskan di tutorial CSS dasar ... Apa itu inline style CSS?
Atribut apakah yang digunakan untuk mendefinisikan inline CSS?
Berapa metode penggunaan CSS?
Bagaimana cara menggunakan CSS di HTML?

CSS menggunakan selector(id dan class) untuk menentukan element yang akan di modifikasi atau yang akan di beri sentuhan css. jika di ibaratkan HTML sebagai tiang pada sebuah bangunan rumah, maka CSS berfungsi sebagai cet dan dekorasi pada bangunan rumah tersebut. Ada tiga teknik metode penulisan CSS, yaitu :

Inline CSS Style
Internal CSS Style
External CSS Style

Ketiga teknik metode cara penulisan CSS(inline, internal, external) tersebut akan kita bahas pada tutorial Belajar CSS Dasar Cara Penulisan CSS di www.malasngoding.com ini.

Teknik penulisan CSS Inline Style

Cara pertama Belajar CSS Dasar Cara Penulisan CSS. Teknik penulisan syntax css dengan Inline style adalah teknik cara penulisan syntax CSS yang tidak memerlukan selector(id dan class) sehingga syntax CSS di letakkan atau langsung di sisipkan pada element HTML. syntax css di letakkan di dalam atribut style=””.

Contoh penulisan inline css style

Contoh Belajar CSS Dasar Cara Penulisan CSS. Untuk membuat contoh penulisan CSS dengan gaya inline caranya sediakan sebuah file HTML atau PHP. di sini saya menggunakan HTML. saya membuat sebuah file dengan nama index.html.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Penulisan CSS dengan Inline Style</title>

</head>

<body>

<h1 style="color:blue">Belajar CSS Dasar Di <a href="https://www.malasngoding.com">www.malasngoding.com</a></h1>

</body>

</html>

perhatikan pada contoh di atas. syntax css di letakkan dalam element h1 menggunakan atribut style=””. perintah color adalah perintah css yang berfungsi untuk mengatur warna font. jadi pada contoh inline css style ini kita membuat heading h1 dengan warna font yang kita atur menjadi blue ( biru ).
dan saat di jalankan maka hasilnya sebagai berikut:

contoh penulisan css inline style

Teknik penulisan CSS Internal Style

Teknik penulisan syntax CSS dengan Internal style adalah teknik cara penulisan syntax css yang di letakkan satu file dengan file html atau file php. syntax CSS di letakkan di dalam tag <style> dan di akhiri dengan tag </style>. biasa nya tag <style> .. </style> di letakkan pada bagian tag <head> pada HTML.

Contoh penulisan internal CSS Style

<!DOCTYPE html>

<html>

<head>

<title>Penulisan CSS dengan Internal Style</title>

#tulisan{

color: 10px;

}

.box{

background: red;

padding: 10px;

}

</style>

</head>

<body>

<h1 id="tulisan">Belajar CSS Dasar Di <a href="https://www.malasngoding.com">www.malasngoding.com</a></h1>

</div>

</body>

</html>

Perhatikan contoh penulisan internal css style di atas. syntax css di letakkan satu file dengan file html. syntax css di letakkan di dalam tag <style>. syntax css padding berfungsi sebagai pengatur jarak pada sisi dalam element. pada contoh ini kita memberikan jarak sebesar 10px atau 10 pixel. css memanggil selector class dengan tanda titik ” . ” dan memanggil selector id dengan tanda pagar ” # “.

#tulisan{

color: 10px;

}

.box{

background: red;

padding: 10px;

}

</style>

Contoh penulisan CSS internal style

Teknik penulisan CSS External Style

Teknik Belajar CSS Dasar Cara Penulisan CSS kedua. Teknik penulisan Syntax CSS dengan External Style adalah teknik penulisan yang memisahkan file css dan html. penggunaan css yang baik adalah menggunakan teknik penulisan CSS ini karena kode program kita tidak akan berantakan karena syntax css di simpan pada file css. file css dan html di hubungkan menggunakan

baca tutorial sebelumnya tentang pengertian dan pengenalan dasar CSS di www.malasngoding.com.

Contoh penulisan CSS menggunakan External Style

Untuk membuat contoh penulisan CSS dengan External style siapkan satu buah file html dan satu buah file css. di sini saya membuat sebuah file dengan nama index.html dan style.css

Belajar CSS Dasar Cara Penulisan CSS

index.html

<!DOCTYPE html>

<html>

<head>

<title>Penulisan CSS dengan External Style</title>

</head>

<body>

<h1 id="tulisan">Belajar CSS Dasar Di <a href="https://www.malasngoding.com">www.malasngoding.com</a></h1>

</div>

</body>

</html>

style.css

#tulisan{

color: 10px;

}

.box{

background: red;

padding: 10px;

}

dan jika di jalankan maka hasilnya

Contoh penulisan CSS external style

Sekianlah Belajar CSS Dasar Cara Penulisan CSS. artikel ini sangat berguna sebelum anda melanjutkan ke tutorial CSS selanjutnya di www.malasngoding.com.

Incoming search terms:

format perintah css yang benar
format penulisan css
penulisan css
cara penulisan css
contoh penulisan css
format penulisan style css
tuliskan format penulisan css untuk video menggunakan tag
Belajar css dasar part 2
penulisan syntax css yang benar
Penulisan syntax CSS

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

Author's profile
All posts by Diki Alfarabi Hadi

Tags: belajar css dari dasar, Belajar CSS Dasar Cara Penulisan CSS, cara menulis syntax css yang benar, cara penulisan css yang baik dan benar, contoh penulisan css, Contoh penulisan inline css style, css, css external, css inline, Teknik menulis syntax css yang benar, tutorial css dasar untuk pemula

Tutorial CSS Dasar

#1. Pengenalan CSS
#2. Penulisan CSS
#3. Background CSS
#4. Margin dan Padding CSS
#5. Font CSS
#6. Link / Hyperlink CSS
#7. Format Text CSS
#8. Position CSS
#9. Border CSS
#10. List CSS
#11. Float CSS
#12. Tutorial CSS Lainnya

Tutorial CSS3 Dasar

#1. Pengenalan CSS3
#2. Rounded Corner CSS3
#3. Warna Gradient CSS3
#4. Efek Bayangan CSS3
#5. Transform CSS3
#6. Transition CSS3
#7. Animasi CSS3
#8. Tutorial CSS3 Lainnya

Produk

Source Code Website Reservasi Kamar Hotel Dengan PHP dan MySQLi Rp 200,000
Source Code Aplikasi Pengajuan Cuti Karyawan Berbasis Website Rp 200,000
Source Code Toko Sport PHP dan MySQLi Rp 200,000
Source Code Sistem Informasi Kuesioner Berbasis Web Rp 200,000

Tutorial Terbaru

Tutorial Python # 13 : Jenis Operator Pada Python September 24, 2022
Membuat Laporan PDF Dengan PHP dan MySQLi September 3, 2022
Export Data ke Excel Dengan PHP dan MySQLi August 23, 2022
Membuat Select Option Dinamis Menggunakan Ajax August 17, 2022
Membuat QR Code Dengan PHP August 3, 2022

Toko Kami

SOCIAL

Malas Ngoding

TUTORIAL MENARIK LAINNYA

CSS

Membuat Bentuk Segitiga Dengan CSS

7 July 2020

Membuat Bentuk Segitiga Dengan CSS – Selamat datang kembali di tutorial css di malasngoding.com. beberapa waktu lalu ada beberapa teman-teman pembaca tutorial di malasngoding.com yang ...

Diki Alfarabi Hadi

CSS

Membuat Lingkaran Dengan CSS

25 September 2018

Membuat Lingkaran Dengan CSS Membuat Lingkaran Dengan CSS – Pada tutorial ini kita akan belajar membuat lingkaran atau nembuat bulat dengan menggunakan CSS. Memang mungkin ...

Diki Alfarabi Hadi

CSS - Web Design

Membuat Template Web Responsive Dengan HTML dan CSS

10 May 2017

Membuat Template Web Responsive Dengan HTML dan CSS – Pada tutorial ini kita akan membuat sebuah template web sederhana responsive dengan menggunakan HTML dan CSS. ...

Diki Alfarabi Hadi

CSS

Cara Membuat Text Di Tengah Dengan HTML dan CSS – Sebenarnya cara membuat text berada di tengah sudah pernah kita jelaskan di tutorial CSS dasar ... Apa itu inline style CSS?

Inline CSS Inline CSS adalah kode CSS yang dituliskan di dalam file HTML. Jenis CSS ini hanya mempengaruhi satu baris kode HTML. Inline CSS tidak bisa diaplikasikan ke semua halaman website sekaligus. Namun, jenis CSS ini tepat digunakan ketika Anda ingin membuat elemen HTML dengan format khusus di sebuah halaman.

Atribut apakah yang digunakan untuk mendefinisikan inline CSS?

Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML. Setiap elemen HTML memiliki atribut style, di situ lah inline CSS ditulis. Cara ini kurang efisien karena setiap tag HTML yang diberikan harus memiliki style masing-masing.