LulusanSkom : Css

Tampilkan postingan dengan label Css. Tampilkan semua postingan

Rabu, 26 Februari 2020

Belajar Css, Merubah Warna Background Halaman Website

Assalamualaikum

Belajar CSS Mengubah Background Dengan CSS

Background atau latar belakang pada sebuah halaman website merupakan salah satu
bagian yang wajib di design untuk menghasilkan sebuah halaman website yang terlihat menarik dan modern. ada beberapa cara mempercantik background atau latar belakang website. bisa mempercantik background website dengan menggunakan gambar. jika tidak ingin menggunakan gambar bisa juga dengan mengubah warna background dengan bantuan CSS. untuk mengubah background dengan CSS gunakan property background pada CSS. property background selain di
gunakan untuk mengubah background body website bisa juga di gunakan untuk mengubah gambar
background pada sebuah elemen HTML yang di inginkan.

Cara mengubah background dengan CSS

pada tutorial belajar CSS mengubah background dengan css ini akan di jelaskan bagaimana cara mengubah background dengan menggunakan CSS. langsung saja masuk ke cara mengubah background menggunakan CSS.

Tahapan

buat sebuah file html dengan nama file dengan nama index.html.
kemudian buat sebuah file css dengan namanya juga dengan nama style.css
kita akan menggunakan penulisan dengan gaya external

href="../style.css"

Mengubah warna background dengan CSS

File index.html yang sudah kita buat
index.html


        <!DOCTYPE html>
<html lang="en">
<head>">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <h1>Merubah Warna Background Dengan CSS</h1>
</body>
</html>

File style.css


        body{
            background-color: sandybrown;
            color:#fff;
        }

pada syntax css kita menentukan body yang akan di modifikasi kemudian memberikan property background dengan value
sandybrown dan warna color font dengan warna white #fff.

Hasilya Seperti gambar di bawah ini

Bagaimana Kalau Mau mengubah warna background dengan gambar

Pertama kita harus menyiapkan gambar yang mau di jadikan background dan kita modif sedikit code di css kita
Berikut code css yang kita modif style.css

        body{
            background-image:url("css.jpg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            height: 100%;
        }

Hasilya Seperti gambar di bawah ini

Sekian lah tutorial dasar tentang belajar merubah background warna dan gambar.

Silahkan Dicoba dan Semoga Bermanfaat

Sabtu, 15 Februari 2020

Belajar Css Part2: Implementasi Penulisan Css

Css LulusanSkom 16.20

Belajar CSS Dasar Cara Penulisan CSS

Assalamuakaikum...

Melanjutkan dari sesi belajar CSS dasar part1 dan sekarang dengan izin Allah Kita Belajar bareng di Implentasi penulisan css di website.
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 halamanwebsite.

Belajar CSS Dasar Cara Penulisan CSS
CSS menggunakan selector(id dan class) untuk menentukan element yang akan di modifikasi atau yang akan di berisentuhan css. css dan html saling melengkapi, untuk menghasilkan tampilan web yang keren

Ada tiga teknik metode penulisan CSS, yaitu :

Inline CSS Style
Internal CSS Style
External CSS Style

Teknik penulisan CSS Inline Style

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.

<h3 style="color:red">Ini Cara Penulisan menggunakan Inline Style</h3>

perhatikan pada contoh di atas. syntax css di letakkan dalam element h3 menggunakan atribut
.perintah color adalah perintah css yang berfungsi untuk mengatur warna font. jadi pada contoh
inline css style ini kita membuat heading h3 dengan warna font yang kita atur menjadi red ( merah ).

dan saat di jalankan maka hasilnya sebagai berikut:

Hasil setelah dibuka dibrowser

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
dan di akhiri dengan biasa nya tag di letakkan pada bagian tag pada HTML.

Contoh penulisan internal CSS Style


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: sandybrown;
            padding: 15pt;
        }
        #h3{
            color:#fff;
        }
    </style>
</head>
<body>
    <div class="box">
        <h3 id="h3">Ini Cara Penulisan menggunakan cara Inline Css Style</h3>
    </div>
</body>
</html>

dan saat di jalankan maka hasilnya sebagai berikut:

Hasil setelah dibuka dirowser

Perhatikan contoh penulisan internal css style di atas. syntax css di letakkan satu file dengan file
html. syntax css di letakkan di dalam tag . 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 #.

Teknik penulisan CSS External Style

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

Contoh penulisan External CSS Style

File Index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">
        <h3 id="h3">Ini Cara Penulisan menggunakan cara Inline Css Style</h3>
    </div>
</body>
</html>

File style.css


    .box{
        background-color: sandybrown;
        padding: 15pt;
    }
    #h3{
        color:#fff;
    }

