1.1 Pendahuluan
Apa Itu CSS?
CSS adalah singkatan dari Cascading Style Sheets. Kalau baca
di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud
adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.
Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira
arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk
mengatur format / tampilan suatu halaman HTML.
Keuntungan Penggunaan CSS
Jika anda memiliki beberapa halaman website dimana anda
menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan
arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu
halaman website anda dan merubah tipe font dari arial menjadi trebuchet.
Dengan menggunakan css, dimana semua halaman web memakai css
yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua
halaman web dari arial ke trebuchet.
Jadi, keuntungan menggunakan CSS, lebih praktis!
Kekurangan Penggunaan CSS
Tidak semua browser mengartikan kode CSS dengan cara yang
sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang
satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan
supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser
tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua
browser.
1.2 Syntax CSS
Syntax / kalimat CSS terdiri dari beberapa set peraturan
yang memiliki: 1 selector, 1 property, 1 value.
Format penulisan kalimat CSS:
selector { property: value }
Selector itu untuk menunjukkan bagian mana yang hendak
diatur / diformat.
Property untuk menunjukkan, bagian (properti) dari selector
yang hendak diatur.
Contoh Syntax:
h1 { color: red }
Contoh di atas menunjukkan
Selector: h1
Property: color
Value: red
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira
begini: Mengatur color dari h1 ke warna merah (red).
Pengelompokan Selectors
Anda dapat menulis satu kode CSS untuk berbagai macam
selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1,
h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:
h1,h2,h3 { color: red }
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.
Penggunaan Banyak Properties
Untuk mengatur lebih dari satu properties gunakan pemisah
titik koma ( ; ).
Contoh:
h1,h2,h3 {color:red; font-family:arial; font-size:150%;}
Pada contoh di atas, tag h1, h2 dan h3 di atur agar
menggunakan warna merah, dengan type font arial, dan ukuran font 150%.
Cara Penulisan Yang Baik
Sangat disarankan untuk menulis kode CSS menggunakan
beberapa baris dimana pengaturan property dan values nya di indent. Ya cuma
biar rapih dan lebih mudah di baca aja sih, ga harus kok.
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
Sekarang anda sudah mengerti aturan dasar penulisan kalimat
CSS. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan kode CSS ke
halaman website.
CSS Comment
Kadang kala, ada baiknya anda menuliskan komentar ke dalam
kode CSS anda untuk memberi catatan pengingat.
Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk
menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan
dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.
/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}
1.3 Implementasi CSS
Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman
web, yaitu:
·
Inline CSS
·
Embed atau memasang kode
css ke dalam bagian <head>
·
Nge link ke external CSS
·
Import CSS file
1.3.1 Inline CSS
Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di
format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS.
Cara ini sebaiknya hanya digunakan jika anda mau memformat
suatu elemen satu kali saja.
Contoh:
<P style=”color:blue”>
Isi paragraf.
</p>
Pada contoh di atas, elemen paragraf <P> di format
agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan
warna biru, karena format ini hanya berlaku pada elemen paragraf yang
ditentukan kode CSS nya.
Penulisan CSS dengan cara ini di mulai dengan kata style:
lalu di ikuti dengan syntax property: value.
1.3.2 Embedded CSS
Anda bisa juga menempelkan kode CSS di antara tag
<head> dan </head>. Penulisan CSS dengan cara ini diawali dengan
tag <style> dan diakhiri dengan tag </style>.
Contoh:
<head>
<style type="text/css" media=screen>
p {color:blue;}
</style>
</head>
Dalam contoh di atas semua elemen <P> dalam halaman
web tersebut akan diformat menggunakan
font berwarna biru.
1.3.3 External CSS
Kode CSS external di tulis dalam satu file terpisah yang
disimpan dengan akhiran .css. Anda lalu perlu memanggil file CSS tersebut ke
dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu
memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi
ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Contoh:
Anda membuat satu file dengan notepad atau teks editor lain,
dan berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file
tersebut.
p {font-family: arial; font-size: small;}
h1 {color: red; }
Langkah kedua adalah memanggil file style.css dari semua
halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag
<head> dan </head>
<head>
<link rel=”stylesheet” href=”style.css”
type=”text/css”>
</head>
1.3.4 Import CSS
Anda bisa juga meng-import CSS ke dalam suatu halaman
website menggunakan tag import.
Contoh:
@import "style.css";
atau
@import url("style.css");
Penggunaan Lebih dari Satu Kode CSS
Apabila ada lebih dari satu kode CSS untuk satu elemen, maka
yang akan digunakan adalah kode yang lebih spesifik.
Misalkan dalam satu halaman web, menggunakan eksternal style
sheet untuk memformat elemen H1 sbb:
h1 {
color: red;
text-align: left;
font-size: 8pt
}
Sementara di halaman web yang sama, di antara tag
<head> ada kode CSS sbb:
h1 {
text-align: right;
font-size: 20pt
}
Perhatikan bagaimana pemformatan saling bertabrakan, dari
eksternal style sheet, text-align=left sementara dari internal style sheet,
text-align=right.
Dalam kasus seperti ini, maka yang akan aktif adalah kode
yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik
dibandingkan eksternal style sheet.
Jadi, dalam contoh di atas, kode yang akan diimplementasikan
adalah sbb:
color: red;
text-align: right;
font-size: 20pt
1.4 Class dan ID Selector
Misalkan anda membuat kode CSS untuk tag <h1>.
Sekarang bagaimana jika anda ingin memformat tag <h1> dengan warna /
property berbeda? Misalkan, anda ingin tag <h1> di kolom kiri berwarna
biru sementara tag <h1> di kolom tengah berwarna hitam.
Untuk kasus seperti ini, anda bisa menggunakan Class
selector dan ID selector.
1.4.1 Class Selector
Class selector adalah penggabungan beberapa properties yang
digunakan lebih dari satu kali.
Cara penulisan Class Selector:
.nama-class {property:value;}
Untuk menempelkan class ke dalam tag HTML:
taghtml.nama-class {Property:value;}
Perhatikan tanda titik di setiap awal nama Class. Jika anda
ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div
class=nama-class> dan di akhiri dengan tag </div>.
Contoh:
Penulisan kode CSS:
.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian kode CSS
<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna
biru</h1>
Hasil:
Teks tengah akan berwarna merah.
Tag H1 tengah akan berwarna hitam
Tag H1 kiri akan berwarna biru
ID Selector
ID Selector mirip dengan Class selector. Untuk
membedakannya, gunakanlah ID selector untuk memformat bagian yang hanya muncul
satu kali dalam satu halaman web, misalnya untuk memformat bagian menu /
sidebar.
Cara penulisan ID Selector:
#nama-ID {property:value;}
Untuk menempelkan ID selector ke dalam tag HTML:
taghtml#nama-ID {Property:value;}
Perhatikan tanda # di setiap awal nama ID. Jika anda ingin
menggunakan class selector di luar kode HTML anda menggunakan tag <div
id=nama-ID> dan di akhiri dengan tag </div>.
1.5 CSS Font
CSS dapat memformat font dengan berbagai macam cara mulai
dari pengaturan tipe font, ukuran, dll. Saya akan coba bahas satu per satu ya.
1.5.1 CSS Font Family
Kalau anda biasa menggunakan ms word atau aplikasi lainnya
dimana anda bisa merubah jenis / tipe font, pasti anda sudah mengenal nama-nama
font seperti: arial, verdana, times new roman dll. Nah kalau di CSS kita sebut
tipe font ini Font Family.
Cara penulisan:
property -> font-family
value -> nama-nama font, disarankan menggunakan hanya
nama-nama font default
Contoh penulisan:
h1 {
font-family: verdana;
}
h2 {
font-family: “times new roman”;
}
Hasil:
Ini adalah Heading 1 (H1) menggunakan font Verdana
Ini adalah Heading 2 (H2) menggunakan font Times New Roman
1.5.2 CSS Font Size
CSS font size menentukan ukuran font pada bagian tertentu.
Dengan menggunakan property ini, memudahkan kita untuk mengatur ukuran font
berbeda-beda dalam satu halaman website.
Cara penulisan:
property -> font-size
value -> Ada berbagai macam cara penulisan value sbb:
Menentukan ukuran font secara absolut:
xx-small
x-small
small
medium
large
x-large
xx-large
Menentukan ukuran secara relatif:
larger
smaller
Menentukan berdasarkan ukuran pasti:
Menggunakan satuan ukuran px, misalnya: 10px, 12px. Angka
negatif tidak diperbolehkan.
Menentukan ukuran berdasarkan persen:
Menentukan ukuran lebih besar atau lebih kecil sebesar x%
dari ukuran font dari element sebelumnya (parent element). Misalnya: 110% atau
80%.
Contoh penulisan:
h1 {
font-size: 14px;
}
h2 {
font-size: 12px;
}
Hasil:
Ini adalah Heading 1 (H1) menggunakan ukuran pasti 14px
Ini adalah Heading 2 (H2) menggunakan ukuran pasti 12px
1.5.3 CSS font style
CSS font style menentukan kemiringan font di bagian
tertentu.
Ada 3 macam style yaitu:
normal : default; browser menampilkan font secara normal
Italic : browser menampilkan font miring
oblique : browser menampilkan font oblique.
Perbedaan italic dan oblique:
Jenis font biasanya memiliki font set miring yang disebut
italic. Misalkan, untuk font Trebuchet MS, akan terdapat 2 set font yaitu
trebuchet MS true type (normal) dan trebuchet MS italic (miring). Sementara
pada penggunaan style oblique, yang dibunakan adalah Trebuchet MS true type yang
di miringkan pada saat ditampilkan. Jadi untuk beberapa font, tidak akan tampak
perbedaan nyata antara penggunaan style italic dan oblique.
Cara penulisan:
property -> font-style
value -> normal, italic, oblique
Contoh penulisan:
h1 {
font-size: 14px;
font-style: italic;
}
h2 {
font-size: 12px;
font-style:oblique;
}
Hasil:
Ini adalah Heading 1 (H1) menggunakan style italic
Ini adalah Heading 2 (H2) menggunakan style oblique
1.5.4 CSS font variant
Properti font variant digunakan untuk menampilkan font dalam
huruf kapital kecil. Jadi semua huruf non kapital akan berubah menjadi huruf
kapital, tetapi ukuran nya tetap sama. Perlu diketahui, tidak semua jenis font
dapat menggunakan properti ini.
Cara penulisan:
property -> font-variant
value -> small-caps
Contoh penulisan:
h1 {
font-size: 14px;
font-variant: small-caps;
}
Hasil:
Ini adalah Heading 1 (H1) menggunakan properti font variant
1.5.5 CSS Font Weight
Properti font weight digunakan untuk mengatur ketebalan
font.
Cara penulisan:
property -> font-weight
value ->
normal
bold – tebal
bolder – lebih tebal
lighter – lebih tipis
100
200
300
400 – normal
500
600
700 – bold
800
900
Contoh penulisan:
h1 {
font-size: 14px;
font-weight: bold;
}
h2 {
font-size: 14px;
font-weight:100;
}
Hasil:
Ini adalah Heading 1 (H1) menggunakan font weight bold
Ini adalah Heading 2 (H2) menggunakan font weight 100
1.5.6 Font Color
Properti color digunakan untuk menentukan warna font.
Sebenarnya properti color bukan lah bagian dari properti font.
Cara penulisan:
property -> color
value ->
nama warna – contoh: red, black, white
hexadesimal – contoh: #ff0000
RGB – contoh: rgb(0, 220, 98)
Contoh penulisan:
h1 {
font-size: 14px;
color: red;
}
h2 {
font-size: 14px;
color: #0000ff;
}
Hasil:
Ini adalah Heading 1 (H1) menggunakan warna merah
Ini adalah Heading 2 (H2) menggunakan warna biru
1.1 CSS Background
1.1.1 Background Color
The background-color property specifies the background color
of an element.
The background color of a page is defined in the body
selector:
Example
body {background-color:#b0c4de;}
With CSS, a color is most often specified by:
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a color name - like "red"
Look at CSS Color Values for a complete list of possible
color values.
In the example below, the h1, p, and div elements have
different background colors:
Example
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
1.1.2 Background Image
The background-image property specifies an image to use as
the background of an element.
By default, the image is repeated so it covers the entire
element.
The background image for a page can be set like this:
Example
body {background-image:url('paper.gif');}
Try it yourself »
Below is an example of a bad combination of text and
background image. The text is almost not readable:
Example
body {background-image:url('bgdesert.jpg');}
Try it yourself »
1.1.3 Background Image - Repeat Horizontally or Vertically
By default, the background-image property repeats an image
both horizontally and vertically.
Some images should be repeated only horizontally or
vertically, or they will look strange, like this:
Example
body
{
background-image:url('gradient2.png');
}
Try it yourself »
If the image is repeated only horizontally (repeat-x), the
background will look better:
Example
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
Try it yourself »
1.1.4 Background Image - Set position and no-repeat
When using a
background image, use an image that does not disturb the text.
Showing the image only once is specified by the
background-repeat property:
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
Try it yourself »
In the example above, the background image is shown in the
same place as the text. We want to change the position of the image, so that it
does not disturb the text too much.
The position of the image is specified by the
background-position property:
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
Try it yourself »
1.1.5 Background - Shorthand property
As you can see from the examples above, there are many
properties to consider when dealing with backgrounds.
To shorten the code, it is also possible to specify all the
properties in one single property. This is called a shorthand property.
The shorthand property for background is simply
"background":
Example
body {background:#ffffff url('img_tree.png') no-repeat right
top;}
Try it yourself »
When using the shorthand property the order of the property
values are:
background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values is missing,
as long as the ones that are present are in this order.
1.2 CSS Text
1.2.1 Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a color name - like "red"
Look at CSS Color Values for a complete list of possible
color values.
The default color for a page is defined in the body
selector.
Example
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
Try it yourself »
For W3C compliant
CSS: If you define the color property, you must also define the
background-color property.
1.2.2 Text Alignment
The text-align property is used to set the horizontal
alignment of a text.
Text can be centered, or aligned to the left or right, or
justified.
When text-align is set to "justify", each line is
stretched so that every line has equal width, and the left and right margins
are straight (like in magazines and newspapers).
Example
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
Try it yourself »
1.2.3 Text Decoration
The text-decoration property is used to set or remove
decorations from text.
The text-decoration property is mostly used to remove
underlines from links for design purposes:
Example
a {text-decoration:none;}
Try it yourself »
It can also be used to decorate text:
Example
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
Try it yourself »
It is not recommended
to underline text that is not a link, as this often confuses users.
1.2.4 Text Transformation
The text-transform property is used to specify uppercase and
lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase
letters, or capitalize the first letter of each word.
Example
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Try it yourself »
1.2.5 Text Indentation
The text-indentation property is used to specify the
indentation of the first line of a text.
Example
p {text-indent:50px;}
1.3 CSS Link
Links can be styled with any CSS property (e.g. color,
font-family, background, etc.).
Special for links are that they can be styled differently
depending on what state they are in.
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Example
a:link {color:#FF0000;}
/* unvisited link */
a:visited {color:#00FF00;}
/* visited link */
a:hover {color:#FF00FF;}
/* mouse over link */
a:active {color:#0000FF;}
/* selected link */
Try it yourself »
When setting the style for several link states, there are
some order rules:
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
1.3.1 Text Decoration
The text-decoration property is mostly used to remove
underlines from links:
Example
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
Try it yourself »
1.3.2 Background Color
The background-color property specifies the background color
for links:
Example
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
1.4 CSS List
In HTML, there are two types of lists:
·
unordered lists - the list
items are marked with bullets
·
ordered lists - the list
items are marked with numbers or letters
With CSS, lists can be styled further, and images can be
used as the list item marker.
1.4.1 Different List Item Markers
The type of list item marker is specified with the
list-style-type property:
Example
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
Try it yourself »
Some of the values are for unordered lists, and some for
ordered lists.
1.4.2 An Image as The List Item Marker
To specify an image as the list item marker, use the
list-style-image property:
Example
ul
{
list-style-image: url('sqpurple.gif');
}
Try it yourself »
The example above does not display equally in all browsers.
IE and Opera will display the image-marker a little bit higher than Firefox,
Chrome, and Safari.
If you want the image-marker to be placed equally in all
browsers, a crossbrowser solution is explained below.
1.4.3 Crossbrowser Solution
The following example displays the image-marker equally in
all browsers:
Example
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
Try it yourself »
Example explained:
For ul:
Set the list-style-type to none to remove the list item
marker
Set both padding and margin to 0px (for cross-browser
compatibility)
For li:
Set the URL of the image, and show it only once (no-repeat)
Position the image where you want it (left 0px and down 5px)
Position the text in the list with padding-left
1.4.4 List - Shorthand property
It is also possible to specify all the list properties in
one, single property. This is called a shorthand property.
The shorthand property used for lists, is the list-style
property:
Example
ul
{
list-style: square url("sqpurple.gif");
}
Try it yourself »
When using the shorthand property, the order of the values
are:
list-style-type
list-style-position (for a description, see the CSS
properties table below)
list-style-image
It does not matter if one of the values above are missing,
as long as the rest are in the specified order.
1.5 CSS Table
1.5.1 Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for table, th,
and td elements:
Example
table, th, td
{
border: 1px solid black;
}
Try it yourself »
Notice that the table in the example above has double
borders. This is because both the table and the th/td elements have separate
borders.
To display a single border for the table, use the border-collapse
property.
1.5.2 Collapse Borders
The border-collapse property sets whether the table borders
are collapsed into a single border or separated:
Example
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
Try it yourself »
1.5.3 Table Width and Height
Width and height of a table is defined by the width and
height properties.
The example below sets the width of the table to 100%, and
the height of the th elements to 50px:
Example
table
{
width:100%;
}
th
{
height:50px;
}
Try it yourself »
1.5.4 Table Text Alignment
The text in a table is aligned with the text-align and
vertical-align properties.
The text-align property sets the horizontal alignment, like
left, right, or center:
Example
td
{
text-align:right;
}
Try it yourself »
The vertical-align property sets the vertical alignment,
like top, bottom, or middle:
Example
td
{
height:50px;
vertical-align:bottom;
}
Try it yourself »
1.5.5 Table Padding
To control the space between the border and content in a
table, use the padding property on td and th elements:
Example
td
{
padding:15px;
}
Try it yourself »
1.5.6 Table Color
The example below specifies the color of the borders, and
the text and background color of th elements:
Example
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
1.6 CSS Box Model
All HTML elements can be considered as boxes. In CSS, the
term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around
HTML elements, and it consists of: margins, borders, padding, and the actual
content.
The box model allows us to place a border around elements
and space elements in relation to other elements.
The image below illustrates the box model:
Explanation of the different parts:
·
Margin - Clears an area
around the border. The margin does not have a background color, it is
completely transparent
·
Border - A border that goes
around the padding and content. The border is affected by the background color
of the box
·
Padding - Clears an area
around the content. The padding is affected by the background color of the box
·
Content - The content of
the box, where text and images appear
In order to set the width and height of an element correctly
in all browsers, you need to know how the box model works.
1.6.1 Width and Height of an Element
Important: When you
set the width and height properties of an element with CSS, you just set the
width and height of the content area. To calculate the full size of an element,
you must also add the padding, borders and margins.
The total width of the element in the example below is
300px:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
Let's do the math:
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px
Assume that you had only 250px of space. Let's make an
element with a total width of 250px:
Example
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
Try it yourself »
The total width of an element should be calculated like
this:
Total element width = width + left padding + right padding +
left border + right border + left margin + right margin
The total height of an element should be calculated like
this:
Total element height = height + top padding + bottom padding
+ top border + bottom border + top margin + bottom margin
1.6.2 Browsers Compatibility Issue
The example above does not display properly in IE8 and
earlier versions.
IE8 and earlier versions includes padding and border in the
width, if a DOCTYPE is NOT declared.
To fix this problem, just add a DOCTYPE to the HTML page:
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
1.7 CSS Border
1.7.1 Border Style
The border-style property specifies what kind of border to
display.
None of the border properties will have ANY effect unless
the border-style property is set!
border-style values:
none: Defines no border
dotted: Defines a dotted border
dashed: Defines a dashed border
solid: Defines a solid border
double: Defines two borders. The width of the two borders
are the same as the border-width value
groove: Defines a 3D grooved border. The effect depends on
the border-color value
ridge: Defines a 3D ridged border. The effect depends on the
border-color value
inset: Defines a 3D inset border. The effect depends on the
border-color value
outset: Defines a 3D outset border. The effect depends on
the border-color value
Try it yourself: Set the style of the border
1.7.2 Border Width
The border-width property is used to set the width of the
border.
The width is set in pixels, or by using one of the three
pre-defined values: thin, medium, or thick.
Note: The "border-width" property does not work if
it is used alone. Use the "border-style" property to set the borders
first.
Example
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
1.7.3 Border Color
The border-color property is used to set the color of the
border. The color can be set by:
name - specify a color name, like "red"
RGB - specify a RGB value, like "rgb(255,0,0)"
Hex - specify a hex value, like "#ff0000"
You can also set the border color to
"transparent".
Note: The "border-color" property does not work if
it is used alone. Use the "border-style" property to set the borders
first.
Example
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
Try it yourself »
1.7.4 Border - Individual sides
In CSS it is possible to specify different borders for
different sides:
Example
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
Try it yourself »
The example above can also be set with a single property:
Example
border-style:dotted solid;
Try it yourself »
The border-style property can have from one to four values.
border-style:dotted solid double dashed;
top border is dotted
right border is solid
bottom border is double
left border is dashed
border-style:dotted solid double;
top border is dotted
right and left borders are solid
bottom border is double
border-style:dotted solid;
top and bottom borders are dotted
right and left borders are solid
border-style:dotted;
all four borders are dotted
The border-style property is used in the example above.
However, it also works with border-width and border-color.
1.7.5 Border - Shorthand property
As you can see from the examples above, there are many
properties to consider when dealing with borders.
To shorten the code, it is also possible to specify all the
border properties in one property. This is called a shorthand property.
The shorthand property for the border properties is
"border":
Example
border:5px solid red;
Try it yourself »
When using the border property, the order of the values are:
border-width
border-style
border-color
It does not matter if one of the values above are missing
(although, border-style is required), as long as the rest are in the specified
order
1.8 CSS Margin
1.8.1 Margin
The margin clears an area around an element (outside the
border). The margin does not have a background color, and is completely
transparent.
The top, right, bottom, and left margin can be changed
independently using separate properties. A shorthand margin property can also
be used, to change all margins at once.
Possible Values
Value Description
auto The browser
sets the margin.
The result of this is dependant of the browser
length Defines a fixed
margin (in pixels, pt, em, etc.)
% Defines a
margin in % of the containing element
It is possible to use
negative values, to overlap content.
1.8.2 Margin - Individual sides
In CSS, it is possible to specify different margins for
different sides:
Example
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Try it yourself »
1.8.3 Margin - Shorthand property
To shorten the code, it is possible to specify all the
margin properties in one property. This is called a shorthand property.
The shorthand property for all the margin properties is
"margin":
Example
margin:100px 50px;
Try it yourself »
The margin property can have from one to four values.
margin:25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
margin:25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
margin:25px 50px;
top and bottom margins are 25px
right and left margins are 50px
margin:25px;
all four margins are 25px
1.9 CSS Padding
The padding clears an area around the content (inside the
border) of an element. The padding is affected by the background color of the
element.
The top, right, bottom, and left padding can be changed
independently using separate properties. A shorthand padding property can also
be used, to change all paddings at once.
1.9.1 Possible Values
Value Description
length Defines a fixed
padding (in pixels, pt, em, etc.)
% Defines a
padding in % of the containing element
1.9.2 Padding - Individual sides
In CSS, it is possible to specify different padding for
different sides:
Example
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
Try it yourself »
1.9.3 Padding - Shorthand property
To shorten the code, it is possible to specify all the
padding properties in one property. This is called a shorthand property.
The shorthand property for all the padding properties is
"padding":
Example
padding:25px 50px;
Try it yourself »
The padding property can have from one to four values.
padding:25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px
padding:25px 50px 75px;
top padding is 25px
right and left paddings are 50px
bottom padding is 75px
padding:25px 50px;
top and bottom paddings are 25px
right and left paddings are 50px
padding:25px;
all four paddings are 25px
1.10 Grouping and Nesting
Grouping Selectors
In style sheets there are often elements with the same style.
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
To minimize the code, you can group selectors.
Separate each selector with a comma.
In the example below we have grouped the selectors from the
code above:
Example
h1,h2,p
{
color:green;
}
Try it yourself »
Nesting Selectors
It is possible to apply a style for a selector within a
selector.
In the example below, one style is specified for all p
elements, one style is specified for all elements with
class="marked", and a third style is specified only for p elements
within elements with class="marked":
Example
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
1.11 Dimension
1.12 CSS Display and Visibility
The display property specifies if/how an element is
displayed, and the visibility property specifies if an element should be
visible or hidden.
1.12.1 Hiding an Element - display:none or visibility:hidden
Hiding an element can be done by setting the display
property to "none" or the visibility property to "hidden".
However, notice that these two methods produce different results:
visibility:hidden hides an element, but it will still take
up the same space as before. The element will be hidden, but still affect the
layout.
Example
h1.hidden {visibility:hidden;}
Try it yourself »
display:none hides an element, and it will not take up any
space. The element will be hidden, and the page will be displayed as the
element is not there:
Example
h1.hidden {display:none;}
Try it yourself »
1.12.2 CSS Display - Block and Inline Elements
A block element is an element that takes up the full width
available, and has a line break before and after it.
Examples of block elements:
<h1>
<p>
<div>
An inline element only takes up as much width as necessary,
and does not force line breaks.
Examples of inline elements:
<span>
<a>
1.12.3 Changing How an Element is Displayed
Changing an inline element to a block element, or vice
versa, can be useful for making the page look a specific way, and still follow
web standards.
The following example displays list items as inline
elements:
Example
li {display:inline;}
Try it yourself »
The following example displays span elements as block
elements:
Example
span {display:block;}
Try it yourself »
Note: Changing the display type of an element changes only
how the element is displayed, NOT what kind of element it is. For example: An
inline element set to display:block is not allowed to have a block element
nested inside of it.
1.13 CSS Positioning
1.13.1 Positioning
The CSS positioning properties allow you to position an
element. It can also place an element behind another, and specify what should
happen when an element's content is too big.
Elements can be positioned using the top, bottom, left, and
right properties. However, these properties will not work unless the position
property is set first. They also work differently depending on the positioning
method.
There are four different positioning methods.
1.13.2 Static Positioning
HTML elements are positioned static by default. A static
positioned element is always positioned according to the normal flow of the
page.
Static positioned elements are not affected by the top,
bottom, left, and right properties.
1.13.3 Fixed Positioning
An element with fixed position is positioned relative to the
browser window.
It will not move even if the window is scrolled:
Example
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
Try it yourself »
Note: IE7 and IE8 support the fixed value only if a !DOCTYPE
is specified.
Fixed positioned elements are removed from the normal flow.
The document and other elements behave like the fixed positioned element does
not exist.
Fixed positioned elements can overlap other elements.
1.13.4 Relative Positioning
A relative positioned element is positioned relative to its
normal position.
Example
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
Try it yourself »
The content of relatively positioned elements can be moved
and overlap other elements, but the reserved space for the element is still
preserved in the normal flow.
Example
h2.pos_top
{
position:relative;
top:-50px;
}
Try it yourself »
Relatively positioned elements are often used as container
blocks for absolutely positioned elements.
1.13.5 Absolute Positioning
An absolute position element is positioned relative to the
first parent element that has a position other than static. If no such element
is found, the containing block is <html>:
Example
h2
{
position:absolute;
left:100px;
top:150px;
}
Try it yourself »
Absolutely positioned elements are removed from the normal
flow. The document and other elements behave like the absolutely positioned
element does not exist.
Absolutely positioned elements can overlap other elements.
1.13.6 Overlapping Elements
When elements are positioned outside the normal flow, they
can overlap other elements.
The z-index property specifies the stack order of an element
(which element should be placed in front of, or behind, the others).
An element can have a positive or negative stack order:
Example
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
Try it yourself »
An element with greater stack order is always in front of an
element with a lower stack order.
Note: If two positioned elements overlap, without a z-index
specified, the element positioned last in the HTML code will be shown on top.
1.14 CSS Float
1.14.1 What is CSS Float?
With CSS float, an element can be pushed to the left or
right, allowing other elements to wrap around it.
Float is very often used for images, but it is also useful
when working with layouts.
1.14.2 How Elements Float
Elements are floated horizontally, this means that an
element can only be floated left or right, not up or down.
A floated element will move as far to the left or right as
it can. Usually this means all the way to the left or right of the containing
element.
The elements after the floating element will flow around it.
The elements before the floating element will not be
affected.
If an image is floated to the right, a following text flows
around it, to the left:
Example
img
{
float:right;
}
Try it yourself »
1.14.3 Floating Elements Next to Each Other
If you place several floating elements after each other,
they will float next to each other if there is room.
Here we have made an image gallery using the float property:
Example
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
Try it yourself »
1.14.4 Turning off Float - Using Clear
Elements after the floating element will flow around it. To
avoid this, use the clear property.
The clear property specifies which sides of an element other
floating elements are not allowed.
Add a text line into the image gallery, using the clear
property:
Example
.text_line
{
clear:both;
}
1.14.5 All CSS Float Properties
The number in the "CSS" column indicates in which
CSS version the property is defined (CSS1 or CSS2).
1.14.6 Creating a homepage without Table
<html>
<head>
<style type="text/css">
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><h1
class="header">W3Schools.com</h1></div>
<div class="left"><p>"Never
increase, beyond what is necessary, the number of entities required to explain
anything." William of Ockham (1285-1349)</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3Schools you will find all the Web-building
tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia
and WAP.</p>
<p>W3Schools - The Largest Web Developers Site On The
Net!</p></div>
<div class="footer">Copyright 1999-2005 by
Refsnes Data.</div>
</div>
</body>
</html>
1.14.7 Creating horizontal menu
<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
</style>
</head>
<body>
<ul>
<li><a href="#">Link
one</a></li>
<li><a href="#">Link
two</a></li>
<li><a href="#">Link
three</a></li>
<li><a href="#">Link
four</a></li>
</ul>
<p>
In the example above, we let the ul element and the a
element float to the left.
The li elements will be displayed as inline elements (no
line break before or after the element). This forces the list to be on one
line.
The ul element has a width of 100% and each hyperlink in the
list has a width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.
</p>
</body>
</html>
1.14.8 Image Caption Float to right
<html>
<head>
<style type="text/css">
div
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
</head>
<body>
<div>
<img src="logocss.gif" width="95"
height="84" /><br />
CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<p>
In the paragraph above, the div element is 120 pixels wide
and it contains the image.
The div element will float to the right.
Margins are added to the div to push the text away from the
div.
Borders and padding are added to the div to frame in the
picture and the caption.
</p>
</body>
1.14.9 An image with border and margins that floats to the right in a paragraph
<html>
<head>
<style type="text/css">
img
{
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
</style>
</head>
<body>
<p>
In the paragraph below, the image will float to the right. A
dotted black border is added to the image.
We have also added margins to the image to push the text
away from the image:
0 px margin on the top and right side, 15 px margin on the
bottom, and 20 px margin on the left side of the image.
</p>
<p>
<img src="logocss.gif" width="95"
height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
