CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs,variations in display for different devices and screen sizes as well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.
Advantages of CSS.
- CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.
- Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.
- Easy maintenance − To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
- Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
- Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.
- Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.
Who Creates and Maintains CSS?
CSS is created and maintained through a group of people within the tristudy called the CSS Working Group. The CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by the W3C members, it becomes a recommendation.
These ratified specifications are called recommendations because the TRISTUDY has no control over the actual implementation of the language. Independent companies and organizations create that software.
Now you have a few options of how to utilize the CSS, either inside or remotely.
Inner Stylesheet .
First we will investigate the inner technique. Along these lines you are just setting the CSS code inside the labels of each (X)HTML record you need to style with the CSS. The configuration for this is appeared in the model beneath.
<title> </p> <style type=”text/css”> CSS Content Goes Here </style> <p></head> </p> <p><body> </p> <p>With this strategy each (X)HTML record contains the CSS code expected to style the page. Implying that any progressions you need to make to one page, should be made to all. This technique can be great on the off chance that you have to style just one page, or on the off chance that you need various pages to have changing styles.</p>
Outer Stylesheet .
Next we will investigate the outer technique. An outer CSS document can be made with any content or HTML supervisor, for example, “Scratch pad” or “Dreamweaver”. A CSS record contains no (X)HTML, just CSS. You basically spare it with the .css document augmentation. You can connection to the document remotely by putting one of the accompanying connections in the head area of each (X)HTML record you need to style with the CSS record. Or on the other hand you can likewise utilize the @import strategy as demonstrated as follows Both of these strategies are accomplished by setting either in the head area as appeared in model underneath.
<title> </p> <p><link rel=”stylesheet” type=”text/css”href=”style.css”/> </p> <p></head> </p> <p><body> </p> <p>or on the other hand </p> <p><head> </p> <p><title><title> </p> <style type=”text/css”> @import url(Path To stylesheet.css) </style> <p></head> </p> <p><body> </p> <p>By utilizing an outside template, the majority of your (X)HTML records connect to one CSS document so as to style the pages.
This implies, in the event that you have to adjust the plan of every one of your pages, you just need to alter one .css record to roll out worldwide improvements to your whole site. </p> <p>Here are a couple of reasons this is better. </p> <p>Simpler Maintenance </p> <p>Diminished File Size </p> <p>Diminished Bandwidth </p> <p>Improved Flexibility </p> <p>Is it accurate to say that you are getting the thought? It’s truly cool. </p> <p>Falling Order </p> <p>In the past passages, I have disclosed how to connection to a css record either inside or remotely. On the off chance that you comprehended, than I am working admirably. If not don’t fuss, there is far to go before we are done. Accepting you have gotten on as of now, you are presumably asking, great would i be able to do both? The appropriate response is yes.
You can have both inward, outside, and now hold up a moment a third way? Indeed inline styles moreover. </p> <p>Inline Styles </p> <p>I have not referenced them up to this point on the grounds that in a manner they nullify the point of utilizing CSS in any case. Inline styles are characterized directly in the (X)HTML record nearby the component you need to style. See model underneath. </p> <p style=”color: #ff0000;”>Some red text</p> <p>Some red content </p> <p>Inline styles won’t enable the client to change styles of components or content organized along these lines </p> <p>Learn CSS Foundations at the expectation of complimentary at this point </p> <p>Things being what they are, which is better? </p> <p>So with all these different methods for embeddings CSS into your (X)HTML documents, you may now ask well which is better, and on the off chance that I utilize more than one strategy,
In what request do these various ways load into my program? </p> <p>All the different techniques will course into another “pseudo” template in the accompanying request: </p> <p>Inline Style (inside (X)HTML component) </p> <p>Interior Style Sheet (inside the <head> tag) </p> <p>Outer Style Sheet </p> <p>To the extent what direction is better, it relies upon what you need to do. In the event that you have just one document to style, at that point putting it inside the <head></head> labels (inward) will work fine.
Despite the fact that on the off chance that you are anticipating styling different records, at that point the outer document technique is the best approach. </p> <p>Picking between the <link related=> and the @import techniques are totally up to you. I will make reference to that the @import strategy may take a subsequent longer to peruse the CSS record in Internet Explorer than the <link related=> alternative. To battle this see Flash of unstyled content </p> <p>Clients with Disabilities </p> <p>The utilization of outer templates likewise can profit clients that experience the ill effects of handicaps. For example, a client can mood killer your template or substitute one of there claim to build content size, change hues, etc. For more data on making your site open to all clients please read Dive into openness </p> <p>Power Users </p> <p>Swapping templates is gainful for clients with incapacities, yet in addition control clients who are specific about how they perused Web records. </p> <p>Program Issues </p> <p>You will find as you dive more distant into the universe of CSS that all programs are not made similarly, without a doubt. CSS can and will render contrastingly in different programs causing various cerebral pains.</p>
NOTE − The World Wide Web Consortium, or W3C is a group that makes recommendations about how the Internet works and how it should evolve.