Linking your CSS
CSS stands for Cascading Style Sheets. It helps us format our HTML documents. This is based on “separate of concerns”. It is a design principle for separating computer program into distinct sections, such that each section addresses a separate concern. There are three ways to link CSS with HTML — external method, internal method and inline method.
METHOD #1 — EXTERNAL STYLING
This is the most preferred method for styling. This is usually written in the <head> tag. The syntax for this :
< link rel=”stylesheet” href=”styles.css” />
We place the stylesheet reference in the “href” attribute of the <link> tag. Ideally, the HTML and CSS files should be in the same directory. Linking of the external stylesheet to the HTML document is called as “External Style Sheet Linking”.
METHOD #2 — INTERNAL STYLING
This type of styling is advisable for small projects. This can be done using the <style> tag inside of the HTML document. The syntax is:
<head>
<style>
div {
// CSS styling
}
</style>
</head>
This way CSS is automatically connected to HTML document.
METHOD #3 — INLINE STYLING
This method is the least recommended way of styling the document. We use “style” as an attribute to set the value. The syntax is :
<div style=”color: red”> </div>
This styling is not modular and it makes the code harder to read and understand.
This article helps you understand CSS linking with HTML. Like this article? Follow Maneesha Venigalla.
