CSS(Cascading style sheet):It is a style sheet which is used to control the formatting of html. Style sheet is a collection of style information that are applied to plain text, font attribute such as type size, bold, italic underline. Your website can have a multiple pages, with the style sheet you can store the style information in a common files that are share by all the pages.It is responsible for the designing of the page. It resolve conflict when multiple styles are used. In HTML largest font size is only 7, but in CSS,User can increase font size.
Year: CSS was firstly proposed by Hakon Wium Lie on 10 October 1994. Lie was working with Tim Berners-Lee at cern. Several other style sheet language for the web were presumed at same time and after discussion inside World Wide Web Consortium the first W3C CSS recommendation being released in 1996.
Benefit of CSS?
- The layout of a webpage is better controlled.
- You can use the same content with a different style.
- It can maintain a consistency of design.
- Cascading style sheet control the position, size, margin etc.
- This style sheet is easy to maintain.
- This will describe how HTML element should be displayed.
Easy maintenance: The bigger your website, the more time Cascading style sheet save. It reduce a risk of maintenance of large website. In traditional method, developer was need to apply a css styles to all individual pages, but now this method is not used, only one file create and make a connectivity of those css file to all html pages.
Fast Webpage Loading: If you want to edit a multiple HTML pages at a single time then CSS will help to reduce a file size, when CSS separate your content from HTML page then HTML file size will become a smaller and page will load faster.
Search Engine Friendly: By editing one style sheet, you will be able to change the visual aspect of entire website. This will ensure that your webpage have a consistency styling end to end your website.
Absolute Positioning: It will position your element where you want in your website according to the its parent area and its body area .
Printer friendly: Style sheet also able to create a those type of webpage that are printer friendly.
Types of CSS:
- Inline CSS
- Internal CSS
- External CSS
1.Inline CSS: It is apply inside a tag. To apply a css properties you need to use a style attribute and then give a value in the property. Whenever use css, then property will be closed by Semicolon.
Example:
2.Internal CSS: In Internal css, In which CSS is embedded with HTML file, style set should be within a HTML file in head section in Style attribute.
Program:
External CSS: In which styling file is add externally, means you need to connect css file with HTML file externally. CSS file save with (.css) extension and for connectivity with HTML file you need to use a one line code on which addres of css file is specify. For connectivity use this code: <link rel=”stylesheet” href=”css/style.css” >.
Here (css) define about the folder and (style.css) is a file name.
Program:
Difference Between Inline CSS and Internal CSS.
| S No. | Inline css | Internal css | External css |
| 1 | Placed directly in the HTML element. | Placed in the head section of The HTML. | Saved as a separate .css file, linked to the HTML page. |
| 2 | No selector use. | Use the <style> tag. | Uses the <link> tag in the <head> tag. |
| 3 | Inefficiently apply Only to the HTML element. | Only apply to the current HTML page. | Can contain all the styles needed for all the pages on the site. |
| 4 | Only recommended if You want to override a style on your internal style sheet. | Only recommended if you need to style only one page,or if you want different pages to have varying styles. | Most recomended for all web pages change design at same time. |
Note: Whenever you apply same property with internal and inline css at that time priority of inline css is high as compare to internal css.
Example: