HTML CSS
HTML
CSS - Cascading Style Sheet is used to apply styles for HTML elements. CSS is a style sheet language used to describe the presentation, layout, and formatting of a document, typically written in HTML.
Cascading Style Sheet for HTML
CSS changes the visual properties of HTML elements.
CSS can be applied in three ways inline css, internal css, and external css.
Inline CSS overwrites internal CSS and external CSS if applied at the same time.
Internal CSS overwrites external CSS if applied at the same time.
For priority: inline CSS > internal CSS > external CSS.
(Inline CSS replaces internal CSS and external CSS if applied at the same time.
Internal CSS replaces external CSS if applied at the same time.)
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Inline CSS
Inline CSS involves applying CSS styles directly to individual HTML elements using the style attribute within the element's opening tag.
Example
<!DOCTYPE html>
<html>
<!-- Example: Inline CSS -->
<head>
<title>Inline CSS Example</title>
</head>
<body>
<p>Inline CSS Example</p>
<h1 style="color: #fff;background-color: #505050;font-style:italic;">Hello World.</h1>
<h2 style="color: white;background-color: #707070;font-style:italic;">Hello HTML.</h2>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Internal CSS
Internal CSS, also known as Embedded CSS, defines styles directly within an HTML document, specifically within the <head> section of the page. This method is suitable for applying unique styles to a single web page.
Example
<!DOCTYPE html>
<html>
<!-- Example: Internal CSS -->
<head>
<title>Internal CSS Example</title>
<style>
.c1{
color: white;
background-color: #606060;
font-style:italic;
padding:10px;
}
.c2{
color: white;
background-color: #404040;
padding:20px;
}
</style>
</head>
<body>
<p>Internal CSS Example</p>
<h2 class="c1">Hello World.</h2>
<p class="c2">Hello HTML.</p>
</body>
</html>
Click on the "Try it Now" button to see how it works.
External CSS
External CSS refers to styling rules defined in a separate file with the .css extension and linked to an HTML document. This approach separates presentation (CSS) from structure (HTML), promoting clean code, easy maintenance, and consistent styling across multiple web pages.
Example
<!DOCTYPE html>
<html>
<!-- Example: External CSS -->
<head>
<title>External CSS Example</title>
<link href="externalstyle.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h2>External CSS Example</h2>
<p class="c1">Hello HTML.</p>
<p class="c2">Hello w3context</p>
</body>
</html>
Click on the "Try it Now" button to see how it works.