What's CSS?

In the very beginning stage, we were let know that, HTML is the skeleton, and the CSS is the design added to the HTML. CSS is Cascading style sheet. As the name suggests, styling sheets. It's like, the HTML makes the framework and the CSS presents the HTML in a more presentful manner. Mostly, Both the HTML and the CSS files are made separate and the CSS is then linked to the HTML. This ensures that the framework and the beautification of the webpage are kept separate.

The CSS files are saved with the extension of .css and then linked in the html inside the head tag.

3 different types of CSS:

Inline CSS
Internal CSS
External CSS

let's discuss these further

The Inline CSS:

Pros of Inline CSS:

The most important point is that the inline CSS enjoys the most [recendance over any other CSS options available.
There is no need to create an additional file.

Cons of Inline CSS:

Does not provide browser cache advantages.
Updation is difficult as, if the CSS is applied individually, then for any change to be reflected, multiple changes in the CSS of various locations might have to be made, making the task tedious.
Pseudo-codes and Pseudo-classes cannot be applied with inline CSS.

Inline CSS is the CSS applied directly in the html element to be formatted. if for example, we want to make the paragraph text color to be gray, we can simply do this by

<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>

<h2 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h2>  
<p>This paragraph is not affected.</p>

Internal CSS:

Internal CSS is when the CSS is to be applied to one single webpage. in this case, a new tag called style is created. the style tag is placed in the head tag. for smooth application and definition particularly where the CSS is applied, classes are made.

<html>  
<head>  
<style>  
body {  
    background-color: linen;  
}  
h1 {  
    color: red;  
    margin-left: 80px;  
}   
</style>  
</head>  
<body>  
<h1>The internal style sheet is applied on this heading.</h1>  
<p>This paragraph will not be affected.</p>  
</body>  
</html>

External CSS:

External CSS is used mostly for projects where there would be multiple files requiring the same CSS. for external, as the name suggests, a new different HTML and CSS sheet is made. the CSS sheet is then linked to the main HTML page. using the link inside the head tag.

<head>  
<link rel="stylesheet" type="text/css" href="mystyle.css">  
</head>

Here too there are uses of classes to be specific. let's say, there are 2 paragraphs in a webpage and the CSS is to be applied in only one paragraph. how do we tell that now? Through classes. We would apply CSS only to a class.

body {  
    background-color: lightblue;  
}  
.h1 {  
    color: navy;  
    margin-left: 20px;  
}

This is a very firm base for starting CSS. I'll be talking about CSS of various elements in depth. Follow along, and keep an eye on new postings!

Keep Developing till then!!!

Prachiii's Blog