Know How To Add CSS In HTML With Examples - October 3rd, 2024

Q: How to put external CSS in HTML?

To include external CSS in HTML, create a separate CSS file (e.g., styles.css) and link it to your HTML document using the tag within the head section. Specify the rel="stylesheet" attribute and set the href attribute to the path where your CSS file is located. For example: link rel="stylesheet" href="styles.css".

CSS in HTML: Are you tired of your HTML web pages looking plain and uninspiring? Do you want to take your web design skills to the next level and create stunning and eye-catching websites? Look no further!

From basic syntax to advanced techniques, we will cover it all in this blog post. By using CSS in HTML, you have the power to transform a plain website into an eye-catching and visually appealing masterpiece. So go ahead and experiment with different styles, colors, and website layouts to create your own unique designs. And remember, practice makes perfect so don’t shy away from continuously honing your skills.

In addition, if you are serious about becoming a skilled web developer or want to enhance your current skills, we highly recommend checking out the Full Stack Development Course offered by Physics Wallah.

Table of Contents

Why To Add CSS In HTML

Adding CSS in HTML is important because it helps you to make web pages look visually appealing and organized. CSS (Cascading Style Sheets) allows you to control the layout, colors, fonts, and overall design of a webpage.

By using CSS in an HTML Document, you can separate the content of your page from the design, making it easier to manage and update the appearance of the website. Without CSS, HTML pages would look plain and difficult to navigate. CSS also helps you to improve user experience by making websites responsive and adjusting the layout to different screen sizes and devices.

Ways To Add CSS In HTML

There are three main ways to add CSS in HTML, each types of CSS uses a different approach. The inline CSS method involves adding styles directly to an HTML element using the “style” attribute, which is useful for small changes but can clutter the code.

The internal CSS method places the styles within a “style” tag inside the head section of the HTML document, allowing you to style multiple elements on a single page.

Lastly, external CSS uses a separate CSS file linked to the HTML document with a “link” tag in the head section, which is the best practice for larger websites as it keeps the HTML clean and makes it easier to maintain styles across multiple pages. Each method has its specific use, depending on the project’s needs. Let us explore each of the methods of adding CSS in HTML with the help of an example written below.

External CSS in HTML With Example

The external CSS method involves linking an external CSS file to your HTML document using the <link> tag within the <head> section. This approach separates content from presentation, allowing you to maintain a centralized stylesheet that can be reused across multiple HTML documents.

Below is a simple step-by-step example demonstrating how you can use external CSS in HTML document:

1) Create an External CSS File

The very first step is to, create a separate CSS file named styles.css and save it in the same directory as your HTML file.

Styles.css

/* External CSS Styles */

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

color: #333;

}

h1 {

color: #007bff;

text-align: center;

}

p {

font-size: 18px;

line-height: 1.6;

}

.highlight {

background-color: #ffc107;

padding: 10px;

border-radius: 5px;

}

2) Create the HTML File and Link the External CSS

Now the second step is to create an HTML file with any preferred name but make sure it should have a .html extension, and then link the styles.css file using the <link> tag within the <head> section.

Index.html

<!DOCTYPE html>

<head>

<title>External CSS Example</title>

<link rel=”stylesheet” href=”styles.css”>

</head>

<body>

<!– HTML Content with External CSS –>

<h1>Welcome to My Website</h1>

<p>This is a paragraph demonstrating the use of external CSS styles. By linking the styles.css file, we can apply consistent styling across multiple HTML documents.</p>

<p class=”highlight”>You can also apply styles to specific elements or classes using the external CSS file, providing a centralized approach to manage your website’s appearance.</p>

</body>

</html>

Steps to Implement:

Save the CSS File: Create a file named styles.css and save your CSS code (as shown in the first code block) within this file.
Link the CSS File: In your HTML file (e.g., index.html), use the <link> tag within the <head> section to link the external CSS file. Ensure the href attribute points to the correct path where your styles.css file is located relative to your HTML file.
Save Changes: Save both your HTML (index.html) and CSS (styles.css) files in the same directory.
Open in Browser: Open the index.html file in a web browser to view the applied external CSS styles. Ensure everything displays as expected with the styling defined in the styles.css file.

By following these steps, you can effectively utilize external CSS files to maintain a centralized stylesheet, ensuring consistent and organized styling across multiple HTML documents within your web development projects.

Also Read: C++ Classes and Objects: Exercises, Examples

Internal CSS in HTML

Internal CSS, also known as embedded or internal styles, allows you to define CSS styles directly within the HTML document’s <head> section using the <style> tag. This method combines the benefits of external CSS files and inline CSS by providing a structured and organized approach to defining styles within the same HTML document. Below is an example demonstrating how to use internal CSS within an HTML document:

Internal CSS Example

<!DOCTYPE html>

<head>

<title>Internal CSS Example</title>

<!– Internal CSS Styles –>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

color: #333;

}

h1 {

color: #007bff;

text-align: center;

}

p {

font-size: 18px;

line-height: 1.6;

}

.highlight {

background-color: #ffc107;

padding: 10px;

border-radius: 5px;

}

</style>

</head>

<body>

<!– HTML Content with Internal CSS –>

<h1>Welcome to My Website</h1>

<p>This is a paragraph demonstrating the use of internal CSS styles within an HTML document. Internal CSS allows you to define styles directly in the HTML file, providing a structured approach to styling your web pages.</p>

<p class=”highlight”>You can also apply styles to specific elements or classes using internal CSS, providing flexibility and control over your web page’s appearance.</p>

</body>

</html>

In this example:

Everything between the <style> tag within the <head> section contains the internal CSS styles.
CSS selectors like body, h1, p, and .highlight define styling rules for the respective HTML elements and classes.
The HTML body contains elements (<h1>, <p>) to which the internal CSS styles are applied.
The .highlight class demonstrates how to apply styles to specific elements using internal CSS, offering flexibility and customization options directly within the HTML document.

Using internal CSS provides a structured approach to styling individual HTML documents, making it suitable for smaller projects, prototypes, or specific pages where external stylesheets may not be necessary. However, for larger projects or websites with multiple pages, external CSS files offer better maintainability, scalability, and performance benefits.

Also Read: The Best Guide to HTML Tags

Inline CSS with Example

Inline CSS involves applying styling directly within individual HTML elements using the style attribute of HTML. This approach allows you to add specific styles to a single element without creating external or internal CSS rules. Below are some examples demonstrating how to use inline CSS with different HTML elements:

Inline CSS In HTML Example – 1

<!DOCTYPE html>

<head>

<title>Inline CSS Example</title>

</head>

<body>

<!– Inline CSS for text color and font size –>

<h1 style=”color: blue; font-size: 36px;”>Welcome to My Website</h1>

<p style=”color: green; font-size: 18px;”>This is a paragraph of text with inline styling.</p>

<span style=”color: red; font-size: 24px;”>Inline CSS example for a span element.</span>

</body>

</html>

Inline CSS In HTML Example – 2

<!DOCTYPE html>

<head>

<title>Inline CSS Example</title>

</head>

<body>

<!– Inline CSS for background color and padding –>

<h2 style=”color: #333;”>About Us</h2>

<p style=”color: #666;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.</p>

</div>

</body>

</html>

Inline CSS In HTML Example – 3

<!DOCTYPE html>

<head>

<title>Inline CSS Example</title>

</head>

<body>

<!– Inline CSS for styling links –>

<a href=”#” style=”color: #007bff; text-decoration: none; border-bottom: 1px dashed #007bff;”>Click Here</a>

<a href=”#” style=”color: #dc3545; text-decoration: underline; font-weight: bold;”>Learn More</a>

</body>

</html>

In these examples, the style attribute within each HTML element defines specific inline CSS styles. You can adjust various CSS properties such as color, font size, background color, padding, text decoration, and more directly within the HTML tags using the inline CSS approach.

While inline CSS provides immediate styling for individual elements, it is essential to use it wisely, considering the maintainability and scalability of larger projects.

Also Read: &nbsp HTML Space Challenges and Tricks

