Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Example of embedded CSS
Embedded CSS allows you to place CSS rules directly within an HTML document using the <style> element. This tag is placed inside the <head> section, and the rules defined will apply to all elements in the document.
Syntax
<head>
<style type="text/css" media="all">
/* CSS rules go here */
selector {
property: value;
}
</style>
</head>
Example
Here's a complete HTML document with embedded CSS that styles the background color and heading:
<!DOCTYPE html>
<html>
<head>
<style media="all">
body {
background-color: orange;
font-family: Arial, sans-serif;
}
h1 {
color: yellow;
margin-left: 30px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
p {
color: white;
margin-left: 30px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph with custom styling.</p>
</body>
</html>
Style Element Attributes
| Attribute | Value | Description |
|---|---|---|
type |
text/css | Specifies the style sheet language as a content-type (MIME type). This is a required attribute. |
media |
screen, tty, tv, projection, handheld, print, braille, aural, all | Specifies the device the document will be displayed on. The default value is "all". This is an optional attribute. |
Key Benefits
Embedded CSS is useful when you need to apply styles to a single HTML document without creating a separate CSS file. It keeps all styling within the document and loads faster than external stylesheets for small projects.
Conclusion
Embedded CSS provides a convenient way to style HTML elements within a single document. Use the <style> tag in the <head> section to define your CSS rules that will apply to the entire page.
Updated on: 2026-03-15T23:18:59+05:30
6K+ Views
Advertisements