PANDUAJI.COM: June 2013

, by Pandu Aji Wirawan

Blog Tips

[Blog Tips] Start Write on the Blog

No comments

, by Pandu Aji Wirawan

Blender

[SOLVED] Blender User Preferences Crash on Windows

7 comments

, by Pandu Aji Wirawan

Blender

Group and Ungroup on Blender

No comments

, by Pandu Aji Wirawan

internet

How to Setting VPN Client on Ubuntu

3 comments

, by Pandu Aji Wirawan

Blender

Siggraph 2013 Call for Contribute from Blender Army

No comments

, by Pandu Aji Wirawan

Web Development

CSS Introduction

CSS means Cascading Style Sheet. CSS is list of syntax that useful to create website page style. You can modify your page with CSS. Today i want to share a litte bit about CSS.

CSS HistoryStart when tag added in HTML 3.1, it's nightmare for web developer, because they have to add many tags on each webpage. It's not effective because need more time and cost.

W3C launched CSS to solve that problem in HTML 4. document formating that can be separated in *.css file type. So, web developer need to change 1 file to edit all style on the website.

CSS Syntax

CSS different from HTML. You need HTML to see what CSS change on web visualization, because without HTML, CSS is nothing. CSS have two parts, they are selector and declaration.

CSS Comments
CSS have a comment that can help you give description of the code. Comment will not appear in web, you can only see it in the code. See the example below

/*menggunakan komentar pada css*/

ID Selector
ID Selector use to give unique style from html tag. Unique there means different from other, so id selector can use only once in a web page. If you using selector id more than onec in a web page, the selector will use on toppest tag.

Example selector ID in CSS:

#selector{ text-align: center; color: red; }

There is example of how to using id tag

<p id="selector">Hello World, i am using CSS </p>

ID use hastag (#) for identify. Never use number in front of id name. Because number tag not recognized by Mozilla Firefox.

Class Selector
Use for choose style of element group. It's different from ID, you can use it more than once in one page. This selector use dot (.) for identify. See the example below:

.comment{ text-align:left; color: red; }

Implementation example.

<p class="comment">paragraph komentar</p>
atau <div class="comment">bagian komentar</div>

If you want to class only applied on paragraph, and dont affect with div, you need to write css like this

p.comment {text-align:center;}

That code will only use by this tag <p style="comment">

How To Add CSS Into Page
There is 3 ways to add css into a page. I prefer to use external css if you're not using blogger engine.

External Stylesheet, is a stylesheet that you save in *.css filetype. You don't put css syntax into webpage. You just save the code in *.css filetype. If you use external css, you can change all pages with editing this file. So you don't need to change on every post. To use this stylesheet, you need to write the code below in your page:

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

This code prefer to place in head section. In css file, you can't using html tag in css file.

Internal Stylesheet, different with external, because this way you need to write into html page. This style use if you want change one or more page different with global site. You need to define with style tag and prefer to place into head tag

<style type="text/css">
hr{color: sienna;}
p{margin-left: 20px;}
body{background-image:url("images/xxx.png");}
</style>

Inline Stylesheet, use for change in a element. This way rarely use by web developer. There is the code how to use this stylesheet.

<body style="color:blue; margin-left:20px"> inline stylesheet

</body>

External stylesheet have global influence, dan Internal stylesheet in spesific area. Then inline stylesheet have more spesific area, so if you have 2 styesheet for one element, for example global and inline p (paragraph) style. Your browser will use inline stylesheet to display in your page.

Background CSS
Property background use for define background in a element. There is some background properties.

Background Color, use for change backgrodun color. You will use hexacolor for this properties. The example:

h1{background-color:#6699ff;}p{background-color:#FFFFFF;}div{background-color:#6d6d6d;}

Background Image, use for define image as backgrodun. The example


body{background-image:url('bgimg.png');}

url is file of image/

Background repeat, use for set how to image appear. Is repeat in X or Y? Or just applied once. The default, background image will repeat untill fill the page. We can insert background image repeat on Y axis with this code

body{
background-image:url('bgimg.png');
background-repeat:repeat-y }

If you don't want repeat it, just change repeat-y to no-repeat.

Please let me know if you found something wrong with my article. I found many usefull CSS code if you want to use it. Sorry for my bad english.

Download CSS Code Collection

No comments

, by Pandu Aji Wirawan

Blender