What is CSS?, Advantage of CSS, What can I do with CSS? Three Ways to Use CSS

2
318
css

What is CSS?

CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. Cascading Style Sheets saves a lot of work. It can control the layout of multiple web pages all at once.

Advantages of Cascading Style Sheets

  • CSS saves time
  • Pages load faster
  • Easy maintenance
  • Superior styles to HTML
  • Multiple Device Compatibility
  • Global web standards
  • Offline Browsing
  • Platform Independence

What can I do with Cascading Style Sheets?

Cascading Style Sheets is a style language that defines layout of HTML documents. For example, Cascading Style Sheets covers fonts, colours, margins, lines, height, width, background images, advanced positions and many other things. Just wait and see!

HTML can be (mis-)used to add layout to websites. But Cascading Style Sheets offers more options and is more accurate and sophisticated. Cascading Style Sheets is supported by all browsers today.

After only a few lessons of this tutorial you will be able to make your own style sheets using Cascading Style Sheets to give your website a new great look.

Three Ways to Insert style

  • External style sheet
  • Internal style sheet
  • Inline style

External style sheet

An external style sheet is a separate text file with .css extension. You define all the Style rules within this text file and then you can include this file in any HTML document using <link> element.

The <link> element can be used to include an external stylesheet file in your HTML document.

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

Internal style sheet

You can put your cascading style sheets rules into an HTML document using the <style> element. This tag is placed inside <head>…</head> tags. Rules defined using this syntax will be applied to all the elements available in the document.

<style type = "text/css">
   body {
        background-color: blue;
     }
   h1 {
        color: maroon;
        margin-left: 40px;
     }
</style>

Inline Style

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any Cascading Style Sheets property.

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

 

 

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here