HTML is the starting point when building a website. However, controlling how the elements are laid out requires CSS. Cascading Style Sheet describes how a page should be presented in the browser and is rendered accordingly. It saves time by managing multiple web page layouts simultaneously and speeds up your web pages.
If you’re ready to reap the benefits of CSS and gain more control over how your website looks, keep reading for a comprehensive guide on how to add CSS to HTML.
Benefits of CSS
CSS is used to format the design of a webpage. Using CSS, you’re able to control a wide range of stylistic aspects, including:
- Fonts
- Colors
- Text size
- Spacing between elements
- Elements layout and positioning
- Background colors and images
- Animation
- Displays for different devices and screen sizes
CSS is not only concerned with the look of your website. It offers a whole host of other benefits, including:
- Faster loading speed
- Faster development time thanks to style sheet cascading and normalized formatting
- Cross-device compatibility
- Easy to make changes
How to Add CSS to HTML
Adding CSS to HTML can be done in the following three ways:
- Inline CSS: This method uses a style attribute to style one HTML element on the page.
- Internal CSS: You can embed an internal stylesheet by inserting CSS into the HTML document head section.
- External CSS: This style links to an external stylesheet containing all your CSS settings.
Inline CSS
Inline CSS is also known as an “Embedded stylesheet” and will override other CSS types targeting the same elements. As inline CSS is the closest to HTML, browsers consider the inline CSS statement to be the most applicable to the HTML element and, therefore, it takes priority over general settings.
This is why incline CSS is practical for targeting sole elements with distinctive style properties. However, whenever possible, internal or external CSS should be the go-to CSS option.
Note: To override the inline style, include the “!important” keyword next to the CSS rule in other styles.
How to Add Inline CSS
To add inline CSS to HTML, use a style attribute and put it inside the opening tag of the HTML element.
For instance, let’s say you wish to change the color of the words “the keyword” in some text to pink and leave the rest of the text as-is. Here’s how you can do that:
- Wrap “the keyword” in span tags.
- Populate the color property with the pink hex color code (#FFC0CB), and put it inside a style attribute.
- Place everything inside the opening <span> tag.
Your code should look similar to this:
<h2> How to Add CSS to HTML: Inline Example</h2>
<p>I am happy with the default text color for this paragraph. However, I would like <span style=”color: #FFC0CB”> the keyword</span> to be pink, if possible.</p>
Here, the text “the keyword” will be written in pink while the rest remains the default value.
Internal CSS
Internal CSS appears slightly distinct from inline CSS. Instead of the value and property placed within a design attribute, it goes within the brackets and is classified as a “CSS selector.”
This instruction set is enclosed in <style></style> tags in the <head> part of the HTML document.
<!DOCTYPE html>
<html>
<head>
<style>
CSS segment 1 {property: value; }
CSS segment 2 {property: value; }
…
</style>
</head>
Internal CSS is regarded as a superior coding method to inline CSS. It accommodates using design groups of components just once instead of repeatedly adding the same features to elements.
In addition, it splits HTML and CSS into separate sections within the same file. Internal CSS is best for single-page sites. If you’re building a website with several pages and want to make adjustments across the site, you’ll need to open each corresponding HTML file, then add or modify the internal CSS in every <head> section. Alternatively, external CSS would be more efficient in this scenario.
How to Add Internal CSS
Let’s say you wish to replace the text color of the paragraph elements on a page with a red color. In this scenario; here’s how to do that:
- Populate the color property to the red hex code (#FF0000).
- Put it inside a CSS instruction set using the type selector “p.” This changes paragraph text.
- Place everything within the head section of the page.
Your code should look similar to this:
<!DOCTYPE html>
<html>
<head>
<style>
P {
color: #FF0000;
}
</style>
</head>
<body>
<h2> How to Add CSS to HTML: Internal Example</h2>
<p> Blue is the default text floor for the page. </p>
<p> But, I can swap the color of each paragraph component on the page with inline CSS. </p>
External CSS
External CSS is structured like internal CSS. However, it isn’t enclosed in <style> tags or added to your document’s <head> section. Instead, it’s placed in a file on its own. The external CSS can be coded using any text editor and saved with the .CSS extension. It should not include any HTML tags.
The external style sheet is accessed using a pointer to it within the <link> element inside the head section; for example:
<link rel=”stylesheet” type=”text/CSS” rel=”noopener” target=”_blank” href=”myexternalstyles.css”>
External CSS is the most commonly used and respected as the best coding practice for the following reasons:
- It is the most time-saving method since it allows you to make changes throughout your site by modifying the external file’s CSS.
- In addition to being the quickest, it’s great for SEO. Storing your CSS in an external file makes it effortless to read by search engines.
- It allows your visitor’s browser to cache the CSS document and load your site quicker when they return.
How to Add External CSS
Let’s say you want to use external CSS to design a section in HTML. The HTML file would appear similar to this:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/CSS”rel=noopener” target=”_blank” href=” myexternalstyles.css”>
</head>
<body>
<div>
<h1> How to Add CSS to HTML: External Example</h1>
<p> In the external stylesheet, the div is designed to have text color, a background color, a border, and padding.</p>
</div>
</body>
</html>
The myexternalstyles.css file would look like this:
div {
background-color: #FFFFFF;
color: #000000;
border: 3px solid #FF0000;
padding: 5px;
In the browser, this div would have a white background color, with black text inside a 3 pixels solid red border and 5 pixels padding; and the following text:
How to Add CSS to HTML: External Example
In the external stylesheet, the div is designed to have a background color, text color, a border, and padding.
How to Add All Three CSS Types to HTML
You do have the option to add all three CSS styles to one website.
To know how, you must remember that CSS means “Cascading Style Sheets,” and the cascading part is significant. It means styles can receive and overrule other designs that have not been previously stated.
For example, it’s important to remember that the elements added to inline styles will always override the styles described in the <head> part of the file, which in turn override external CSS settings.
The best way to recall how the cascading part in CSS works is: browsers consider the closest CSS style to the HTML to be the most relevant and will apply that definition. This cascading hierarchy is called CSS specificity.
If you’re redesigning your entire site, external stylesheets are best. For example, your redesign includes swapping your font color from navy to black. This change can either be made in the external stylesheet or via the <head> part of the HTML document.
If, for instance you change the head section of the HTML file, then what’s displayed in the browser isn’t quite how you wanted it to look. Then imagine all the font color has changed apart from a small section on your homepage.
Time for code debugging!
You begin going through the body segment of your HTML file and discover a style element defining that small section with inline CSS.
You could remove the style element in this imaginary scenario to resolve the issue. But what if there is a design attribute on all the pages of your website? Finding each one would be frustrating and time-consuming to make sure they don’t clash with the external stylesheet.
To avoid situations like this, remember the CSS specificity rules when adding the different CSS types to your site.
Great CSS Tools for Designers and Web Developers
CSS is one of the essential web technologies. However, it is not technically a framework or programming language as such. As a result, a growing project can turn into an unorganized mess. Fortunately, there are several tools to help make working with CSS easier, and here are some of the best ones:
- Sass: Stands for Stylistically Awesome Style Sheets. It is an established developer tool that is still valuable today. Sass allows you to mimic the web page structure in your style files to make it easier to mentally fit the CSS into the HTML.
- PostCSS: You may enjoy using this tool if you like JavaScript. PostCSS allows you to add and control CSS via JavaScript. It also offers several features and powerful packages for easier workflow with CSS.
- CSS Linters: You could benefit from this tool for more structured-looking CSS code. It ensures your code has no errors or inconsistencies. Good linter programs integrate with code editors and IDEs, which can be configured to run each time you save the source file. They also assist with errors and color previews and offer auto-completion as you code.
Using CSS for Detailed Site Customization
When building or redesigning the look and feel of your website, it’s good to know how to add CSS to HTML for design freedom, coding efficiency, and a great front-end experience.
There are three ways to add CSS to your HTML: inline, internal, or external CSS. Inline CSS applies a unique style to one HTML element, and internal CSS defines the design of one HTML page. External CSS is a separate .CSS file that is accessible by creating a link in the head part of the webpage.
The most important thing to remember as you code is that the inline style will take precedence over other CSS types wanting to change the same elements. Inline CSS is the closest to HTML, and web browsers consider it essential and should be applied.
