Thursday, November 8, 2012

Glance about CSS (Cascading Style Sheet)



CSS is mechanism dividing between presentation and content on HTML document. CSS can convert into view at HTML become better and more beautiful. CSS manager all of content which is shown on HTML as text, picture, color, font, and all of size and many more. HTML and CSS is a partner which is not separated, because combination of both website which is makeed will become is so art and better, so it can interesting web visitors.

Writing of CSS script can do into 3 procedure that is : Inline Style, Embedded Style Sheets and External Style Sheets. I will tell about 3 procedure below.

1. Inline Style
At this method CSS script written into attribute of HTML tags. CSS is written to give a certain style at HTML tag, and no selector for indicate That HTML tag were given style. To be more specific look at the script below.


Click show to see and copy this code 
Code Inline Style CSS



See the script marked red rectangle above, it is an example of CSS Script that script is written in the HTML tag attribute. And the picture below is the output of the script above.





2. Embedded Style Sheets
This method is different with the above, Writing CSS script is united with HTML script , it is the same as with method above, but this method there is selector. Let's see the script below.


Click show to see and copy this code 
Code Embedded Style CSS




See the picture above the red rectangle marker in it there are CSS scripts which in written into one with HTML file. To start CSS script we must write <style type="text/css"> and </style>. And then see the selector at the script marked red and green underline above, this selector is marked to determine style at "cerdik" text, selector in here called class which is . (dot) symbol, and one again called id which is # symbol. Below is output above script.




3. External Style Sheets
This method is not different with method number 2. Which is different is CSS script separate with HTML script, so there are 2 files thet is HTML file and CSS file. Let's see the picture below.


Click show to see and copy this code 
Code External Style CSS


At the green rectangle marker above there are HTML tags which in function to call file with .css extension. and then which is red and green underline are  css selector. Let's see css script below, this script is written in different file.


Click show to see and copy this code 
Code CSS gaya.css



Let's see output is not different with method number 2, at this method only writing between CSS scrpt and HTML script which is different. The picture below is output from two script above.





Until here my explanation glance  about CSS, Thanks for visiting and read my posting, i hope it can help you...

Learn and learn again...

3 comments: