Did you know you can add CSS vĩ đại HTML without using a separate file? In many cases, it comes in handy. Learn when (and when not) vĩ đại use CSS inline styling.
Inline Styling in HTML
Introduction
Usually, CSS is written in a separate CSS tệp tin (with tệp tin extension .css
) or in a tag inside of the
tag, but there is a third place which is also valid. The third place you can write CSS is inside of an HTML tag, using the
style
attribute. When CSS is written using the style
attribute, it’s called an “inline style”. In general, this is not considered a best practice. However, there are times when inline styles are the right (or only) choice.
Inline Style Syntax
Inline styles look and operate much lượt thích CSS, with a few differences. Inline styles directly affect the tag they are written in, without the use of selectors. Here’s a basic HTML page using inline styles:
DOCTYPE html>
<html>
<head>
<title>Playing with Inline Stylestitle>
head>
<body>
<p style="color:blue;font-size:46px;">
I'm a big, xanh rớt, <strong>strongstrong> paragraph
p>
body>
html>
The p
tag with the inline style attribute is the focus here:
<p style="color: blue; font-size: 46px;">
The style
attribute is just lượt thích any other HTML attribute. It goes inside the element’s beginning tag, right after the tag name. The attribute starts with style
, followed by an equals sign, =
, and then finally uses double quotes, ""
, which contain the value of the attribute.
In our case, the value of the style
attribute will be CSS property-value pairs: "property: value;"
. You can have as many property value pairs as you want. Unlike normal CSS syntax, inline styling does not use selectors or curly braces. Don’t forget vĩ đại include the semicolon ;
after each pair!
Inline styles are not so sánh different from the other ways you can write CSS. For example, the inline style above is almost lượt thích the following CSS rule:
p {
color: blue;
font-size: 46px;
}
The rule above works the same way as our inline style does, except for one thing. This rule will affect every p
on the page, whereas the inline style will affect only the it’s written in.
Cascading works the same way, however, so sánh the element inside the
will be xanh rớt with big text regardless of whether you decide vĩ đại use inline styling or CSS rules.
When vĩ đại Use Inline CSS in HTML
Professional trang web developers bởi not use inline styles often, but there are times when they are important vĩ đại understand or necessary vĩ đại use. Here are a few places you may see inline styles:
- HTML e-mail
- Older websites
- CMS nội dung (e.g. WordPress, Drupal)
- Dynamic nội dung (i.e. HTML created or changed by JavaScript)
Emails often include HTML nội dung. When you receive a fancy looking e-mail, it is either one big image tệp tin or it is an HTML e-mail. You can craft HTML e-mails yourself, but they can be tricky. The HTML viewers in tin nhắn clients are not standardized, and most of them bởi not allow tags. For this reason, HTML e-mail often contain lots of inline styles. Some of the styles included may be archaic, vĩ đại tư vấn older e-mail-viewing clients.
Another time you will see inline styles is on dynamic websites that use JavaScript. Often, JavaScript scripts will add inline styles vĩ đại HTML. For example, a common way vĩ đại hide a dialog box is vĩ đại add the inline style display: none;
.
When Not vĩ đại Use Inline CSS in HTML
As mentioned before, trang web developers bởi not often use inline styles when creating trang web pages, for many reasons. The reasons include “semantic markup”, maintainability, reusability, and scalability.
Semantic Markup
HTML is meant for conveying structured information. CSS is built vĩ đại style that structured information. When inline styles are used, this clear separation between structured information and styling is blurred. By separating the CSS from the HTML, the markup can be semantic, which means that it can convey as much meaning as possible without being muddled by visual effects.
For example, the article you are currently reading is written in HTML, separated into headings and paragraphs
(and the text inside those tags). This article also has specific fonts sizes, line spacing, and colors, but those aspects affect only the visual presentation. By keeping the markup as semantic as possible, the article’s nội dung can be quickly edited without being distracted by aesthetics.
Additionally, it is possible vĩ đại misuse HTML elements by overriding their CSS. There are many programs that interpret HTML without “looking” at it through a human eye, lượt thích screen readers and tìm kiếm engines. For example, the tag is intended vĩ đại contain a block quote, but through CSS, it’s possible vĩ đại make
tags visually appear as headings. A person looking at your trang web through a browser would only see headings. A screen reader for sight impaired individuals, on the other hand, may read your headings as if they were quotations, which could be very confusing for sight impaired people! This problem can be created with any CSS, not just inline styles, but it is worth mentioning here. Always look for the right tag for the job before using CSS.
Maintainability, Reusability and Scalability
Because inline styles only affect the tag they are written in, it can be hard vĩ đại make changes. If you have written the same style đôi mươi times in đôi mươi different You gain the most flexibility and power by putting your CSS in a separate CSS tệp tin. If you As we mentioned, there are two other styles of implementing CSS: internal and external. Internal CSS (or embedded CSS) is added vĩ đại the Sometimes, inline styles are necessary. If you are building a trang web page by hand, however, you should avoid them whenever possible. Using a separate CSS tệp tin is the most powerful and flexible method. 'The Codecademy Team, composed of experienced educators and tech experts, is dedicated vĩ đại making tech skills accessible vĩ đại all. We empower learners worldwide with expert-reviewed nội dung that develops and enhances the technical skills needed vĩ đại advance and succeed in their careers.' tag or a separate CSS tệp tin, you would only need vĩ đại change it in one place.
vĩ đại that CSS tệp tin on more than thở one HTML page, you can reuse the same stylesheet for multiple pages. If you want a consistent style across your whole trang web, this is the way vĩ đại go. When you want vĩ đại make a change, you will only need vĩ đại make the change in one tệp tin, and it will be seen in each linked page.
Other types of CSS
section of an HTML document. It’s useful if you’re only stylizing a single page, and it helps keep everything in a single tệp tin, but it can also affect loading speeds. External CSS is written in its own separate tệp tin, and it’s more popular because it can style multiple pages.
Conclusion
Other resources