• Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard
CSEstack

What do you want to Learn Today?

  • Programming
    • Tutorial- C/C++
    • Tutorial- Django
    • Tutorial- Git
    • Tutorial- HTML & CSS
    • Tutorial- Java
    • Tutorial- MySQL
    • Tutorial- Python
    • Competitive Coding Challenges
  • CSE Subject
    • (CD) Compiler Design
    • (CN) Computer Network
    • (COA) Computer Organization & Architecture
    • (DBMS) Database Management System
    • (DS) Data Structure
    • (OS) Operating System
    • (ToA) Theory of Automata
    • (WT) Web Technology
  • Interview Questions
    • Interview Questions- Company Wise
    • Interview Questions- Coding Round
    • Interview Questions- Python
    • Interview Questions- REST API
    • Interview Questions- Web Scraping
    • Interview Questions- HR Round
    • Aptitude Preparation Guide
  • GATE 2022
  • Linux
  • Trend
    • Full Stack Development
    • Artificial Intelligence (AI)
    • BigData
    • Cloud Computing
    • Machine Learning (ML)
  • Write for Us
    • Submit Article
    • Submit Source Code or Program
    • Share Your Interview Experience
  • Tools
    • IDE
    • CV Builder
    • Other Tools …
  • Jobs

[Step-by-step] How to add CSS file to HTML | Source Code Example

Aniruddha Chaudhari/47115/4
CodeHTML & CSS

In an earlier  tutorial, we have seen writing your first HTML program. In this tuturoal, we will see how you can add CSS file to HTML code.

Let’s start with the beginning.

Table of Contents

  • What is CSS?
  • Writing Your First CSS File
  • Embed / Add CSS file to HTML
  • HTML and CSS Example
  • Advantages of CSS

What is CSS?

CSS (Cascading Style Sheet) is the file format.

This file describes how the HTML content should be displayed on the screen.

With this file, you can format the content of the HTML file like changing the color of the text, increasing/decreasing font size, alignment of any HTML element…

All the text formatting you can write in CSS file and then you can add that CSS file in multiple HTML file.

Writing Your First CSS File

First of all, you have to write your own CSS file. If you already have a style sheet (CSS file), you can skip this step

  • Open the notepad or any text file editor.
  • Write a simple CSS code. (You can find the example of the CSS code in next section.)
  • Save the file with extension CSS (.css).

After that you have to add that CSS file into the HTML code.

Embed / Add CSS file to HTML

To add CSS to your HTML file you have to use “link” tag. It is used to link other files to the HTML file.

Link tag make the link between HTML and other exteternal documents.

Add this single line script code inside head tag of your HTML file.

<link rel="stylesheet" href="mystyle.css">

Note: Make sure you have saved your CSS file in the same directory where your HTML file is located.

Here we are using two attributes “rel” and “href”

rel: It defines the type of relationship between HTML and another external file.

href: It is used to specify the location of the external file.

HTML and CSS Example

Write below code in your CSS file (mystyle.css) and save it.

p {
  font-size: 150%;
  color: green;
}

Here we are applying CSS code on our HTML “p” tag. Similar;y you can apply CSS to any other HTML tags.

HTML Code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyles.css">
</head>
<body>

<p>I'm very enthusiastic to learn web development!</p>

</body>
</html>

Write this in your HTML file (.html) and save it.

Now open the HTML file in your browser.

You can see the font size of the text inside “p” tag has increased by 150%. The text of the color has become green.

Advantages of CSS

There are multiple advantages to using CSS.

  • You just need to create one CSS file to format as many HTML file content.
  • Using same CSS file for multiple HTML files, improve the reusability.
  • It is efficient to maintain all the CSS code in a single file.
  • CSS improves your website loading time as there is a single file for all CSS code.
  • Embedding single style sheet in all the web pages of your website improves the consistency. Every page on your website will be seen with a single format.

There are many benefits of writing CSS file and it has become standard now.

This is a simple explanation add CSS file to HTML. If you have any doubt, write in the comment.

Python Interview Questions eBook

CSSHTML
Aniruddha Chaudhari
I am complete Python Nut, love Linux and vim as an editor. I hold a Master of Computer Science from NIT Trichy. I dabble in C/C++, Java too. I keep sharing my coding knowledge and my own experience on CSEstack.org portal.

Your name can also be listed here. Got a tip? Submit it here to become an CSEstack author.

Comments

  • Reply
    mir pedram
    June 14, 2021 at 4:47 pm

    This example was very useful and I enjoyed it.

    • Reply
      Aniruddha Chaudhari
      June 17, 2021 at 11:01 am

      Glad you like it. Hope you enjoy going through the other tutorial as well. Best wishes!

  • Reply
    George Binota
    March 15, 2022 at 9:27 am

    It’s so easy to understand, thank you so much! I’m learning HTML to create my portfolio website template.

    • Reply
      Aniruddha Chaudhari
      March 20, 2022 at 10:56 pm

      Best wishes, George!

Leave a Reply Cancel reply

HTML CSS & JavaScript

  • HTML- First Program
  • HTML- Basic Tags
  • HTML- Adding CSS
  • HTML- Best Form Design Practices
  • HTML- Text Indent using CSS
  • HTML- Drop Cap using CSS
  • HTML- Add Favicon
  • HTML- Adding ToC on Website
  • HTML- Save Page as PDF
  • CSS- 17 Tips for Optimizing CSS
  • CSS- Adding Image Shadow
  • Show/Hide Password on Login Form
  • Pass Data to Another Web Page [JS]
  • Horizontal Scrolling on Mobile Web

HTML Editing Tools

  • HTML- Online Editor
  • HTML- Novi Builder

© 2022 – CSEstack.org. All Rights Reserved.

  • Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard