What is CSS?
Cascading Style Sheets (CSS) is a style sheet language that is used to describe the display of a document built in a markup language like HTML. CSS, like HTML and JavaScript, is a foundational technology of the World Wide Web.
See Also: Styling Resources: Learn CSS for Free
What is HTML?
HTML, or HyperText Markup Language, is the standard markup language for texts intended to be displayed in a web browser. It can be aided by technology like Cascading Style Sheets and scripting languages like JavaScrip.
Integrating CSS within HTML
CSS may be introduced to HTML texts in three different ways:
- Inline CSS – when the style property is used within HTML elements.
- Internally, by including a <style> element in the <head> section.
- External CSS – by linking to an external CSS file with a <link> element.
The most frequent method of adding CSS is to maintain the styles in separate CSS files. However, for the sake of this article, we will utilize inline and internal styles because they are easier to illustrate and test.
See Also: Why Digital Marketers Should Learn Basic CSS and HTML
Inline CSS in HTML
CSS is often written in a separate CSS file (with the file extension.css) or in a <style> tag within the <head> tag. However, there is a third option that is equally acceptable. The style attribute of an HTML element is the third place you may write CSS. When CSS is written with the style property, it is referred to as “inline style.” This is not regarded as a great practice in general. However, there are occasions where inline styles are the best (or only) option.
A number of CSS property and value pairs make up the style attribute. A semicolon (;) separates each “property: value” pair, just like in embedded or external style sheets. It must, however, fit on one line, with no line breaks after the semicolon. Refer to the example mentioned below.
<h1 style=”color:blue; font-size:40px;”>This is a heading</h1>
<p style=”color:green; font-size:20px;”>This is a paragraph.</p>
<div style=”color:red; font-size:10px;”>This is some text content.</div>
Using inline styles is generally seen to be a bad idea. Because style rules are put directly in the HTML element, the presentation becomes entangled with the document’s content, making it harder to maintain the code and negating the purpose of using CSS.
See Also: CSS Styles: Inline vs. Internal vs. External
Embedded Style Sheets
Internal style sheets, often known as embedded style sheets, have no influence on the document they are contained in.
The <style> element is used to generate embedded style sheets in the <head> section of an HTML page. In an HTML page, you can declare an unlimited number of <style> elements, but they must exist between the <head> and </head> tags.
Embedded style sheets enable you to create styles for the entire HTML content in a single location. When you use the <style> element to embed style sheet information into an HTML page, this is referred to as embedded style sheets. This is accomplished by putting the style sheet information within <style></style> tags in the document’s head. Refer to the example mentioned below.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>My HTML Document</title>
<style>
body { background-color: red; }
p { color: #fff; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
See Also: How to Override Inline CSS Styles
External Style Sheets
An external style sheet is for cases when the style is applied to many pages of the website.
An external style sheet is a standalone document that contains all of your site’s style rules and can be accessed from any HTML page. External style sheets are the most versatile since they allow you to update only one file to give a new look to an entire website.
There are two methods for attaching external style sheets: linking and importing.
External style sheets are produced in distinct documents that have a .css extension. An external style sheet is nothing but a collection of CSS rules. HTML tags are not permitted. The <link> element, which appears at the head of an HTML page, is used to direct visitors to an external style sheet.
See Also: How To Link CSS To HTML