Hasil Dari Css

Hasil setelah dibuka dibrowser

Sekianlah Belajar CSS Dasar Cara Penulisan CSS. Mudah Bukan? Silakan dicoba Semoga Bermanfaat

Jumat, 14 Februari 2020

Belajar Css Dasar Part1

Css LulusanSkom 20.44

CSS Pengertian dan Pengenalan CSS

CSS merupakan singkatan dari Cascading Style Sheets. sesuai dengan namanya CSS memiliki sifat
style sheet language yang berarti bahasa pemrograman yang di gunakan untuk web design. CSS
adalah bahasa pemrograman yang di gunakan untuk men-design sebuah halaman website. dalam mendesign halaman website CSS menggunakan penanda yang kita kenal dengan id dan class.
Seiring berkembang nya dunia pemrograman dan teknologi, CSS tidak cuma di gunakan di HTML dan XHTML saja. tapi sudah bisa di gunakan untuk mendesign tampilan aplikasi android. CSS di akses menggunakan id atau class. untuk contoh penulisannya perhatikan pada contoh berikut ini. untuk lebih jelasnya akan saya jelaskan pada tutorial
selanjutnya di tutorial belajar CSS dasar

Fungsi dan Kegunaan CSS

CSS dapat mengubah font, ukuran font, warna dan format font. mengatur ukuran layout, lebar tinggi dan warna element, mengubah tampilan form, membuat halaman website yang responsive dan masih banyak lagi yang dapat di lakukan oleh css.
Untuk men-desain font dapat dilakukan dengan mendefinisikan font , untuk mengatur warna bisa menggunakan color, margins digunakan untuk mengatur jarak pada luar element tertetu. mengatur warna atau gambar pada latar belakang bisa menggunakan background. mengatur ukuran font gunakan font size.jenis font menggunakan font-family danbanyak lagi lainnya.

Cara Penggunaan CSS

File css di simpan dengan ekstensi .css. kemudian di import atau di hubungkan kedalam file HTML atau PHP yang
ingin kita design dengan CSS menggunakan syntax berikut ini.

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

dengan tag link seperti di atas di gunakan untuk menghubungkan file html dengan file css. syntax di atas diletakkan pada file html. pada atribut rel dan type di tag link di atas di gunakan untuk mendefinisikan bahwa yang di panggil atau yang di hubungkan adalah file Style sheet atau css. kemudian atribut href di gunakan untuk meletakkan letak file css. pada contoh di atas file style.css terletak satu folder atau direktori dengan file html yang di tambahkan syntax di atas.
jika file css terletak di luar folder maka bisa menghubungkanya dengan

href="../style.css"

jika file css terletak dalam sebuah folder. katakan saja nama foldernya adalah assets. maka untuk
menghubungkannya

href="assets/style.css"

sekian lah tutorial dasar tentang belajar css pengertian dan pengenalan CSS.
untuk selanjutnya akan di jelaskan pada tutorial belajar CSS dasar pada postingan
selanjutnya. Silankan Dicoba Semoga Bermanfaat

Minggu, 13 Oktober 2019

Implementasi Penggunaan Css Scroll part3

Css LulusanSkom 12.19

Tahapan untuk implementasi css scroll

Di taruh dalam tag div
Scroll sendiri manfaatnya untuk menghemat space halaman website contoh penggunaan scroll

Hasil dari penggunaan scroll

CSS SCROLL

Sintak kodenya


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.scroll{
padding: 10px;
overflow-y: auto;
height: 250px;
/*script tambahan khusus untuk IE */
scrollbar-face-color: #CE7E00;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #6F4709;
scrollbar-3dlight-color: #111111;
scrollbar-darkshadow-color: #6F4709;
scrollbar-track-color: #FFE8C1;
scrollbar-arrow-color: #6F4709;
}
</style>
</head>
<body>
<div class="scroll">
<div class="panel-heading">CSS SCROLL</div>
<div class="panel-heading">CSS SCROLL</div>
<div class="panel-heading">CSS SCROLL</div>
<div class="panel-heading">CSS SCROLL</div>
<div class="panel-heading">CSS SCROLL</div>
<div class="panel-heading">CSS SCROLL</div>
<div class="panel-heading">CSS SCROLL</div>
<div class="panel-heading">CSS SCROLL</div>
<div class="panel-heading">CSS SCROLL</div>
<div class="panel-heading">CSS SCROLL</div>
<div class="panel-heading">CSS SCROLL</div>
<div class="panel-heading">CSS SCROLL</div>
<div class="panel-heading">CSS SCROLL</div>
<div class="panel-heading">CSS SCROLL</div>
</div>
</body>
</html>

Semoga Bermanfaat

LulusanSkom