Basically, there are three main ways to add or apply CSS (Cascading Style Sheets) to HTML pages.
Three ways to add CSS to HTML pages
- Inline CSS
- Internal CSS
- External CSS
1. Inline CSS
Inline-styles are inserted directly into HTML tags using the “style” attribute.
<span style="border: 1px solid red;">Hello World!</span>2. Internal
In the internal method, you add CSS using the <style> tag and this style tag is always defined inside the head tag.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
span{
border: 1px solid red;
}
</style>
</head>
<body>
<span>Hello World!</span>
</body>
</html>3. External CSS
In the external method, your CSS code is written separately in a .css file, then you include that CSS file inside an HTML page using the <link> tag.
This link tag is used to add external resources (such as CSS files) to an HTML page.
How to use the <link> tag to add CSS in HTML pages?
This tag is always written inside the head tag.
This tag has some attributes but to add external CSS you must have to pass two attributes.
rel="stylesheet"href="path"– Path with the name of the CSS file which you want to add.
<link rel="stylesheet" href="mycssfile.css">For demonstration, I created two files in the same folder, one is style.css and the other is index.html.
In the following code, you can see how I linked the CSS file to the HTML file.
span{
border: 1px solid red;
}<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span>Hello World!</span>
</body>
</html>The following image shows the result of examples of inline, internal, and external CSS. The output is the same because we defined the same code in three different ways.
How to write CSS code?
As we all know, CSS is used to style the HTML elements.
So in order to style an HTML element, first you have to select that element. There are a lot of ways to select an element in CSS.
After, selecting an element you have to add curly braces {}, and inside these braces you write the CSS code for the element.
Common ways to select HTML elements in CSS
Through the Class name
add a dot (.) before the class name to select an element. like – .myclass, .container, .box, etc.
<style>
.blue{
/* css code */
}
</style>
<span class="blue">Hello John.</span>Through the Id name
The selection is similar to the class-based selection, but you have to add # before the id name. like – #myId, #specialBox, etc.
<style>
.#span1{
/* css code */
}
</style>
<span id="span1">Hello John.</span>Selecting by tag names
You can specify the tag name directly.
<style>
div{
/* css code */
}
</style>
<div>Hello John.</div>Note:
Tag and class-based selection select a group of elements. This means that if you define a CSS code for a class name, it will apply the style to all the elements that have the class-name.
<style>
.blue{
color: blue;
}
</style>
<h2 class="blue">Heading</h2>
<h4>Heading 4</h4>
<span class="blue">Span</span>
<div class="blue">Div</div>
Tag-based selection selects all the same tags.
<style>
div{
color: blue;
}
</style>
<h2 class="blue">Heading</h2>
<div>Div 1</div>
<span class="blue">Span</span>
<div class="blue">Div 2</div>
Way to write CSS code
CSS code is written in property:value pairs.
The CSS properties specifies what to style of the targeted HTML elements. For example, you want to add a border to an element, for that there is a CSS property called border which is used to add a border to an element.
First, inside the curly braces, type the property name of the element, and then add the value.
Each CSS property and value are separated by a colon (:) and after the value, you must define a semicolon (;) to separate multiple declarations.
selector{
property:value;
property:value;
}
Example of CSS code
In the following code, you can see that there is a span element.
- Now, in the CSS you can see the span element has been selected through the tag name.
- Then border property and its value are defined to add a border to the element.
- In the very next line the color property and its value are defined to add color to the font.
<style>
span{
border: 1px solid red;
color: brown;
}
</style>
<span>Hello</span>Note:
Each CSS property has a way of defining its value. For example, how to add value to a border property?
The css border property takes a value into three parts and each part is separated by a space – border: border-thickness border-type border-color;
Border Thickness/width example
