Welcome to the CSS tutorial, and today we will see Ways to use CSS. In fact, many of the properties used in CSS are similar to the Html properties. If you are familiar with Html, then Learning CSS will not be a difficult task for you. Now let’s come to the topic “ ways to use CSS”, there are three ways to implement CSS.

ways to css implementation

Ways to apply CSS

  • Inline style
  • Internal style sheet
  • External style sheet

Inline style

We will start ways to use CSS topic with inline styles, and you can use the style attribute to apply CSS in Html document. Let’s see how to do that:

<html>

<head>

</head>

<body>

<h2 style="color:#228B22;">Inline style.</h2>

</body>

</html>

We called it inline style because we use style to a particular element. And here we applied it to the heading tag.

 Internal style sheet

We can implement CSS using Html style tags, Let’s see how to do that:

<html>

<head>

<title>Example</title>

<style>

body {background-color: #ADFF2F;}

</style>

</head>

<body>

<p>This is a red page</p>

</body>

</html>

In the above example, we have put a style tag in the head section. In the above style tag, we can put the CSS code for any html element used in this particular page. You can clearly figure out the difference between the inline and internal style sheet.



External style sheet

This style sheet is best to apply to many pages. To implement external style sheet, we need to include a link to the style sheet with the link tag. This link will be placed in the head section. Let’s understand it by example:

We have created and put it in the same folder where html file is, the CSS file is myExternal.css and the html file is test.html.

myExternal.css

body {

background-color: grey;

}

h1{

color: red;

}

Test.html

<html>

<head>

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

</head>

<body>

<h2>Example of External CSS</h2>

</body>

</html>

In the above example, you can see a link in the head tag, which will specify the CSS file to be used.

Note: you can create Html or CSS file in simple note pad.

Conclusion

We have covered ways to implement CSS with examples, and you must have got the idea of using CSS. Never forget few things:

  • Avoid using inline style in your practice, it is time consuming and will dilute the presentation part.
  • The style attribute and style tag are different things, don’t misinterpret the term.
  • Internal style is good for small designs or for practice.
  • External style sheet is best to use.

What next? Next are units in CSS


If you liked our content on ways to implement CSS, then share it with friends or like us on Facebook. If you wish can link to us as well.