Cascading Style sheets or more often referred to by
the term CSS document is one website that aims to set the style (style) display
of the website. CSS is not a programming language, but rather a rule to control
multiple components on the web so there will be more structured, uniform and
easily in settings when a web page designer. CSS is about making and setting
the font style, color, distance, shape, and others that can't be done with HTML
elements. It can be said that the CSS is a development from HTML in terms of
the format of a web document. The existence of CSS makes it easy for us to
organize and select a website and it looks because CSS separates between the
presentation and the contents of the web that is created. In addition with the
use of CSS in web creation will provide several benefits such as the following:
- HTML code becomes much simpler and easier to set up.
- File size become smaller so it loads the files faster.
- Easy to change the look, just by changing the CSS file
only.
- Can collaborate with JavaScript and HTML is a loyal
partner.
- Can be used in almost any kind of web browser.
CSS is an internet technology that is recommended by
the World Wide Web Consortium or W3C in 1996. Once CSS standardized, internet
explorer and Netscape released their latest browsers that support the CSS
standard.
Anatomy of a cascading style sheet
The main sections of a CSS that consists of three
parts, namely:
selector, property, value. If there are known within
the HTML tags that make up an HTML document then in CSS also known as selector.
Example
Selector {Property: value;}
form {margin-left: 0;}
The workings of the cascading style sheet
The workings of the CSS style declaration begins as
desired with the writing style (selector, id and class), then automatically the
style will work on HTML documents. By setting the selector, id, and class, then
the class id and we customize and apply HTML code. And it automatically did the
CSS that will work on the HTML file.
There are two ways of calling the CSS selector, i.e.:
1. Selector class
define a class that can apply to any HTML tag. Shape:
. btn {color: #fff;}
<body>
< input type = "submit" value =
"log" class = "btn"/>
</body>
2. Selector ID
defines the style for the element that has an ID as
listed in the selector. Shape:
#btn {color: #fff;}
<body>
< input type = "submit" value =
"Login" id = "btn"/>
</body>
Based on the layout of the place style, the
application of CSS in a web page can be done with some of the alternatives
among which are:
1. Inline Style Sheet
CSS is defined directly on the corresponding HTML tag.
His way simply adding the attribute style = "..." in the HTML tag.
Style will only be valid on the specified tag, and will not affect the other
HTML tags. Example of writing inline CSS style sheet, set the following CSS
style at <p> </p> element or paragraph. Example
< p align = "center" style = "color:
# 303; font-size: 24px" > Saya Bisa Dot Com </p>
2. Embedded Style Sheet
CSS is defined in advance in the tag <style> ...
</style> <body> tag above, more precisely in the <head> tag.
Example
<head>
<style>
. btn {color: #fff;}
</style>
</head>
<body>
< input type = "submit" value =
"log" class = "btn"/>
</body>
3. External Style sheets
CSS is defined separately on different files. And subsequent
file or web page that want to apply the style in the CSS file call a CSS file.
This way is generally used on a single web-based application so that the
display would seem consistent between pages. Example
First you create a file with the initials URstyle.css
and enter the code like this
. btn {color: #fff;}
Then to call the HTML page in which it is sent namely
how by adding
< link href = "URstyle.css" rel =
"stylesheet" type = "text/css" >
Then call the appropriate needs of the intended
element
<body>
< input type = "submit" value =
"log" class = "btn"/>
0 komentar:
Post a Comment