I got the page (can control the content) which can only run html (not javascript) like this:
<style>
h1 { color:red }
</style>
<object data=something.html ></object>
in something.html, it contains:
<h1>
simple example
</h1>
and the css not work in this case, I expect the simple example to be red, it still black. Is there possibly any way that my css affect the rendered html source? (can replace object tag with any tag)
Try adding
<style>
h1 { color:red }
</style>
in something.html
Hope it is the way you looking for .
You can try this.
<style>
h1 { color:red !important }
</style>
<h1>
simple example
</h1>
Related
I don't want to link a separate CSS stylesheet. Is there a way to have CSS and HTML in one file?
I am a beginner developer and I just started web dev. I want to have everything in one file so I can transfer it easily without having multiple files.
Yes, there is!
In HTML, there is a tag, which you can put your CSS code into. This is known as internal CSS because it is in the HTML file itself. The tag goes in the tag. So any CSS you have from, you can directly paste in into the style tag and it will render it.
For example:
<head>
<style>
p {
color:red;
}
</style>
</head>
Another option is to style every tag separately. I would recommend doing this for EVERY SINGLE tag, but when you only have to style one thing, this is really useful. Basically, you can do this by taking any tag and adding a style="" into it.
For example, lets style a p tag. It would look something like this:<p style="font-size:sans-serif; ">. And you can add any styling in the quotations.
I, personally like to have my CSS in one file because, it helps with easy transfer of files and you can easily look back change the CSS, which looking at your HTML.
you can use internal css and inline css
Internal CSS
An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS
An inline CSS uses the style attribute of an HTML element.
<h1 style="color:blue;">A Blue Heading</h1>
I have this title in my header section:
<header>
<div class="container">
<div>
<h1>Salon <span class="test">Le Zen</span></h1>
</div>
In my css file, I have this:
.test{
color:aqua
}
This class work for div tags in my body section of my HTML file, but for my title (within the same HTML file)... nothing! :(
Thanks for helping ;)
You might try to use a selector with a higher specifity, like
h1 > span.test { color:aqua }
or even
.container h1 > span.test { color:aqua }
It works herehttps://jsfiddle.net/z8xf56u4/
Check your spelling that might be it.
If it is not you can copy both files here and I will check if there is a problem
i am a beginner in html and css could anyone please tell me the difference between these 2 codes , i am getting the same result in both of them. i mean is there any difference between putting classes in div tag & putting them directly in h1 tag.
CODE 1
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:white;
}
.box {
height:55px;
weight:55px;
border:3px;
border-raduis:5px;
background-color:#000000;
}
</style>
</head>
<body>
<div class='box'>
<h1>
main text
</h1>
</div>
</body>
<html>
CODE 2
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:white;
}
.box {
height:55px;
weight:55px;
border:3px;
border-raduis:5px;
background-color:#000000;
}
</style>
</head>
<body>
<h1 class='box'>
main text
</h1>
</body>
<html>
in both codes i get the same main text inside the box so does it mean that class in div tag is doing the same thing what class in h1 tag is doing?
does it mean that class in div tag is doing the same thing what class
in h1 tag is doing?
In this case yes, but not necessarily. The second example is better. If you want to make sure you are only applying styles to the heading, apply it to the heading, not the parent element (the div in this case). For instance, what if the div contained a P element as well? In the first example, the H1 and P elements would have a red background since the parent block-level element has a red background. In the second example, only the H1 element would have a red background.
On more complicated projects, like an existing website, there will often be existing stylesheets that you wish to override. Always apply styles to the closest element, or the exact element you wish to style. Also browsers have built in styles for common elements like headings, tables etc. Try using no CSS whatsoever and view the difference between H1 and P elements. Different browsers will apply their own styles, so a common practice is to apply a set of styles to "reset" or override the browser styles. (Another example is making a page with red background for HTML and black for BODY. Look at the browser-defined margins.)
Finally, another approach to only control the H1 element if it is inside a DIV with a class of "box" would be this CSS:
.box h1 {
height:55px;
weight:55px;
border:3px;
border-raduis:5px;
background-color:#000000;
}
the output is both codes are the same.
but there is no technical difference just the second code is using extra div
I try to write some css code. Unfortunately I can't change the html code
, only the style part. In my project I have the style in a css file.
Here is some code:
<!DOCTYPE html>
<html>
<head>
<style>
h1.my_class {
visibility: visible !important;
}
</style>
</head>
<body>
<h1 class="my_class" hidden>This is a heading</h1>
</body>
</html>
Can I override the "hidden" that's written in the html code with my css code. What is already written doesn't change anything.
Use display:block instead of visibility. Please see the below code
h1.my_class {
display:block;
}
<h1 class="my_class" hidden>This is a heading</h1>
h1.my_class {
display: inline;
}
Try this instead of what you've written, it should work.
I wonder why the element is hidden in HTML if it's supposed to be shown with CSS anyway? Of course the HTML markup might be something that comes from another source and you have no control over it.
So if you just change you're CSS to this:
h1.my_class {
display: block;
}
That would do it, no need to use !important here either. Here's a fiddle if you want to experiment with it: https://jsfiddle.net/27q7d157/
Well I tried your ideas. I can use
display: block
or
display: inline
but I must use
visibility: visible
too.
For just a text or image just the "display" is good. But for more like a hidden span inside a hidden div I have to use also
visibility:visible
I'm currently stuck at a probably very trivial problem:
I have a simple HTML/CSS page with a text:
<head></head>
<body>
This is a Text about Foobar.
</body>
How is it possible to assign a CSS-class/id to the word Text without breaking the format? Let's say I want to add the class .yellow to it, which displays the text with a yellow background.
I think I got something blocking my mind cause it can't be that difficult... But all I can google (mostly trivial tutorials) uses CSS just on usual HTML-elements like <p> or <b> which would break my format.
I think you are missing out on <span> tag.
Try this out:
<head></head>
<body>
This is a <span class="yellow">Text</span> about Foobar.
</body>
And in CSS:
.yellow{
color:yellow;
}
Use an inline element. Span is purpose build for that. Alternately, if you wish to have semantic meaning behind your highlighted section, you can re-style <em> or <strong> with something like:
strong.highlight{
font-weight:normal;
font-style:normal;
background:yellow;
}
You just need to wrap the section in a span like:
<span>This is a <span class='yellow'>Text</span> about Foobar.</span>
See a working example here http://jsfiddle.net/dZZfB/
Hope that helps
The HTML for Example:
<center><span class="t1">Test1</span></center>
The CSS:
<style type="text/css">
.t1 {
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
}
</style>