How to Link CSS to HTML in Visual Studio Code

Linking CSS to HTML in Visual Studio Code (VS Code) involves establishing a connection between your HTML file and an external CSS stylesheet. Here is a step-by-step guide to linking CSS to HTML in VS Code:

Method 1: Using an External CSS File

Create a CSS File:

Open your project folder in VS Code.
Right-click within the folder, select “New File,” and name it something like styles.css.
Open the styles.css file and add your CSS code, such as styling rules for elements, classes, IDs, etc.

Link CSS File to HTML:

In your HTML file (index.html or any other name), locate the <head> section.
Within the <head> section, add the following line to link the CSS file:

For example- <link rel=”stylesheet” href=”styles.css”>

Ensure that the href attribute points to the correct path where your styles.css file is located relative to your HTML file.

Save Changes:

Save both your HTML and CSS files in VS Code.

Method 2: Using Internal CSS (within HTML file)

Write Internal CSS:

Open your HTML file (index.html or any other name) in VS Code.
Within the <head> section of your HTML file, you can add <style> tags to write internal CSS directly. A simple example of syntax is given below for your reference:

Syntax Example Of Internal CSS

<style>

/* Your CSS code here */

body {

font-family: Arial, sans-serif;

}

</style>

Method 3: Using Inline CSS (within HTML tags)

Apply Inline CSS

Open your HTML file (index.html or any other name) in VS Code.
In the HTML body, you can apply inline styles directly to specific elements using the style attribute, like this:
<h1 style=”color: blue; text-align: center;”>Hello, World!</h1>
Save your HTML file in VS Code.

Final Steps

After linking or adding CSS to your HTML file in VS Code, ensure to save all changes (Ctrl + S or Cmd + S on Mac).
Open your HTML file in a web browser to view the applied CSS styles and ensure everything displays as expected.

By following these steps, you can easily link external CSS files, write internal CSS, or apply inline styles within your HTML files using Visual Studio Code, a popular code editor for web development.

Use of Different Types of CSS In HTML

Let’s summarize and provide unique content on the use of different types of CSS, considering the benefits and scenarios where each type is most effective.

1) Inline CSS

Inline CSS in HTML is applied directly within the HTML elements using the style attribute. While it may seem beneficial for immediate styling and quick prototyping, it comes with limitations. Inline CSS reduces the need for external file requests, improving page load speed by minimizing HTTP requests.

However, it becomes challenging to manage as the project grows due to its lack of scalability and maintainability. Inline styles override external and internal styles, making them challenging to manage in larger projects. It’s primarily useful for quick fixes, prototyping, or specific elements requiring immediate styling adjustments.

2) Internal CSS

Internal CSS resides within the <style> tag in the HTML document’s <head> section. This approach combines the benefits of inline and external CSS to some extent. Internal CSS offers a more organized structure than inline styles but remains limited in terms of scalability.

It’s beneficial for small projects, testing purposes, or when specific styles apply to a single page. Internal CSS prioritizes over external styles and allows pseudo-elements styling. However, it may lead to redundant code if not managed properly.

3) External CSS

External CSS involves linking an external stylesheet file (.css) to the HTML document using the <link> tag. This method promotes clean, organized, and maintainable code by separating content from presentation.

External CSS facilitates consistency across multiple pages, enables easy updates, and enhances website performance by caching stylesheets. It allows designers and developers to maintain a centralized stylesheet, ensuring uniformity and scalability across the entire website or application. External CSS supports media queries, pseudo-elements, classes, and offers better performance optimization, reducing file sizes, and improving search engine visibility.

Choosing the appropriate type of CSS depends on the project’s size, complexity, scalability requirements, and development objectives. While inline and internal CSS offer immediate solutions for specific scenarios, external CSS remains the preferred choice for maintaining consistency, scalability, performance optimization, and efficient code management across extensive web development projects.

Also Read: What Is HTML? Hypertext Markup Language Basics Explained

Properties of CSS

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation and appearance of HTML elements on a web page. CSS properties control various aspects of styling, layout, and design, allowing developers to customize the look and feel of web content. Here are some properties of CSS categorized by their functionalities:

