Which HTML tag would you use in a Web page so that it could use the styling information found in an external style file?

Which HTML tag would you use in a Web page so that it could use the styling information found in an external style file?

HTML is the markup language that helps you define the structure of a web page. CSS is the stylesheet language you use to make the structure presentable and nicely laid out.

To make the stylings you implement with CSS reflect in the HTML, you have to find a way to link the CSS to the HTML.

You can do the linking by writing inline CSS, internal CSS, or external CSS.

It is a best practice to keep your CSS separate from your HTML, so this article focuses on how you can link that external CSS to your HTML.

To link your CSS to your HTML, you have to use the link tag with some relevant attributes.

The link tag is a self-closing tag you should put at the head section of your HTML.

To link CSS to HTML with it, this is how you do it:

Place the link tag at the head section of your HTML as shown below:

Link CSS to HTML

The rel Attribute

rel is the relationship between the external file and the current file. For CSS, you use stylesheet. For example, rel="stylesheet".

The type Attribute

type is the type of the document you are linking to the HTML. For CSS, it is text/css. For example type="text/css".

The href Attribute

href stands for “hypertext reference”. You use it to specify the location of the CSS file and the file name. It is a clickable link, so you can also hold CTRL and click it to view the CSS file.

For example, href="styles.css" if the CSS file is located in the same folder as the HTML file. Or href="folder/styles.css" if the CSS file is located on another folder.

Final Thoughts

This article showed you how to properly link an external CSS file to HTML with the link tag and the necessary attributes.

We also took a look at what each of the attributes means, so you don’t just use them without knowing how they work.

Keep coding…



Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

CSS is a design language that improves the aesthetic of a website by making simple or uninteresting text more appealing. CSS is responsible for visual structure and layout, whereas HTML is primarily responsible for textual information. HTML is a markup language, whereas CSS is a style sheet language. It is responsible for describing the presentation of an HTML or XML document (including XML dialects such as SVG, MathML or XHTML). CSS specifies how elements should appear on a screen, on paper, in speech, or in other forms of media.

Add_CSS_to_HTML.

CSS may be added to HTML in three different ways. To style a single HTML element on the page, use Inline CSS in a style attribute. By adding CSS to the head section of our HTML document, we can embed an internal stylesheet. We can also connect to an external stylesheet that separates our CSS from our HTML. 

Now let’s discuss all the methods one by one.

Inline CSS

Style rules can be applied to individual HTML elements using inline CSS. Inlining CSS is the process of embedding CSS into an HTML file rather than using an external CSS file. Because inline CSS only allows us to apply a single style to one HTML element, it's only useful for establishing unique properties. Inline CSS is advantageous since it decreases the number of files that the browser must download before the web page can be shown. The browser loads an HTML file first, then downloads the CSS file when using external CSS. We only need to download one HTML file instead of two using inline CSS, which speeds up the process.

The inline styles will only affect the HTML element to which the style attribute with CSS-property values is applied. The first paragraph in the example below will be styled in red with a 20px font size. The properties apply just to the first line of the code, not the full code.

Example 1:

This is our first HTML code.

 

This is our second HTML code

Example 2:

This is HTML code

This is a HTML code with inline CSS.

This is some text content with CSS styling.

However, using inline styles is generally thought to be a bad idea. Because style rules are inserted directly into the HTML tag, the presentation of the document becomes intermingled with the content of the document, making the code difficult to maintain and defeating the purpose of CSS.

Internal CSS

Internal CSS is one of the most popular CSS forms for updating, customizing, and modifying a single web page's unique styles. You can use the internal CSS by integrating the   

  

  

The internal CSS is applied on this heading, so it will show some unique appearance.

  

This paragraph will not be affected as internal CSS is not applied on this.

  

  

  

Example 2:

Internal CSS Demo

The default text color for the page is black. However, we can change the color of every paragraph element on the page using internal CSS.

Using internal CSS, we only need to write one rule set to change the color of every paragraph elemnet.

With inline CSS, we’d have to add a style attribute to every single paragraph in my HTML.

External CSS

External CSS is one of the most often used CSS forms for updating, styling, and adjusting the different styles in a large number of HTML web pages at the same time. There are two ways to include an external style sheet in an HTML document. One method is to use the tag in the HTML document head. Another option is to use a combination of external CSS functions and integrated CSS. 

One of the distinguishing characteristics of external CSS is that it can be written in any text editor, but it must always be saved with the.css extension and must not contain any HTML elements.

We use the external style sheet when we need to make changes to multiple pages. It's ideal for this circumstance because it allows us to change the appearance of the entire website with just one file change. It comes in handy while working on large projects or several HTML web pages.

We must define the filename of the CSS sheet with the "mystyle.css" extension within the element within the section of the HTML page to use external CSS:

This is a heading

This is a paragraph.

mystyle.css

In this file, we can write our complete CSS code for styling the HTML web page.

