What is CSS

December 12, 2015 by writer

Filed under HTML & CSS

Last modified June 15, 2016

What is CSS?

Introduction:

CSS is expanded as Cascading Style Sheet. What is the use of just displaying texts without any formatting or alignment? Cascading Style Sheets are very helpful in the display. CSS describes how the contents of a webpage has to be displayed on a screen. CSS gives a layout for webpages. Thus, we can apply the same layout to any number of webpages with a small segment of code at the same time. This is a very simple task and reduces a lot of time. Also, we can link different stylesheets to the same webpage.

 

Advantages of Using CSS with HTML:

            Formatting can be done up to a certain level using the HTML tags without linking the CSS. However, it is a very tedious job and not all kinds of formatting can be done using the tags alone. For every line of code, a tag has be used. This is time consuming and takes up a lot of space. But with CSS, the context is totally different. A small segment of code is enough to apply formatting to the contents. And the same code can be applied to different webpages which reduces the time considerably. The user can customize the webpage completely according to his needs and make it look more attractive and colourful.

Ways to insert the style sheets:

When the webpage is loaded in the server, it reads and interprets the webpage and presents the HTML document according to the definitions in the style sheet. Generally, Cascading style sheets are inserted in 3 ways. They are:

  • External Style Sheet
  • Internal Style Sheet
  • Inline

External Style Sheet:

Here, a style sheet is saved as a separate file with “.css” extension. The biggest advantage of this method is that, the look of the website can be totally modified by changing a single file. The style sheet can be edited in any text editor. It does not contain any HTML tags. Style sheet is linked with a HTML file using the <Link> tag.

An example to attach a style sheet:

<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>

Internal Style Sheet:

            An internal style sheet can be used when a single web page has a distinct style. A style sheet is inserted as a part of the HTML code. It is not inserted as a separated file. The styles are defined using the <style> tag within the <head> tag.

 

Example:

<head>
<style>
body {
background-color: red;
}

h1 {
color: blue;
margin-left: 25px;
}
</style>
</head>

           

Inline Styles:

            When there is a need for styling every single element with a distinct style, inline styling style is used. This styling does not separate the presentation part and the presentation part. This is the major disadvantage of this styling method. So, it is not used much. To use this style, a style attribute is added to the corresponding element. Any required property can be added to any element.

Example:

<h1 style=”color:red;margin-left:45px;”> Heading.</h1>

Thus, the element h1 is styled by using the style attribute where the colour of the text is red and the left margin is at 45px.

Leave a Comment