HTML (Hypertext Markup Language) is a text-based approach to describing how content contained within an HTML file is structured. This markup tells a web browser how to display text, images, and other forms of multimedia on a webpage.
What Is CSS?
CSS is a language for specifying how documents are presented to users — how they are styled, laid out, etc. CSS is a rule-based language — you define the rules by specifying groups of styles that should be applied to particular elements or groups of elements on your web page. CSS properties have different allowable values, depending on which property is being specified. In our example, we have the color property, which can take various color values. We also have the font-size property. This property can take various size units as a value.
Inserting CSS In HTML File:
CSS defines style declarations and applies them to HTML documents. There are three different ways to link CSS to HTML based on three different types of CSS styles:
- Inline – uses the style attribute inside an HTML element
- Internal – written in the <head> section of an HTML file
- External – links an HTML document to an external CSS file
Inline CSS To Html:
Inline CSS, also called an embedded stylesheet, goes “inside” the HTML. To add inline CSS, use a style attribute inside the opening tag of an HTML element. Inline CSS will override any other CSS targeting the same element. Because it’s the “closest” to the HTML, browsers determine that inline CSS declarations are the most relevant to the HTML element and should be applied.
For this reason, inline CSS is effective for targeting a single element with unique style properties. However, it should be avoided if it’s possible to use internal or external CSS since inline CSS is difficult to maintain and it’s generally considered a better practice to keep your HTML and CSS separate.
Syntax: <element style=”CSS property: value”>
Internal CSS To HTML:
Internal CSS is placed inside an HTML document inside <style> tags in the <head> section of the document. A CSS property and value are still set, but instead of being placed inside a style attribute, it is placed inside brackets and defined by a CSS selector.
Using internal CSS is considered better practice than using inline CSS because it is easier to maintain and results in less code. Internal CSS allows you to style groups of elements at once, rather than having to add the same style attributes to elements over and over again. Also, since internal CSS separates the CSS and HTML into different sections but keeps it in the same document, internal CSS is ideal for simple, one-page websites. All your code is in one file, making it easy to access.
But, if you have a multi-page site and would like to make changes across your site, you’ll have to open up each HTML file representing those pages and add or change the internal CSS in each head section. That’s why it’s better to use external CSS in this case.
Syntax: selector { CSS property: value; }
External CSS To HTML:
External CSS is formatted like internal CSS, but it isn’t wrapped in <style> tags or placed in your HTML file. Instead, it’s placed in a separate file called an external stylesheet. This file ends with the extension “.css.” In the <head> section of your HTML document, you just need to add a link to this external stylesheet using the <link> Element.
To add an external style sheet to a web page we use a <link> tag. This <link> tag should be added on those pages where we want to add CSS and this <link> tag is written inside <head> tag.
There are several uses of the <link> tag and it is very important to define the correct attribute so that we can import the external style sheet in HTML. Several attributes of <link> tag are rel, src, etc.
The external style sheet is saved with the .css extension and the file should not have any HTML elements.
You Might Also Interested In Reading, How To Use HTML Text Formating And Styles?
