Home of web learners

www.webn3rd.com

Three ways you can use css

First one is inline.It's inline because you can code css inside html tag

Lets look an example:

<html>
<head>
</head>
<body>
<p style="color:red;">This is a text</p>
</body>
</html>

output

This is a text

Here you see that inside p tag,we use css code

To make design a tag,you have to use style and it defines inside it css code will use.

Inside style property of tag which is color and value of it,red used

Second one is internal.It called internal because css code is used within the page

<html>
<head>
<style>
p { color:red; }
</style>
</head>
<body>
<p>This is text</p>
</body>
</html>

Output:

This is a text

Here we see that,css code is used within this page and we have to used it by declaring style tag.

Inside style,we are going to use css code

Here we see that to change color of This is text,we use its p tag and we override its default color and giving value red

Third one is external way.We can use a file whrere we just put css code

Its needed because we can use global css for every page,so we don't have to write same css code for every page

Lets look this example

<html>
<head>
<link type="text/css" href="main.css">
</head>
<body>
<p>This is text</p>
</body>
</html>

Here we see that,inside head tag we use a link,this is used to make link with your css code file

We used type and its value text/css,then we give the location of css files in href

Start with a new file from your code editor and write this code:

p { color:red; }

Only the css code we need to use in external css file

Then save it as main.css as file name and store it in your same html folder within html files

You will find the same output like internal or inline css

Output:

This is a text

webn3rd.com

About webn3rd