- 3 years ago
- Shahzad Gujjar
- 2539 Views
-
3
You’ll learn how to apply style rules to HTML elements in this article.
Styling HTML Elements
When it comes to web page presentation, HTML is very limited. It was designed with the aim of being a simple way of presenting the information. CSS (Cascading Style Sheets) was created by the World Wide Web Consortium (W3C) in December 1996 to make it easier to style HTML elements.
Size and typeface for fonts, colors for text and backgrounds, alignment of text and images, amount of space between elements, border and outlines for elements, and a variety of other styling properties are all made much easier with CSS.
Adding Styles to HTML Elements
Style information can be attached as a separate document or embedded into the HTML document. The three methods for adding styling information to an HTML document are as follows.
Inline styles —in the HTML start tag using the style attribute to create inline styles.
Embedded style — is achieved by including the <style> element in the document’s head section.
External style sheet — The <link> element is used to point to an external CSS file.
We’ll go over each of these different kinds of style sheets one by one in this tutorial.
NOTE: External styling sheets have the lowest priority, and inline styles have the highest. It means that if you specify styles for your paragraphs in both embedded and external style sheets, the embedded style sheet’s contradictory style rules will take precedence over the external style sheet.
Inline Styles
By applying the CSS rules directly into the start tag, inline styles are used to apply the special style rules to an element. The style attribute may be used to add it to an element.
A series of CSS property and value pairs are included in the style attribute. A semicolon (;) separates each property: value pair, just as you would in an embedded or external style sheet. However, it must all fit on one line, with no line breaks after the semicolon.
The following example shows how to change the text’s colour and font size:
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:18px;">This is a paragraph.</p>
<div style="color:green; font-size:18px;">This is some text.</div>
Using inline styles is usually thought to be a bad idea. Because style rules are embedded directly within the HTML tag, the presentation is mingled with the document’s content, it makes updating and maintaining a website extremely difficult.
Please see the CSS tutorial section for more information on the different CSS properties.
NOTE: Inline styles must no longer be used to style pseudo-elements and pseudo-classes. As a result, you should avoid using style attributes in your markup. The recommended method for adding style information to an HTML document is to use an external style sheet.
Embedded Style Sheets
Internal style sheets or embedded style sheets, only affect the document in which they are embedded.
The <style> tag in an HTML document’s head section is used to determine embedded style sheets. Within the <head> section, you can specify any number of <style> elements.
The example below shows how style rules are embedded inside a web page.
<head>
<style>
body { background-color: YellowGreen; }
h1 { color: blue; }
p { color: red; }
</style>
</head>
External Style Sheets
When a style is applied to a large number of pages, an external style sheet is perfect.
An external style sheet is a separate document that contains all of the style rules and can be linked from any HTML document on your site. External style sheets are the most useful because they allow you to update only one file to change the look of an entire website.
External style sheets can be attached in two ways: linking and importing:
Linking External Style Sheets
The <link> tag may be used to link an external style sheet to an HTML document.
As seen here, the <link> tag is placed within the <head> section:
<head>
<link rel="stylesheet" href="css/style.css">
</head>
Importing External Style Sheets
Another way to load an external style sheet is to use the @import rule. The @import declaration tells the browser to load and use the styles from an external style sheet.
It can be used in two ways. The simplest method is to include it in your <head> section’s <style> element. Other CSS rules may still be included in the <style> element, so keep that in mind.
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>
Similarly, the @import rule may be used to import a style sheet into another style sheet.
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
NOTE: All @import rules must appear at the very beginning of the style sheet. Any style rules specified in the style sheet override any rules in the imported style sheets that are in conflict. Because the @import rule can cause performance problems, you should avoid importing style sheets in general.
- 3 years ago
- Shahzad Gujjar
- 2539 Views
-
3