What is CSS?

CSS means "Cascading Style Sheets". It is primarily used to apply styles to HTML page according to our need.

 

How is CSS different from HTML?

CSS & HTML are two different entities of a web page design. HTML is for organizing the content on a web page and CSS adds styles to that content presentation.

CSS can go hand in hand with HTML tags. I.e, we can apply styling as attributes to HTML tags.

 

HTML Tag Example:

<p> HTML tag below, displays the information on screen without any colours.

<p> This is a paragraph tag </p> 

We can apply CSS to the same HTML tag to present it in different styles. Few are given below,

 

CSS Apply Example-1:

<p style=”color:red;”> This is a paragraph tag</p> 

 

Output:

This is a paragraph tag.

 

CSS Apply Example-2:

<p style=”background-color:blue;”> This is a paragraph tag</p>

 

Output:

This is a paragraph tag.

 

We will see more about CSS application to different tags as we go through the course.

 

What are the advantages of using CSS?

CSS have many advantages while designing the web pages for sites. Few are mentioned below,


1.For a better look & feel:
This is the primary benefit that anybody can see immediately.

Seriously, if one sees any site without CSS for sure, don’t want to look at it again.It gives a feeling that, was this site from stone age. 


Do we want to work on a basic “notepad” given with OS for content writing? Or Do we prefer to work with “MS office word” or Google docs etc?? As the later ones offer more styles & features, we prefer the second option.

 

HTML without CSS is just like notepad, not much styling to do for content or website. Of course, this statement is for example reference only.J  

Below is the link for a site with CSS:

Below is the link for a site without CSS:

 

2.CSS increased the site loading speed

3.Applying Uniformity at complete site level or Centralized style management

4.Broader range of device compatibility

5.Multiple styles sheets for same web page

 

What are the different versions of CSS and their history?

What are the development languages can use CSS?

 

What are the different ways to apply styles to a Web page?

There are three types of styles we have:

  •  Inline styles (Should be hyperlinks)
  • Internal(Embedded) styles (Should be hyperlinks)
  •  External styles (Should be hyperlinks)

 

Inline Styles

Inline styles are used to apply unique styles to the single HTML elements.

Basically,inline style uses style attribute.

 

Example:

<h3 style="color:green;">ABCLearn</h3>

 

Internal Styles

Internal Styles are used to define styles for one HTML document.

Generally,it defines in the head section.

 

Example:

<html>
<head>
<style>
h3 {color: blue;}
p {color: red;}
body {background-color: orange;}
</style>
</head>
<body>
<h3>ABCLEARN</h3>
<p>Free To Learn</p>
</body>
</html>

 

External Styles

External styles are used to define styles for many web pages.

By using this style we can easily change CSS with the single file for the entire website.

 

Example:

<html>
<head>
<link rel="stylesheet" href="views/examples/css/style.css">
</head>
<body>
<h3>ABCLEARN</h3>
<p>Free to learn</p>
</body>
</html>