CSS is the acronym of “Cascading Style Sheets”.
CSS is a computer language for laying out and structuring web pages HTML or XML).
This language contains coding elements and is composed of these “cascading style sheets” which are equally called CSS files (.css).
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language.
TYPES OF CSS
There are three types of CSS which are given below:
- Inline CSS
- Internal or Embedded CSS
- External CSS
Inline CSS: Inline CSS contains the CSS property in the body section attached with element is known as inline CSS. This kind of style is specified within an HTML tag using the style attribute.
Example:
<!DOCTYPE html><html><head><title>Inline CSS</title></head> <body><p style = "color:#009900; font-size:50px;font-style:italic; text-align:center;">GeeksForGeeks</p></body></html> |
Output:
Internal or Embedded CSS: This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is embedded within the HTML file.
Example:
https://1e12320fa29fada213b684c6c2035c5d.safeframe.googlesyndication.com/safeframe/1-0-38/html/container.html
<!DOCTYPE html><html><head><title>Internal CSS</title><style>.main {text-align:center; }.GFG {color:#009900;font-size:50px;font-weight:bold;}.geeks {font-style:bold;font-size:20px;}</style></head><body><div class = "main"><div class ="GFG">GeeksForGeeks</div> <div class ="geeks">A computer science portal for geeks</div></div></body></html> |
Output:
External CSS: External CSS contains separate CSS file which contains only style property with the help of tag attributes (For example class, id, heading, … etc). CSS property written in a separate file with .css extension and should be linked to the HTML document using link tag. This means that for each element, style can be set only once and that will be applied across web pages.
Example: The file given below contains CSS property. This file save with .css extension. For Ex: geeks.css
body {
background-color:powderblue;
}
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
#geeks {
font-style:bold;
font-size:20px;
}
Below is the HTML file that is making use of the created external style sheet
- link tag is used to link the external style sheet with the html webpage.
- href attribute is used to specify the location of the external style sheet file.
<!DOCTYPE html><html><head><link rel="stylesheet" href="geeks.css"/></head> <body><div class = "main"><div class ="GFG">GeeksForGeeks</div><div id ="geeks">A computer science portal for geeks</div></div></body></html> |
Output:
Properties of CSS: Inline CSS has the highest priority, then comes Internal/Embedded followed by External CSS which has the least priority. Multiple style sheets can be defined on one page. If for an HTML tag, styles are defined in multiple style sheets then the below order will be followed.
- As Inline has the highest priority, any styles that are defined in the internal and external style sheets are overridden by Inline styles.
- Internal or Embedded stands second in the priority list and overrides the styles in the external style sheet.
- External style sheets have the least priority. If there are no styles defined either in inline or internal style sheet then external style sheet rules are applied for the HTML tags.
ADVANTAGES OF CSS
The Benefits Of Cascading Style Sheets
If you’re not using cascading style sheets in your web pages yet shame on you. CSS has excellent support in today’s browsers. It’s relatively easy to learn and produces better and cleaner code than applying all those styles directly to your HTML.
Using CSS modularizes your websites in much the same way that programmers have been modularizing software code for year. Modular code in your website allows for greater design consistency and easier maintenance. CSS is the new standard and has been now for several years. It’s time to separate the structure of HTML and the presentation of CSS.
So if we’ve been using HTML for years and creating all sorts of great websites with them why make the switch? Some of the advantages of using CSS are:
- Easier to maintain and update
- Greater consistency in design
- More formatting options
- Lightweight code
- Faster download times
- Search engine optimization benefits
- Ease of presenting different styles to different viewers
- Greater accessibility
Separation of Style and Structure
The basic idea behind CSS is to separate the structure of a document from the presentation of the document. HTML is meant for structure. It was never intended for anything else. All those attributes you add to style your pages were added later as the viewing public demanded it. All those additions though make HTML clumsy and work against it’s main purpose of structuring a document. HTML is there to let a browser know that this block of text is a paragraph and that block of text is a heading for this paragraph.
Without all the extra HTML for styling the structure of your document is much more readable making it easier to update with out breaking the document. All of your CSS can be moved to a separate file making it easier to update your styles as well. Before to give each of your pages a background color you would have added bgcolor=”red” to every body tag on your site. What happened once you realized that red wasn’t going to make for a good background color and you wanted to change it to a light gray. With a small site it’s not such a big deal to open 10 files and make the change from #ff000 (red) to #eeeeee (light gray). But what if you had 100 pages? 1000 pages? To code that background on every page of your site using CSS would have required a single line of code, body {background:#ff000} in your style sheet. The one line of code can easily be changed in seconds to affect a sitewide change in background color.
If you need to be convinced about how easy it is to change your site using CSS and how different you can get a site to look by editing just one file check out the css Zen Garden website and take a look at how much can be easily changed by separating structure and presentation.
Faster Web Page Download Time
Using cascading style sheets generally leads to less code behind your web pages which helps the downoad times of a page. When browser sees a table in your code it needs to read through all your code twice. Once to understand the structure of the table and once again to actually display the content within the table. The extra time slows up your page. Using tables in the layout of a web page generally leads to a greater use of images on that page. Images are often the heaviest element of a pages and are usually the major culprit in slowing down your pages. Sure the images can be optimized to make them smaller, but they are still larger than a line of code and each image requires another request by the browser to the server.
Because you’ve placed all your CSS in one separate file the code will be cached in the browser after the initial request. It doesn’t need to be downloaded again for subsequent pages. Your table code needs to exist on every page of your site and must be read again every time a new page is requested even if the table structure is the same on every page.
In Eric Meyer’s interview with Mike Davidson of ESPN, Mr. Davidson estimated that 2 terabytes of bandwidth were saved each day after they switched to CSS on the ESPN website.
Greater Control Of Presentation
CSS allows for more control over the presentation of your web pages. Given how little control web designers can sometimes have it’s nice to know there’s a way to get some of it back. Aside from the fact that CSS has more formatting options over HTML such as options to control the spacing and leading of text, CSS can also determine in what order the page itself displays. If you do have some heavy graphics you can place them last in your code to ensure your visitors can at least have some text to read while waiting for your grahics to load. With tables it’s all or nothing. you won’t be able to get one part of your table load before another part.
CSS also gives you greater control over different media. You can organize your code to make it easier for screen readers to follow, making for a more accessible web page. You can learn more about the Accessibility Features of CSS at the W3C.
One of the more common uses of CSS is to present the same page differently to different media is in making your documents printable. Web pages have not always been printer friendly. Using CSS it’s easy to tweak a few styles to get a completely different look on the screen and through the printer. Visitors to your site don’t need to do anything special either. They can print your pages right through the browser and get a document unburdened with background colors and images that will only waste their toner or ink.
Search Engine Optimization
While it’s not generally agreed by everyone it’s likely that CSS can help get your pages found in a search engine. Because your CSS site contains less code and has a simpler structure it’s easier to read not only for you, but also for search engine spiders. Allowing search engine spiders to get through your code faster means your web pages can be indexed faster. There’s also a chance that less code will be interpreted as text improving the keyword density of the page. With less code to muddle through it’s easier for search engine spiders to determine what the page is about. All other things being equal the web pages that use CSS to layout their design are more likely to rank higher in search engines.
The benefits of cascading style sheets are many and given the support of modern browsers there’s no excuse for not learning to use them. If everything above hasn’t convinced you consider this. Much of HTML has already been deprecated and at some point in the future it will no longer work in browsers. When that time comes many of today’s browsers will fail to display and need to be recoded. Those that are already making use of cascading style sheets will continue to function normally.
Drop your comment
