CSS in HTML integration is done in 3 ways: inline style, internal CSS, and external CSS. Refer to the article to know these 3 methods in detail!
CSS in HTML: Are you tired of your HTML websites 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. With CSS, 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 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’re 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. And as a loyal reader of this blog, you can use the coupon code “READER” to avail an amazing discount on the course!
Add CSS in HTML Using CSS
Adding CSS to an HTML document using the <style> tag allows you to include internal or embedded CSS directly within the HTML file. This method can be particularly useful for smaller projects, prototypes, or when you prefer to keep styles closely associated with a specific HTML document. Below is an example demonstrating how to add internal CSS to an HTML document using the <style> tag:
<!DOCTYPE html>
<html lang=”en”>
<head>
  <meta charset=”UTF-8″>
  <title>Internal CSS Example</title>
  <!– Internal CSS Styles using <style> tag –>
  <style>
    /* Define internal CSS styles within the <style> tag */
    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, offering flexibility and control over your web page’s appearance.</p>
</body>
</html>
In this example:
- 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 class.
- The HTML body contains elements (<h1>, <p>) to which the internal CSS styles are applied.
Steps to Implement:
- Add the <style> Tag: Within the <head> section of your HTML document, add the <style> tag to enclose your CSS code, defining the desired styles for your web page elements.
- Define CSS Styles: Inside the <style> tag, define your CSS styles using appropriate selectors and properties to customize the appearance of HTML elements as per your requirements.
- Save and Preview: Save your HTML file and open it in a web browser to view the applied internal CSS styles, ensuring that your web page displays content according to the defined styling rules.
By incorporating internal CSS using the <style> tag within your HTML document, you can directly embed styles, ensuring a cohesive design and presentation for specific web pages or projects where external stylesheets may not be necessary or preferred.
External CSS in HTML With Example
External CSS 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 an example demonstrating how to use external CSS with an HTML document:
1) Create an External CSS File:
First, 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, create an HTML file named index.html (or any preferred name) and link the styles.css file using the <link> tag within the <head> section.
Index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
  <meta charset=”UTF-8″>
  <title>External CSS Example</title>
  <!– Link External CSS File –>
  <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>
<html lang=”en”>
<head>
  <meta charset=”UTF-8″>
  <title>Internal CSS Example</title>
  <!– Internal CSS Styles –>
  <style>
    /* Define internal CSS styles within the <style> tag */
    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:
- 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 class.
- 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. 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:
Example 1: Styling Text Color and Font Size
<!DOCTYPE html>
<html lang=”en”>
<head>
  <meta charset=”UTF-8″>
  <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>
Example 2: Setting Background Color and Padding
<!DOCTYPE html>
<html lang=”en”>
<head>
 <meta charset=”UTF-8″>
 <title>Inline CSS Example</title>
</head>
<body>
 <!– Inline CSS for background color and padding –>
 <div style=”background-color: #f2f2f2; padding: 20px;”>
 <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>
Example 3: Styling Links with Inline CSS
<!DOCTYPE html>
<html lang=”en”>
<head>
 <meta charset=”UTF-8″>
 <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>
 <br><br>
 <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 judiciously, considering the maintainability and scalability of larger projects.
Also Read:   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’s 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.
Write CSS Code:
- 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:
<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, like this:
<style>
 /* Your CSS code here */
 body {
 font-family: Arial, sans-serif;
 }
</style>
Save Changes:
Save your HTML file in VS Code.
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 Changes:
-
- 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
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 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.
If you’re 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. And as a loyal reader of this blog, you can use the coupon code “READER” to avail an amazing discount on the course!
For Latest Tech Related Information, Join Our Official Free Telegram Group : PW Skills Telegram Group
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".
