Presentation
Normally, CSS is written with a style tag or in an external file. But there are three places you can write your CSS: in a style tag in the head of your page, in the HTML code for a specific element, or as inline styles within that element. While inline styles are considered acceptable sometimes, it’s usually not the best practice.
INLINE STYLE SYNTAX
When you’re using inline styles, they change the way a label appears without having to use selectors. Here’s an HTML page with inline styles:
The style attribute is really much the same as another HTML property. It goes inside the component’s opening tag, just after the label name. The component begins with style, followed by an equals sign, =, and finishes with a long JavaScript string of properties, which contain the estimated quality.
The estimation of the style quality will be done with CSS propertiess estimation sets: “property: estimation;” . You can have the same number of property estimation sets as you need. Not at all like typical CSS linguistic structure, inline styling doesn’t use selectors or curly braces {} . Remember to incorporate semicolon ; after each pair!
The CSS rule below is very similar to the inline style above:
p {
color: blue;
font-size: 46px;
}The standard rule will change every paragraph on the page, just like inline does, except for one small difference. It will affect the entire paragraph it’s written in, not just the word it’s influencing.
Though, at any rate, the component inside the
will be blue with large content no matter what the case, including whether you decide to utilize inline styling or CSS rules.
WHEN TO USE INLINE STYLES
Inline styles can be helpful with certain styles or layouts, but they aren’t typically necessary. Some things you may see an inline style in:
HTML email
More established sites
CMS content (for example WordPress, Drupal)
Dynamic substance (for example HTML made or changed by JavaScript)
One time an email with a big picture was in the inbox, that means it was either a HTML email or it had one large picture attached. You can make your own HTML emails, but they are tricky to do. Modern email clients don’t always render them correctly because there is not a consistent standard for how to display them. This means that most HTML emails will contain style info from external stylesheets (links) embedded inside the message. Some of these styles might be outdated to help more old-fashioned email customers read the message at all.
On some sites, you’ll also see inline styles. This style is often seen on powerful, JavaScript-powered websites. For example, a popular technique to hide an article box on a website is by adding the following inline style: show: none;
DON’T FORGET SEO FRIENDLY FONT STYLES
CSS is intended to be used for styling the data. When inline styles are used, it’s become unclear which data needs to be styled and which data don’t. By isolating the CSS from the HTML, you can have clean and decoded markup, which tells users exactly how important the data is without being cloaked in CSS.
This sentence is written in HTML, with headings and sections that are isolated using
and . This sentence also has explicit text dimensions, line breaks, and colors. However, these aspects only affect the visual introduction. With judicious use of semantic markup, the substance can be changed without touching the style.
It is also possible to abuse HTML tags and cause them to break when CSS styles are applied incorrectly. There are many projects dedicated to taking a closer look at HTML code through a “natural” eye, as opposed to screen bots and web crawlers. For example, the
tag is typically intended for quotes that take up blocks of text, but it can be forced with CSS to make labels appear as heading tags in webpages. A person viewing your website through a program would only see headings, not aware of the content within these bulleted quotations. Screen-impaired users would read them akin to citations, which would be highly confusing for those who are visually impaired. This issue can be recreated with any CSS style or inline styles, though it is worth mentioning here because it may happen more often than you think! Always search for the correct tag first when wanting to use CSS styles.
Practicality, REPEATABILITY, SCALABILITY
Inline styles only affect a particular
or label, so it may be difficult to make any changes. You can improve your inline styles by changing the ones you’ve written in an array of different labels at once. However, this could take a lot more time than is necessary if you use only one set of CSS rules with a style tag or an external CSS file.
To make your site design as dynamic and adaptable as possible, it’s best to place your CSS in its own CSS document. This way, if you decide to link to that file from more than one page, you can reuse the same template in different pages. If you need a uniform look across the entire site, this is the best option. Once an update is made, you’ll only need to apply it once and it will be found on every webpage linked to that CSS document.
CONCLUSION
In some cases, inline styles are necessary. If you’re building a page from scratch, then you shouldn’t use them any more often than necessary. Using a different CSS document is the most reliable and flexible strategy.