1. Text Styling

color: Sets the color of text content.
font-family: Defines the font family for text.
font-size: Specifies the size of the font.
font-weight: Sets the weight (boldness) of the font.
text-align: Aligns text content (left, right, center, justify).

2. Backgrounds and Borders

background-color: Sets the background color of elements.
background-image: Specifies the background image.
background-repeat: Defines how background images repeat.
border: Sets the border around elements (width, style, color).
border-radius: Defines the rounded corners of elements.

3. Layout and Box Model

margin: Sets the outer spacing around elements.
padding: Defines the inner spacing within elements.
width: Specifies the width of elements.
height: Sets the height of elements.
display: Controls the display behavior of elements (block, inline, flex).

4. Positioning and Alignment

position: Specifies the positioning method of elements (static, relative, absolute, fixed).
top, right, bottom, left: Positions elements relative to their containing element.
float: Aligns elements to the left or right within their container.
clear: Clears the floating elements.

5. Visibility and Overflow

visibility: Controls the visibility of elements (visible, hidden).
overflow: Defines how content overflows the element’s box (visible, hidden, scroll, auto).

6. Transformations and Transitions

transform: Applies transformations (translate, rotate, scale, skew) to elements.
transition: Creates smooth transitions for element changes (property, duration, timing function).
animation: Defines animations for elements (keyframes, duration, timing function).

7. Flexbox and Grid Layout

flex: Controls flexible layouts using the Flexbox model.
grid: Creates grid layouts using the CSS Grid layout system.
justify-content: Aligns items along the main axis in Flexbox or Grid layouts.
align-items: Aligns items along the cross-axis in Flexbox or Grid layouts.

8. Typography and Text Effects

line-height: Sets the height of lines within text content.
text-decoration: Adds decorations to text (underline, overline, line-through).
text-transform: Transforms text casing (uppercase, lowercase, capitalize).
letter-spacing: Adjusts the spacing between characters.
word-spacing: Defines the spacing between words.

9. Media Queries and Responsive Design

@media: Defines media queries for responsive design (screen size, orientation, resolution).
viewport: Controls the viewport settings for responsive layouts.

10. Miscellaneous

opacity: Sets the transparency level of elements.
z-index: Specifies the stacking order of elements.
cursor: Defines the mouse cursor style when hovering over elements.
box-shadow: Adds shadows to elements.

These are just some of the many CSS properties available for web developers to style, layout, and design web content. By combining and utilizing these properties effectively, developers can create visually appealing, responsive, and user-friendly web interfaces tailored to specific design requirements and user experiences.

Learn Web Development With PW Skills

If you are serious about becoming a skilled web developer or want to enhance your current skills, we highly recommend checking out the Full Stack Development Course offered by Physics Wallah. Not only will you learn in-depth about HTML and CSS but also other crucial aspects of web development such as JavaScript and frameworks like Bootstrap.

Recommended Course

Generative AI Course

Python DSA Course

Devops Course

UI UX Course

CSS in HTML FAQs

How do you add CSS to HTML?

CSS can be added to HTML using inline styles, internal styles, or external stylesheets. Inline styles use the style attribute within HTML tags, internal styles use the style tag within the section of the HTML document, and external stylesheets are linked using the link tag to an external CSS file.

How to add CSS to link in HTML?

To link CSS to HTML, use the link tag within the section of the HTML document with the rel="stylesheet" attribute and specify the href attribute to point to the CSS file. For example: link rel="stylesheet" href="styles.css".

How to insert CSS class in HTML?

To insert a CSS class in HTML, use the class attribute within HTML tags and specify the class name defined in your CSS stylesheet. For example: div class="my-class">Content</div. In your CSS, define .my-class { /* styles */ }.

How to put external CSS in HTML?

To include external CSS in HTML, create a separate CSS file (e.g., styles.css) and link it to your HTML document using the tag within the head section. Specify the rel="stylesheet" attribute and set the href attribute to the path where your CSS file is located. For example: link rel="stylesheet" href="styles.css".