Example 1:

body {

    background-color:powderblue;

}

.main {

    text-align:center;   

}

.sideway {

    color:#009900;

    font-size:40px;

    font-weight:bold;

}

#change1 {

    font-style:bold;

    font-size:25px;

}

Example 2:

body {  

    background-color: lightblue;  

}  

h2 {  

    color: navy;  

    margin-left: 20px;  

}   

Use of Different Types of CSS

Inline CSS is advantageous since it decreases the number of files that the browser must download before the web page can be shown. The browser loads an HTML file first, then downloads the CSS file when using external CSS. We only need to download one HTML file instead of two using inline CSS, which speeds up the process. 

Here are a few more advantages of using inline CSS:

  • Lower the HTTP Request: The main advantage of utilizing Inline CSS is that it requires fewer HTTP requests, which implies that the page loads faster than when using External CSS.
  • For Testing Purposes: When working on new projects, many web designers choose to use Inline CSS because it is easier to scroll up in the source rather than changing the source file. Some people use it to debug their websites if they run into a problem that can’t be easily fixed. This can be used in conjunction with CSS's important rule.

Since Internal CSS has a higher priority than Inline CSS in terms of use. There are several benefits, some of which are listed below:

  • Cache Problem: Unless they are hacked to hide from certain browsers, internal styles will be read by all of them. This disables the usage of media=all or @import to hide styles in ancient, clumsy browsers such as IE4 and NN4.
  • Pseudo Elements: Inline styles can't be used to style pseudo-elements or classes. Internal style sheets let us customize the color of an anchor tag's visited, hover, active, and link states.
  • No Additional Downloads: We don't need any additional downloads to get style information, and we have fewer HTTP requests.

When a style is applied to a large number of pages, an external style sheet is perfect. We can modify the look of an entire website by changing one file with an external style sheet. The tag must be used on each page to link to the style sheet. Here are some of its advantages:

  • Full Control of Page Structure: CSS allows us to display our web page in accordance with W3C HTML standards without sacrificing the page's appearance. Google is the most popular search engine and a key traffic source. Because Google places a low value on well-organized web pages, many designers overlook them. However, putting a low value on anything can result in a lot of traffic to a website.
  • Reduced File Size: We can drastically reduce the file size of our pages by adding the text styling in a separate file. Furthermore, compared to simple HTML pages, the content-to-code ratio is much higher, making the page structure easier to read for both programmers and spiders. Instead of using images, we can use CSS to define the visual impact we wish to apply to them. The space we save this way can be utilized for spider-friendly text (i.e., keywords), and we'll also reduce the page's download size.

Properties of CSS

The part about cascading is crucial. Cascading means that styles can inherit and override styles that have been specified previously.

Internal/Embedded CSS has the highest importance, followed by External CSS, which has the lowest priority. On a single page, we can declare many style sheets. If multiple style sheets describe styles for an HTML tag, the order listed below will be used.

  • Any styles defined in the internal and external style sheets are overridden by Inline styles since Inline has the highest precedence.
  • Internal CSS is the second most important option, and it takes precedence over the styles in the external style sheet.
  • External style sheets are given the least amount of importance. If no styles are defined in the inline or internal style sheets, the HTML tags are styled using external style sheet rules.

Customizing Our Website With CSS

Cascading Style Sheets (CSS) is a way to give aesthetic instructions to the back-end code of our website. It makes it simple to change the appearance of our website. We may quickly and easily apply CSS to our website using any of the ways above to match the appearance. Website code is the language that informs our browser exactly how a website should appear and function. HTML (hypertext markup language) is the most widely used coding language. It is a type of code that indicates which elements are available on a webpage. According to HTML, CSS is an HTML extension that specifies particular styling instructions. CSS is used to specify a heading's color or the font in which our text should be written. CSS allows us to personalize the appearance of our website and make stylistic judgments across the board. It guarantees that the appearance of our website is consistent.

Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!

Conclusion

CSS specifies how a page should appear to the browser, which then renders it in that manner. It is used to change the color of text and background on a page, remove the underline from links, and animate images, text, and other HTML elements, among other things, and we can implement all these features on any web page using different types of CSS based on given circumstances. In the above article, we have discussed everything about all types of CSS (inline, internal, external CSS) and its uses with HTML to customize any web page. We hope that this article was able to give you a thorough knowledge of CSS and its uses and how we can use it to develop structure of any web page and style it.

If you are interested in learning more about React JS and other related concepts, you can enroll in Simplilearn’s exclusive Full Stack Web Development Certification Course and accelerate your career as a software developer. The program comprises a variety of software development courses, ranging from the fundamentals to advanced topics. 

Simplilearn also offers free online skill-up courses in several domains, from data science and business analytics to software development, AI, and machine learning. You can take up any of these courses to upgrade your skills and advance your career.

What is an HTML tag to which a style can be applied?

The