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
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 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>
I'd like to make all div tags invisible except for the one I mark active in html. Below is an extract from my page:
<div id="container">
<div id="1">
invisible
<div>invisible</div>
<div>invisible</div>
</div>
<div id="2" class="active">
visible
<div>visible</div>
<div>visible</div>
</div>
..or via javascript dom:
document.getElementById("2").classList.add('active');
The expected behavior is that just changing the class will render all "active" classes visible and all unmarked classes invisible at all times.
My first attempt, before adding the parent container and selecting with it,
<style type="text/css">
div { display:none; }
div.active { display:block; }
</style>
did not work. It made all divs invisible.
This second attempt, accurately selecting what I really wanted to select, works fine:
<style type="text/css">
div#container>div.active { display:none; }
div#container>div { display:block; }
</style>
Is this the right way to override a default style?
You can use the :not(selector) selector. Reference: w3schools.
Just add to every div yourChoice + active classes and when you want them to disappear, remove the yourChoice class. Then with the :not(.active) { display: none } they are all gone.
Here's a codepen https://codepen.io/sebaLinares/pen/EddNbQ
Hope it's useful
The HTML code
<!DOCTYPE html>
<html>
<head>
<title>Testing Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 class="hidden">Hello World</h1>
</body>
</html>
The CSS code
.shown {
display: hidden;
}
When this code is run the heading is still displayed. Why is this happening. I thought the display value of hidden would hid the element from the normal flow of the page.
hidden is not a valid value for display, you are after none. Also, your class name is incorrect, it should be .hidden
.hidden{
display: none;
}
Also, there is another property called visibility that also hides content with visibility: hidden. The difference is display makes it appear as the element has been removed completely from the page, whereas visibility makes the content disappear, but the space the element occupies is still respected.
Actually you have messed up the values of two different CSS attributes i.e. visibility and display.
display
.class_name
{
display:none;
}
Setting the display as none causes the object not to be visible and along with that the space required by the object is not alloted i.e. the invisible object doesn't occupy any space.
visibility
.class_name
{
visibility:hidden;
}
Setting the visibility as hidden causes the object not to be visible but the space required by the object is alloted i.e. it occupies the space it requires although it's not visible.
Reference
you have wrong class try this
<h1 class="shown">Hello World</h1>
and css
.shown {
display: none;
}
Use
.hidden{
display: none;
}
Use
.shown {
display: none;
}
or
.shown {
visibility: hidden;
}
First of all your css tag name is mismatching to your HTML code. And your CSS is wrong as well.
You could either write display: none or visibility: hidden.
i am using a definitive style for my tags. now there is one tag that i do not wish to appear that way. how do i do it?
Give that one tag an ID, and then make a style for that specific ID. It will override the style you set for the "a" tags.
First, figure out the class or id of the element you want to change the style of using tools like firebug. Once you have found its class or id, search for it in the style sheet and modify the style as you like. If it still does not work, try appending the !important to your style, for example:
.myelement
{
color: #ff0000 !important;
font-size: 14px !important;
}
The !important will override any pre-defined styles.
You can't always reliably "unstyle" an element. For some style properties setting the value to auto, default or none will work:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<style>
a { background: pink; }
a.normal { background: none; }
</style>
</head>
<body>
<p>link1
<p>link2
<p>link3
</body>
</html>
But not for example color. Replace background in above example by color. It won't work. You'll really need to force the color yourself, e.g. color: blue.