Cascading Style Sheet (CSS) is used to style HTML elements in a web page. CSS give web pages the characteristic style and layout of the web page such as color, font and size.
An HTML document determines the kind of styling that should be applied. In cases where the styling only has to be applied to a particular element, then inline CSS may be used. But if for instance, there are multiple HTML pages and embedded CSS is applied it will require multiple embedded style sections which will make the document look disorganized. In such cases, external CSS will be ideal.
There are 3 types of CSS that are usually used in web pages. They include:
• Inline CSS
• Embedded or Internal CSS
• External CSS
Inline CSS
This is a type of styling that is applied to a particular element. It is usually contained in the <body> section of the HTML document and is specified with a <style> attribute in the particular element. A representation of inline CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<title>Inline CSS</title>
</head>
<body>
<h1 style = "background-color: green; font-size:10; text-align: center;">
How to apply Inline Styling
</h1>
</body>
</html>
Inline CSS takes a higher priority over embedded and external CSS. What this means is that if all 3 style sheets were applied to one HTML document, Inline CSS will take precedence and override the other 2. The inline CSS will be displayed overriding the rest.
Embedded or Internal CSS
Embedded is a type of CSS that is uniquely set to apply to a particular HTML document. They affect only the tags in the page they are embedded in. It is usually contained in the <head> section of the HTML document and are enclosed in the <style> tag. A representation of Embedded CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<title>Embedded or Internal CSS</title>
<style>
.container {text-align: center;
background-color: blueviolet;
}
.main {font-size: 20px;
font-family: 'Courier New', Courier, monospace;
}
.menu {color: blue;
font-size: 25px;
}
</head>
<body>
<div class = "container">
<div class = "main"> Embedded or Internal CSS </div>
<div class = "menu"> Types of CSS styling </div>
</div>
</body>
</html>
Embedded is better than Inline in terms of maintainability. Although, it is also not as good as external in terms of maintainability. For every HTML document that needs CSS styling if embedded were used there would be need for embedded style sections for each of them which isn't the best in terms of maintenance.
External CSS
External styles are typically written in a separate file with .css extension and linked to the HTML document using a <link> tag and are usually enclosed in the<head> section of the HTML document. For every document linked to the CSS file, every style applied will affect the webpages and changes can be made by simply editing the style sheet. They are much more easier to manage and maintain for long-term use and are also the most widely used for websites.
A representation of External CSS:
<head>
<link rel="stylesheet" href="styles.css">
</head>
The external style CSS is linked in this way in the representation above and the CSS file is named after the href content. i.e styles.css. The CSS file can be opened on the same server as the HTML document or on a different server. The link tag is used to link to the external style sheet while the href specifies the style sheet location.
Few things to keep in mind
Inline styling can be really quick but difficult to manage for long-term use.
Inline CSS takes priority over embedded and external CSS.
Embedded CSS applies only to a particular HTML document and is more efficient than inline CSS but is also not easy to maintain in the long run and is not as maintainable as external CSS.
Embedded CSS takes priority over external and overrides the external style sheet.
External CSS has the least priority of all 3 and it only applies in the absence of the other 2.
External CSS is the easiest to maintain and manage. It only has to be linked with the HTML document to manage big applications and websites.
CSS give websites their design and styling. The CSS type to be used depends on the web page or website required.