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"/>
No comments:
Post a Comment