Menu
Possible Duplicate:
Declare CSS style outside the “HEAD” element of an “HTML” page ?
I am creating some content that is being used inside a CMS where I do not have access to the header tag. Is there a way to add CSS rules within the <BODY> of the document?
I want to do this ...
.ClassName
{
border: 2px solid red;
margin: 5px;
padding: 5px;
}
I could add the style rules "inline" inside the element but I wanted to avoid this if possible since the CSS rules will be used in many elements.
I want to avoid this ...
<div style="border: 2px solid red; margin: 5px; padding: 5px">content</div>
379
You can add <style> inside body, but you'll get a validation error:
Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)
(This is because it's not allowed according to the specs, see @Oded's answer)
It works just fine in browsers though. Browsers do not care:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<style type="text/css">
.ClassName
{
border: 2px solid red;
margin: 5px;
padding: 5px;
}
</style>
<div class="ClassName">content</div>
</body>
</html>
Yes. You can use a <style> element.
<style type="text/css" scoped>
.redOutline {
border: 2px solid red;
margin: 5px;
padding: 5px;
}
</style>
<div class="redOutline">content</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
