This question already has answers here:
Closed 11 years ago.
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>
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>
Answered before :)
But in short, they are invalid but many sites add them to the body, especially those built by (bad) Content Management Systems.
This is not valid HTML, according to the spec.
In the DTD, the STYLE element appears like this:
<!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT" -- repeatable head elements -->
Where the head.misc only appears as pard of HEAD or TITLE.
However, as others have noted, many browsers will still parse and use stylesheets that have been defined within the body tags. Your mileage may vary... in particular if you do use a DOCTYPE in your markup.
Related
How can I center one div inside another div?
Thank you!
You have some fundamenatal syntactic issues to face here:
You should stop using div to encase image tags and instead use the figure tag in HTML5.
You should (as commented by Hevlastka) remove the size defined in the <img> tag and have the sizing only defined in CSS.
You have set a max-width without setting a width which can cause issues on IE based browsers.
IE10 and IE11 do not appear to support overriding min-width or max-width values using the initial value.
IE7 doesn't support min-width on input button/submit button/reset button.
max-width doesn't work with images in table cells in IE.
Using Normalize CSS is highly recommended (esp. if you don't want to use javascript).
You should try and get out of the habit of using <style> as soon as possible and instead put your CSS in its own specific file to be called by the HTML file.
Edits to your code that I've used to make it work for me on IE 11 and Edge:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title is REQUIRED in HTML head area</title>
<style>
div {
text-align:center;
}
/*
The picture and the div must be Centered
inside their container!
*/
figure {
border: 1px solid red;
padding:20px;
text-align:center;
display:inline-block;
margin:auto;
}
img {
border: 1px solid black;
width: 100%;
max-width:640px;
height: auto;
margin:auto;
}
</style>
</head>
<body>
<div>
<figure>
<img src="https://image.ibb.co/bE3eVF/my_Picture.jpg">
</figure>
</div>
</body>
</html>
Adding Modernnizr.js is solving the problem.
Add this between your <head> tags.
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
and remove display: table; from your CSS.
I'm reading through "HTML and CSS Design and Build Websites", one of the examples in Chapter 17 is this:
http://www.htmlandcssbook.com/code-samples/chapter-17/example.html
I'm following through the HTML/CSS in the book and it mostly makes sense. What I can't understand is a little nitpick though: using the developer tools from chrome and looking at "Contact" at the bottom right, the 10px margin-top value is shown as going outside the containing section block (of class="contact details"). Why is the top margin of the Contact heading not kept within the section block? Or rather, why is the section block not extended to keep all the content of the heading within? A minimal example:
<!DOCTYPE html>
<html>
<head>
<link href="example.css" type="text/css" rel="stylesheet" />
</head>
<body>
<aside>
<section class="contact-details">
<h2>Contact</h2>
</section>
</aside>
</body>
</html>
The CSS:
section, aside {
display: block;
}
aside {
width: 230px;
border: 1px solid green;
}
aside h2 {
border: 1px solid red;
color: #fe6582;
margin: 50px 0px 50px 0px;
}
I find that if I place a border around section then the problem is resolved (section contains all of the heading, including its margin). Is this a HTML trait or a problem with the developer tools of chrome?
The margin issue is actually a specified behavior.
Read here more about the margin collapsing.
Also read this stackoverflow for a better explanation.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I have just started learning html and css.
While reading a tutorial from a book I saw how to change the styles
I wrote the same code but there is no effect on the page in the browser.
It appears just the same as without the <style> tag.
Here's the code:
<title> Starbuzz Coffee </title>
<style type=”text/css”>
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
Change <style type=”text/css”> to <style type="text/css">.
The key problem here is with your quote. I've just tested using ” which didn't work in my local project.
Your quotation marks are the issue, you need to use " instead of ”
Like this:
<style type="text/css">
Also, lets go to the next level too. Adding styles in the HTML head is ok, but you will find it a lot easier to maintain your HTML and CSS code in the future if you link to a separate stylesheet. To do that, just add the following to your HTML head:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
In this case your stylesheet is called 'mystyle.css' and is located in the same folder as your HTML page...
You can now add all of your CSS goodness into the 'mystyle.css' file like this:
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
Read more about this on W3 Schools.
You can try couple of thing to test
Open a debugger window by pressing F12 and find body tag to see what has overwritten it.
Try inline style on a body tag and see does that make a difference
Change the order of a CSS on your page.
I am getting the following when I inspect an anchor element (Computed Style)
Most of the posts I have seen on the internet (like this) point to incorrect Doctype. To be sure I validated both my HTML5 and CSS3 codes using w3 validators. But no joy
Can some one please explain me why user agent stylesheet is overwriting the site stylesheets ?
My source code is
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link href="/css/basic.css" rel="stylesheet">
<title>Test</title>
</head>
<body>
<footer>
<ul class="foot-link-ul">
<li class="foot-link-box-li">Compare Plans</li>
</ul>
</footer>
</body>
</html>
And the CSS
footer {
width: 986px;
margin: 0px auto;
padding: 50px 7px 5px 7px;
font: 13px Arial, Helvetica, sans-serif;
overflow: auto;
color: #FFF;
}
Anchors have a higher priority than any of the container elements (divs, spans, etc...), say .nav is your container element and you've set the color to gray, the color of anchors would still be the default blueish, since it has a higher priority. To overcome this, you need to define for example .nav a or even the sitewide a in your basic.css file.
EDIT
According to your new edit, you need to define footer a.
The user agent style sheet targets the <a> which would obviously overwrite any inherited style, so you have to target the <a> if you want to overwrite the user agent styles.
I am learning HTML and CSS, and I want to create a fixed-width page which has a silver background color. I also want the background color outside of the fixed-width area to be black.
The problem is that there is a small black gap above the fixed-width area (above the heading), and I would like to remove this black gap, so that it's replaced with silver color.
How do I solve this?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Homepage</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main">
<h1>Welcome to my homepage.</h1>
<p>This is just a test.</p>
</div>
</body>
</html>
CSS:
body {background-color: #000000;}
.main {
width: 640px;
margin: 0 auto;
background-color: silver;
}
try
body {padding:0; margin:0; background-color:#000; }
try:
border-width:0px;
border and margin are two different things... here's a nice picture for you:
http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/
You can do below:
body {margin:0; padding: 0; background-color:#000; }
.main {
position: absolute;
width: 640px;
left: 50%;
margin-left: -320px;
background-color: silver;
}
problems like this one will be quite common when writing HTML & CSS, it is a hotly debated subject but I would strongly recommend you use a reset style sheet.
All browsers have their own set of rules as to how elements are displayed on a webpage, a reset style sheet goes a very long way to minimise the effect of browser specific style meaning your code reads much more logically and it easier to spot what is going on especially when you have a problem. That said, even with a reset style sheet you should always cross browser check a project as there are always quirks.
Here is one of the most widely used reset style sheets.
http://meyerweb.com/eric/tools/css/reset/
Just paste this above your website CSS on your style.css sheet or create a new stylesheet called reset.css and reference it BEFORE your site.css.