Cascading Style Sheet CSS is added to HTML pages to format the document according to information in the style sheet. There are three ways to insert CSS in HTML documents. Most commonly used methods are inline CSS and External CSS.
- Inline CSS
- Internal/Embedded CSS
- External CSS
Inline CSS
Inline CSS is used to apply CSS on HTML element.
<p style="color:#FF0000">Learn CSS</p>
Example :
<!DOCTYPE html>
<html>
<body>
<h1 style="color:#000000;text-align:center;">CSS Tutorials</h1>
</body>
</html>
Internal/Embedded CSS
Internal CSS is used to apply CSS on a single document or page. It can affect all the elements of the page.
The internal style is defined inside the <style> element, inside the head section.
h1{color:green;}
Example :
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family:Arial, Helvetica, sans-serif;
}
h1 {
color:#000000;
text-align:center;
font-size:16px;
}
</style>
</head>
<body>
<h1>CSS Tutorials</h1>
</body>
</html>
External CSS
External CSS is used to apply CSS on multiple pages or all pages in website. We can write all the CSS code in a css file. Its extension must be .css for example style.css.
You need to link this style.css file to your html pages like this as below.
<link rel="stylesheet" type="text/css" href="style.css">
Example :
file name : style.css
body {
font-family:Arial, Helvetica, sans-serif;
}
h1 {
color:#666666;
text-align:center;
font-size:14px;
}
file name : home.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>CSS Tutorials</h1>
</body>
</html>
Comments