Cara Membuat CSS (Eksternal)

Menurut Wikipedia :

Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading,subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warnahyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Buat lah file untuk HTML dan mengisi tag HTML, membuat Header dan Memasukkan Link Style CSS di dalam HTML

<html>

<head>

<title>Art Program</title>

<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>

<div id="wrap">

<div id="header">
<p><center> Ini Adalah Header </center></p>
<h1><a href="#">SELAMAT DATANG</a></h1>
<h2>Senin, 09 Mei 2016</h2>
</div>

Hasil :

Membuat Body

<div class="left">

<p><center> Ini Adalah Body </center></p>

<h2><a href="#">Cara membuat CSS</a></h2>

<div class="articles">

CSS memiliki 3 macam yaitu inline, internal, dan eksternal. Untuk contoh inline <a href="file:///D:/Kuliah/Muqorrobin%20-%20Latihan%20PBW/Latihan%208.html">klik disini</a>. Di inline dalam pengembangan digunakan untuk postingan, contohnya membuat text berwarna berbeda dan menambahkan background, menggabungkan style dan menambahkan gambar pada background

<br /><br />

<img src="images/Robin Cover CSS.png" height="150" width="550" alt="Example pic" style="border: 3px solid #ccc;" />

<br /><br />

Untuk contoh internal <a href="file:///D:/Kuliah/Muqorrobin%20-%20Latihan%20PBW/Latihan%209.html">klik disini</a>. Di bagian internal (Embeded Style Sheet) yaitu penulisan CSS dengan mendefinisikan dulu didalam sebuah tag. Pada pendefinisian ini atributkan atribut-atribut CSS yang akan digunakan tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.

<br/><br/>

CSS external adalah CSS yang ditulis didalam berkas style.css dan diletakkan ditempat khusus atau bahkan diluar dari situs tersebut. Berkas CSS itu bersxtensi css,bisa di beri nama yang memudahkan untuk diingat,misalnya cssku-page1.css. Rumor mengatakan bahwa css external itu lebih meringankan loading blog?…saya kurang tahu pasti.Tergantung pilihan anda,lebih suka cara yang mana.

</div>

<div class="articles">

</div>

</div>

Hasil :

Membuat Side Bar

<div class="right">

<p><center>Ini Adalah Side Bar</center></p>

<h2>Categories :</h2>

<ul>

<li><a href="#">SQL (CMD)</a></li>

<li><a href="#">Visual Basic</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">Ilustrator</a></li>

<li><a href="#">Flash</a></li>

<li><a href="#">ORACLE</a></li>

</ul>

<h2>Archives</h2>

<ul>

<li><a href="#">January 2016</a></li>

<li><a href="#">February 2016</a></li>

<li><a href="#">March 2016</a></li>

<li><a href="#">April 2016</a></li>

<li><a href="#">May 2016</a></li>

<li><a href="#">June 2016</a></li>

<li><a href="#">July 2016</a></li>

<li><a href="#">August 2016</a></li>

<li><a href="#">September 2016</a></li>

<li><a href="#">October 2016</a></li>

<li><a href="#">November 2016</a></li>

<li><a href="#">December 2016</a></li>

</ul>

</div>

Hasil :

Membuat Footer

<div style="clear: both;"> </div>

<div id="footer">

<p>Ini Adalah Footer</p>

<a href="http://theartprogram.blogspot.co.id/">The Art Program</a>

</div>

</div>

</body>

</html>

Hasil :

Buat lah file baru untuk CSS

* {

padding: 0;

margin: 0;

}

body {

background: #000;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

line-height: 18px;

color: #aaa;

}

img { border: none; }

a { color: #97C4FF; text-decoration: none;}

a:hover { text-decoration: underline; color : #aaa; }

#wrap {

margin: 40px auto 0 auto;

width: 800px;

}

#header {

border: 5px solid #222;

height: 100px;

background: #333;

}

#header h1 {

font-size: 26px;

font-weight: 100;

letter-spacing: -3px;

padding: 12px 0 5px 10px;

}

#header h1 a {

color: #fff;

text-decoration: none;

}

#header h1 a:hover {

color: #aaa;

text-decoration: none;

}

#header h2 {

color: #ccc;

font-size: 15px;

font-weight: 100;

padding: 0 0 0 11px;

letter-spacing: -1px;

line-height: 12px;

}

.left {

margin-top: 10px;

width: 570px;

float: left;

text-align: justify;

border: 5px solid #222;

padding: 10px;

background: #333;

}

.left h2 {

color: #FF4800;

font-size: 24px;

letter-spacing: -3px;

font-weight: 100;

padding : 10px 0 15px 0;

}

.right {

margin-top: 10px;

width: 160px;

float: right;

border: 5px solid #222;

font-size: 12px;

padding: 10px;

background: #333;

}

.right ul {

list-style-type: square;

padding: 5px 10px 10px 20px;

color: #59799F;

}

.right h2 {

height: 30px;

font-size: 12px;

color: #666;

line-height: 30px;

}

.right a { text-decoration: none }

#footer {

margin-top: 10px;

text-align: center;

color: #eee;

font-size: 11px;

border: 5px solid #222;

padding: 10px;

background: #333;

}

Dari coding yang telah tertera silahkan di gabungkan saja, dan jadilah sebuah website dengan CSS sederhana

sumber : https://id.wikipedia.org/wiki/Cascading_Style_Sheets

2 Tanggapan untuk "Cara Membuat CSS (Eksternal)"

Shikamaru Nara5 September 2019 at 00:14
terimakasih atas infonya
lampu servis hp
Unknown13 March 2020 at 22:57
Terima kasih kak artikel nya bermanfaat dan mudah di pahami. Untuk artikel selanjutnya tambahkan juga cara membuat CSS (internalnya) kak dan kodingan yg lainnya. Terima kasih
Nama saya: yulimda Sari
Nim: 1922500197
Dan link web kampus saya
https://www.atmaluhur.ac.id/