What is CSS and what is it used for?
CSS which stands for Cascading Style Sheets is a language used to describe how a HTML document should be presented.
(1) External Style Sheets are stored in CSS files.(2) Internal Style Sheets are stored directly in the HTML document.
(3) Inline Styles are applied directly on an element.
(4) All CSS definitions will cascade into one.
(5) CSS is a DHML component.
External style sheets
External style sheets is the best choice when the design should apply to many pages. With external style sheets, you can do site-wide design changes at one location(in the CSS file). Each page that should use the design rules described in the Style Sheet stored in the CSS file must link to the Style Sheet by using the <link> tag as shown below:
<head>
<link rel="stylesheet" type="text/css" href="external-style-sheet-file.css" />
</head>
Browsers requesting a HTML document will follow the link and read the design rules from the file external-style-sheet_file.css, and present the document according to them.
This is how the External Style Sheet(CSS file) could possibly look like:
body { background-image:url("images/bg.gif"); }
p { margin-left: 20px; margin-right:10px; margin:1em 0 2em 0; }
Internal style sheets
An internal style sheet can be used when a HTML document should have a different design than the rest of the site's documents. Internal styles are defined directly in the HTML docuement in the head section by using the <style> element like this:
<head>
<style type="text/css">
body { background-image:url("images/bg.gif") }
p { margin-left: 20px; margin-right:10px; margin:1em 0 2em 0 }
</style>
</head>
Some old browsers that doesn't support styles, will ignore the style element, but the design rules within the start tag (<style>) and end tag (</style>) will still be presented on the page. To be sure they won't be displayed for browsers not supporting CSS, the design rules should be hidden in the comment element as shown below:
<head>
<style type="text/css">
<!--
body { background-image:url("images/bg.gif") }
p { margin-left: 20px; margin-right:10px; margin:1em 0 2em 0 }
-->
</style>
</head>
Inline Style
I would not recommend you to use inline styles to design your website since presentation and content won't be separated, and most advantages of CSS will be lost.
However, if you want to change the style of a single element on a single Web page on your website you they might be useful.
If you decide to use inline styles you do it by setting a value for the style attribute in the start tag for the element you wish to change style for. The value of this attribute can be any CSS property.
This example demonstrate how to change the background and top margin of a H1 element:
<h1 style="background-color: white; margin-top: 1em">
Text within h1 start and end tags with inline styles
</h1>
Cascade into one file
The closer presentation gets to the content of an HTML document the higher priority. Hence, an inline style has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or the default style declared in a browser. This is a list to demonstrate the priority:
(1) Inline style(highest priority, presentation not separated from content).
(2) Internal style sheet (presentation somewhat separated from content).
(3) External style sheet (presentation separated from content).
(4) Least priority is given to the default CSS predefined by the browser.
If some CSS properties have been set for the same selector in different types of style sheets, the values of these properties will be inherited from the style sheet with higher priority.
A component of DHTML
The term Dynamic HTML is used to describe HTML pages with dynamic content. CSS is one of three components in dynamic HTML. The other two components are JavaScript and HTML itself. These three components are tied together with DOM.
Presentation and Content - Some History!
At the beginning...
tags in HTML had the purpose of defining the content of a HTML documents.
They were supposed to describe for clients(browsers) parsing a HTML document what kind of elements they were , e.g. "I'm a header", "I'm a paragraph"..., by using tags like <h3>, <p>...etc.
The presentation of HTML documents was supposed to be taken care of by the browsers, without using any tags for formatting.
The two major browsers at that time - Netscape and Internet Explorer - continued to add their own new HTML tags and attributes to the HTML specification in their competition for the browser market.
The more non-standardized tags and attributes were added the more difficult it became to create websites where the content of HTML documents was clearly separated from the HTML document's presentation layout.
To solve this mess, the W3C(World Wid Web Consortium) - a standard setting consortium, responsible for standardizing HTML, created CSS.
All major browsers now support Cascading Style Sheets.
Why separate the presentation of a HTML document from it's content?
Some benefits are shown below:
(1) The document will be more accessible to a wider variety of devices.(2) If external style sheets are used, design changes to a site can be done in one location, not on each HTML page.
(3) More user control, can deliver code in a prefered order.
That's it guys...
Total Views: 917
OUR OBJECTIVE
Our objective is to reach a place where our services will be highly regarded by businesses from various industrial domains for building their innovative busines solutions with our cutting-edge technological expertise, interactive designs and uncompromised quality.
OUR MISSION
We aspire to help businesses ranging from startups to enterprises, who reach out to us with their requirements, in achieving great lengths, expanding their reach, upscaling their products, and generate a large user-base with our outstanding and cost-effective services.
Get In Touch
General Email info@vasplus.info
Support Team support@vasplus.info
Sales Team sales@vasplus.info
Copyright © 2011 - 2024 | All Rights Reserved