How to write inline, internal and external css in HTML

CSS means Cascading Style Sheets, it is used  to decorate and make beautiful for website. There are three different way of CSS used in html or php,

1. Inline - using a style attribute in HTML elements
2. Internal - using a <style> element in the HTML <head> section
3. External - using one or more external CSS files

1. Inline

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">This is a Heading</h1>

</body>
</html>

Output:

This is a Blue Heading

2.Internal 

Internal styling is defined in the <head> section of an HTML page, within a <style> element:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightgrey;}
h1   {color: red;}
p    {color: gray;}
</style>
</head>
<body>

<h1>This is a main head</h1>
<p>This is a sub head.</p>

</body>
</html>

Output 

This is a Main Head

This is a sub head.

3.External 

External style sheet, you can change the look of an entire web site by changing one file, external style sheet, add a link to it in the <head> section of the HTML page.

Always must used.css extention css file , style.css

body {
    background-color: lightgrey;
}

h1 {
    color: blue;
}

p {
    color:green;
}

And main Html page.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a Main heading</h1>
<p>This is a sub heading</p>

</body>
</html>

Output:

This is a Main heading

This is a sub heading



0 comments:

Post a Comment