What is CSS? And Types of CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.

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.

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.

Types of CSS (Cascading Style Sheet)

Cascading Style Sheet(CSS) is used to set the style in web pages that contain HTML elements. It sets the background color, font-size, font-family, color, … etc property of elements on a web page. 
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;">  
          Softgrowth Infotech      </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:  

Internal Css

Tech Ghanoba

Blog From which you can learn

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: style.css  

.content
		{
			background-color: red;
			width: 100%;
			height: 200px;

		}
		.content h1
		{
			color:black;
		}
		.content h3
		{
			color:yellow;
		}

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.
Internal Css

Tech Ghanoba

Blog From which you can learn

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.

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

Posts created 8

We would love to know your views

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.