Belajar CSS

                            
Belajar CSS
Belajar CSS - cascading style sheets atau yang biasa disingkat css adalah aturan untuk mengontrol komponen - komponen dari sebuah web sehingga lebih terstruktur dan seragam.
css kegunaanya sangat besar yang bisa mengatur tampilan dari tag html sehingga anda bisa membuat suatu halaman web yang sangat bagus dan keren.

Sejarah CSS - Css merupakan sebuah teknologi internet yang telah direkomendasikan world wide web consortium pada tahun 1992. setelah css distandarsasikan oleh beberapa aplikasi browser seperti internet explorer, netscape dll.

Contoh penulisan css : 
p{ color:#0f0; font-size:70px;}
penulisan dokumen css biasanya didalam tag <style> diakhiri </style> atau bisa juga memanggil file css dari halaman web dengan tag <link src="new.css" rel="stylesheets"/> . Masih ada cara lain untuk memakai css didalam tag html. contoh <div style="background:#0f0;"></div>. Dan bila kalian ingin memanggil file css menggunakan format *.css

Berikut adalah selector-selector pada CSS dan fungsi dari selectortersebut serta cara penulisannya;
body
Adalah keseluruhan badan CSS, dari header sampai footer.
body {background:#fff; border:none; margin:0px; padding:0px}
a
Adalah warna link pada CSS.
a {color:#f00}
#header
Adalah elemen bagian atas/kepala.
#header {background:#000; border:none; margin:0px; padding:3px;text-align:center;}
.heading a
Adalah element untuk mengatur warna link judul Blog.
.heading a {color:#00f; text-align:center; font-size:50px;}
#header h1
Adalah element pembungkus link judul Blog.
#header h1 {margin:0px; padding:2px}
#header h2
Adalah element pembungkus diskripsi Blog.
#header h2 {margin:0px: padding:2px}
.heading
Adalah element untuk mengatur warna pada link Blog setelah membuka postingan penuh.
.heading {color:#00f; text-align:center; font-size:30px;}
.description
Adalah element untuk mengatur warna pada diskripsi Blog.
.description {color:#00f; text-align:center; margin:0px; padding:0px;}
#navigation
Adalah element pembungkus link Home, About, Navigation.
#navigation {background:#999; text-align:center; padding:10px 0px 0px 0px; border:none; margin:0px}
#navigation a
Adalah element untuk mengatur warna link Home, About, Navigation.
#navigation a {color:#fff; border:none; margin:5px 8px 0px 8px; padding:5px 8px 5px 8px; text-align:center}
#search-form
Adalah element pembungkus pencarian artikel di Blog.
#search-form {background:#fff; padding:5px; border:none; margin:0px; text-align:center}
#search-form [type=text]
Adalah element untuk memasukkan keyword artikel yang akan dicari di Blog.
#search-form [type=text] {background:#fff; padding:1px; border:1px solid #000; margin:1px; color:#000; width:70%; height:22px;}
#search-form [type=submit]
Adalah element untuk mengatur tombol searh pada penarian artikel.
#search-form [type=submit] {background:#fff url(http://url_icon_search) center no-repeat; padding:1px; border:1px solid #000; margin:1px; font-size:0; width:25%; height:25px;}
#comments,#content;;
Adalah element element pembungkus seluruh postingan.
#comments,#content {background:transparent; border:none; margin:3px; padding:3px}
.post
Adalah elemen pembungkus postingan.
.post {background:#fff; border:none; margin:5px; padding:3px}
.post .post-meta
Adalah element pembungkus judul postingan, by admin dan tanggal waktu postingan.
.post .post-meta {background:#fff; padding:0px; border:1px solid #dcdcdc; margin:0px;text-align:left; color:#000}
.post .post-meta h2
Adalah element pembungkus judul postingan saja.
.post .post-meta h2 {border:none; margin:0px; text-align:left;}
.post .post-meta h2 a
Adalah Adalah element mengatur link judul postingan.
.post .post-meta h2 a {color:#00f}
.post .post-content
Adalah element untuk mengatur isi postingan pada home page (belum dibuka full)
.post .post-content {padding:7px; color:#000; text-align:left}
.thumbnail
Adalah element untuk mengatur gambar postingan pada home page (belum dibuka full).
.thumbnail {border:1px solid #ccc !important; background:white !important; margin:2px !important; width:60px !important; height:60px !important; padding:3px !important}
.post-meta2
Adalah element pembungkus jumlah komentar pada postingan home page (belum dibuka full).
.post-meta2 {background:#fff; border:none; padding:5px; margin:0px;text-align:right}
.post-meta2 a
Adalah element untuk mengatur warna link jumlah komentar pada home page (belum dibuka full).
.post-meta2 a {color:#00f}
#pagination-links
Adalah element pembungkus link halaman pada home page. [1][2][3][>]
#pagination-links {background:#fff; border:none; margin:5px; padding:5px 0px 5px 0px;text-align:right}
#pagination-links span
Adalah element untuk mengatur link halaman yang sudah dibuka.
#pagination-links span {color:#000}
#pagination-links a
Adalah elwment untuk mengatur warna link halaman yang belum dibuka.
#pagination-links a {color:#00f}
#bottom-content
Adalah element pembungkus Navigation, Category, Blogroll.
#bottom-content {background:transparent; border:none; margin:0px; padding:3px}
#navigation-menu ul
Adalah element pembungkus daftar Navigasi.
#navigation-menu ul {background:#fff; border:1px solid #000; margin:5px; padding:3px}
#navigation-menu h3
Adalah element pembungkus judul Navigasi.
#navigation-menu h3 {background:url(http://url_gambar) repeat-x;border:1px solid #ddd; margin:5px; padding:2px; font-size:50px}
#navigation-menu h3 a
Adalah element untuk mengatur warna Navigasi.
#navigation-menu h3 a {color:#00f}
#navigation-menu li
Adalah element pembungkus link daftar Navigasi.
#navigation-menu li {list-style:none; border-bottom:1px solid #000; padding:3px; color:#00f}
#navigation-menu li a
Adalah element untuk mengatur warna link daftar Navigasi.
#navigation-menu li a {color:#00f}
#navigation-menu ol
Adalah element untuk mengatur jarak antara link daftar Navigasi.
#navigation-menu ol {margin:-3px; padding:3px}
#category-bottom h3
Adalah element pembungkus judul Categories.
#category-bottom h3 {background:url(http://url_gambar) repeat-x;border:1px solid #ddd; margin:5px; padding:2px; font-size:50px}
#category-bottom h3 a
Adalah element untuk mengatur warna judul Categories.
#category-bottom h3 a {color:#fff}
#category-bottom ul
Adalah element pembungkus daftar Categori.
#category-bottom ul {background:#fff; border:1px solid #ddd; margin:5px; padding:0px}
#category-bottom li
Adalah element pembungkus link daftar Categories.
#category-bottom li {list-style-image:url(http:url_icon); list-style-position:inside; border-bottom:1px solid #000; padding:3px; color:#00f}
#category-bottom li a
Adalah element untuk mengatur warna daftar link Categories.
#category-bottom li a {color:#00f}
#category-bottom ol
Adalah element untuk mengatur jarak antara link daftar Categories.
#category-bottom ol {margin:-3px; padding:3px}
#blogroll h3
Adalah element pembungkus judul Blogrool.
#blogroll h3 {background:url(http://url_gambar) repeat-x; border:1px solid #ddd; margin:5px; padding:2px; font-size:50px}
#category-bottom h3 a
Adalah element untuk mengatur warna judul Categories.
#category-bottom h3 a {color:#00f}
#category-bottom ul
Adalah element pembungkus daftar Categories.
#category-bottom ul {background:#fff; border:1px solid #ddd; margin:5px; padding:0px}
#category-bottom li
Adalah element pembungkus link daftar Categories.
#category-bottom li {list-style-image:url(http://url_icon); list-style-position:inside; border-bottom:1px solid #000; padding:3px; color:#000}
#category-bottom li a
Adalah element untuk mengatur warna link daftar Categories.
#category-bottom li a {color:#00f}
#category-bottom ol
Adalah element mengatur jarak antar link daftar Categories.
#category-bottom ol {margin:-3px; padding:3px}
#blogroll h3
Adalah element pembungkus Blogroll.
#blogroll h3 {background:url(http://url_gambar) repeat-x; border:1px solid #ddd; margin:5px; padding:2px;font-size:50px}
#blogroll h3 a
Adalah element untuk mengatur warna judul Blogroll.
#blogroll h3 a {color:#fff}
#blogroll ul
Adalah element pembungkus judul Blogroll.
#blogroll ul {background:#fff; border:1px solid #ddd; margin:5px; padding:0px}
#blogroll li
Adalah element pembungkus link daftar Blogroll.
#blogroll li {list-style-image:url(http://url_icon); list-style-position:inside; border-bottom:1px solid #000; padding:3px; color:#00f}
#blogroll li a
Adalah element untuk mengatur warna daftar link Blogroll.
#blogroll li a {color:#00f}
#blogroll ol
Adalah element mengatur jarak antar link daftar Blogroll.
#blogroll ol {margin:-3px; padding:3px}
.post-single .post-meta
Adalah element pembungkus postingan pada single post (postingan yang sudah dibuka full).
.post-single .post-meta {background:#fff; color:#000; text-align:left; border:1px solid #ddd; padding:0px; margin:0px}
.post-single .post-meta h1
Adalah element pembungkus judul postingan, by admin, tanggal waktu posting dan kategory postingan. Pada postingan single post (postingan sudah dibuka full).
.post-single .post-meta h1 {background:#fff; border:none; padding:0px; margin:0px;text-align:left}
.post-single .post-meta h2
Adalah element pembungkus kategori postingan pada postingan single post (postingan sudah dibuka full)
.post-single .post-meta h2 {background:#fff; color:#000; border:none; padding:0px; margin:0px}
.post-content
Adalah element mengatur isi postingan pada single post (postingan yang sudah dibuka full).
.post-content {padding:5px; color:#000; text-align:left}
#share-buttons
Adalah element pembungkus icon share facebook dan twitter.
#share-buttons {background#fff; text-align:center; border-top:1px solid #ddd; margin:0px; padding:5px}
#share-buttons a
Adalah element untuk mengatur icon facebook dan twitter.
#share-buttons a {text-align:center}
#recent-posts-list h4Adalah element pembungkus judul recent post.
#recent-posts-list h4 {background:url(http://url_gambar) repeat-x; border:1px solid #ddd; margin:5px; padding:2px; font-size:50px}
#recent-posts-list h4 a
Adalah element mengatur warna recent post.
#recent-posts-list h4 a {color:#00f}
#recent-posts-list li
Adalah element pembungkus daftar recent post.
#recent-posts-list li {list-style:none; border-bottom:1px solid #000; padding:3px; color:#00f}
#recent-posts-list li a
Adalah element untuk mengatur warna daftar link recent post.
#recent-posts-list li a {color:#00f}
#recent-posts-list ol
Adalah element untuk mengatur jarak antar link daftar recent post.
#recent-posts-list ol {margin:-3px; padding:3px}
#comments
Adalah element pembungkus seluruh komentar.
#comments {background:#fff; margin:0px; padding:0px; border:none}
#comments h3
Adalah elemen pembungkus jumlah komentar.
#comments h3 {background:url(http://url_gambar) repeat-x; border:1px solid #ddd; margin:5px; padding:2px;font-size:50px}
#comments h3 a
Adalah element untuk mengatur warna judul comment.
#comments h3 a {color:#00f}
#comments h4
Adalah element mengatur jumlah tanggapan atau responses.
#comments h4 {background:#fff; text-align:center; margin:5px; padding:5px 0px 5px 0px; border:1px solid #ddd}
#comments h5
Adalah element mengatur kalimat subcribe RSS | ATOM
#comments h5 {background:#fff; text-align:center; margin:5px; padding:5px 0px 5px 0px; border:1px solid #000}
#comments
Adalah element pembungkus isi komentar.
#comments {background:#fff; margin:3px; padding:0px; border:none}
.comment-header
Adalah element pembungkus nama komentator.
.comment-header {background:#fff; padding:0px; color:#00f; margin-top:5px; border:1px solid #ddd; text-align:left}
.comment-header h5
Adalah element pembungkus nama komentator yang tidak sign in.
.comment-header h5 {background:#fff; color:#000; padding:0px; margin:0px; border:none; text-align:left}
.comment-header h5 a
Adalah element mengatur warna nama komentator yang sign in.
.comment-header h5 a {color:#00f}
.comment-content
Adalah element mengatur isi komentar.
.comment-content {padding:5px; color:#000; text-align:left}
#new-entry h3
Adalah element pembungkus new comment.
#new-entry h3 {background:url(http://url_gambar) repeat-x; border:1px solid #ddd; margin:5px; padding:2px; font-size:50px}
#new-entry h3 a
Adalah element untuk mengatur warna new comment.
#new-entry h3 a {color:#00f}
#comments form
Adalah element pembungkus form komentar.
#comments form {background:#fff; text-align:center; border:none; margin:0px; padding:0px; color:#000}
#comments form [type=text]
Adalah element pembungkus nama dan email si komentar.
#comments form [type=text] {background:#fff; padding:0px; border:1px solid #ddd; margin:0px; color:#000; width:200px; height:23px;}
#comments form textarea
Adalah element kotak tempat menulis komentar.
#comments form textarea {width:200px; height:70px; text-align;center; color:#000; background:#fff; border:1px solid #000}
#comments form [type=submit]
Adalah element tombol post comment.
#comments form [type=submit] {background:#ddd; padding:0px; border:none; margin:5px 0px 5px 0px; color:#fff; width:205px; height:25px;}
#comments li
Adalah element pembungkus posted succesfully.
#comments li {list-style:none;text-align:center; border:none; padding:3px; margin:0px; color:#00f}
#comments ol
Adalah element mengatur jarak #comment li.
#comments ol {margin:3px; padding:3px}
#comment-forms small
Adalah element mengatur tulisan You can Code BBcode.
#comment-form small {color:#000; text-align:center}
.link top a
Adalah element mengatur Go to top.
.link top a {color:#00f}
.highlightAdalah element mengatur show filed under dan content posted sucsesfully.
.highlight {padding:6px; margin:0; background:#fff; color:#fff; text-align:center}
#footer
Adalah element paling bawah.
#footer {background:#fff; text-align:center; margin:5px; padding:5px 0px 5px 0px; border:1px solid #dcdcdc; color:#00f}
#footer a
Adalah element untuk warna link pada footer.
#footer a {color:#00f}
#footer h6
Adalah elemen pembungkus powered by mywapblog.
#footer h6 {margin:0px; padding:0px}
#following list h4
Adalah element mengatur bagian judul following list di halaman about.
#following list h4 {background:#fff; padding:3px; margin:2px 3px}
#footer #powered by
Adalah element untuk mengatur tulusan powered by.
#footer #powered-by {color:#000; font-size:12px}
#footer #powered-by a
Adalah element untuk mengatur link mywapblog.
#footer #powered-by a {color:#00f; font-size:12px}
#footer span
Adalah element mengatur visitor counter.
#footer span {background:#fff; border:1px dashed #000}
#footer:after
Adalah element untuk menambah kalimat bagian bawah (by creator).
#footer:after {content:"simple.css by Ahmad W" !important;color:#000;}
Oke, gan. semoga bermanfaat :V di postingan kali ini walau dikit tapi berarti besar :v .

Comments

Post a Comment