Tutorials

How to create a CSS file and Link to HTML

Pinterest LinkedIn Tumblr

Adding CSS is the way to customize HTML web pages. It is a W3C standard. When we request an HTML document web browser will display it with default style recommended by W3C. By integrating CSS with HTML we can get the appearance as we wanted. In this basic tutorial, we going to learn how to create a CSS file and Link that with the HTLM document. 

There are three ways to integrate CSS with HTML.

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Inline CSS Examples

Inline CSS styles will be added directly to the element level using the style attribute. It is a quick way to style an element. But we have to do it one by one for every element and if we need to change the style then we have to find elements one by one to modify the style.

<h1 style="font-size: 24px; color:red">My hedding </h1>
<p style="margin:10px; font-size:12px; color:#ccc; ">My text here…</p>

If you have to add some special styles to an element quickly, You can use this method. Otherways it is not recommended. 

Internal CSS Examples

Internal CSS styles will be added in top of the page using <style> element. Best practice is adding <style> element within <head> tags. You can add multiple <style> blocks. Within the style tag, you can define your style by pointing style classes, element IDs, or element names. Styles will be applied for that single page only.  

<html>
<head>
<style>
//Style to H1 element
H1 { font-size: 30px; color:blue }

//Style to p1 class 
.p1 { font-size:12px; color:000 }

//Style to box1 element ID
#box1 { 
margin:10px; 
padding:5px; 
background-color:#efefef; 
}
</style>
</head>
<body>
<h1> My hedding 1</h1>

<p class="p1">some text….</p>

<div id="box1">Elements and text</div>

</body>
</html>

External CSS Examples

For the external style sheet, we have to create the style sheet CSS files separately and add the link to HTML documents. In this method, we able to link a single CSS style sheet file to multiple HTML documents. When we need to modify styles we can simply edit the css file. No need to touch the HTML document. 

How to create a CSS file

We can create CSS file with any text editor using ‘.css’ extension. 

For example, if you are a Windows user you may create a CSS file in notepad. 

Step 1: Open notepad. 

Notepad or any other text editor. 

Step 2: Add all of your styles. 

Define style by pointing element name, class, or element ID. Just style only don’t add <style> element. 

Step 3: Save the file as style.css

You can save as any file name. 

External CSS file content 

H1 { font-size: 30px; color:blue }
H2 { font-size: 20px; color:blue }

.p1 { font-size:12px; color:000 }

#box1 { 
margin:10px; 
padding:5px; 
background-color:#efefef; 
}

#box2 { 
margin:10px; 
padding:5px; 
background-color:#ccc; 
width:300px;
height:200px;
}

How to Link external CSS file

We should use <link> element to link an external CSS file with HTML document. A CSS file can be linked with multiple HTML documents. 

<html>
<head>
<link rel=”stylesheet” type="text/css" href="style.css" >
</head>
<body>
<h1> My hedding 1</h1>

<p class=”p1>some text….</p>
<h2>My hedding 2</h2>
<div id=”box1>Elements and text</div>
<div id=”box2>Elements and text</div>

</body>
</html>

Preview:

css

Write A Comment

Pin It