I want to hide a header text from the website.
because the same element "h2" has been used in more than one page, i can't apply a "display:none" to it.
I have tried it. The result is that it will remove other page's header too.
is there a way to apply CSS so that it only hides when the header text contains specific words?
i will be appreciate for any help i may get here
If I understand correctly, you can hide the header by removing the html on the specific page or with inline css, only on the page where you want to hide it ofcourse.
<header style="display: none;"></header>
Edit: If you only have access to css (not the the html or js) you can't achieve this unless the element has unique parents, attributes or something. You can find a list of css selectors here.
There is no way in CSS to select anything by its content currently. You can only select elements based on their ID, class, other attributes, specific ancestors, specific previous siblings, or their serial number among their siblings. So if you wand special styling for a specific element and you control the markup, the easiest way is to set this element a class or ID, as suggested above.
In your H2 tag that you want to hide, you can apply a class.
<html>
<head>
<style>
.hide-me { display: none; }
</style>
</head>
<body>
<h2>First header</h2>
<h2 class="hide-me">Your header</h2>
</body>
</html>
It's better to move the tag into a CSS file, but this will accomplish what you want.
You need to just add a id to your specific header and apply style to it.
CSS 101.
<head>
<style> //Internal CSS
#hide {
display: none;
}
</style>
</head>
<body>
<h2 id="hide"> Hello World </h2>
<h2> ... </h2>
<h2> ... </h2>
</body>
If you want to apply the same style from an external file copy the style inside the tag and paste it onto your style.css document.
The last and least used method is to use inline CSS :
<h2 style="display: none"> ... </h2>
More reference here : https://developer.mozilla.org/en-US/docs/Web/CSS/display
If you want to use the same style in more than one place use 'class' instead of id.
<head>
<style> //Internal CSS
.hide {
display: none;
}
</style>
</head>
<body>
<h2 class="hide"> Hello World </h2>
<h2> ... </h2>
<h2 class="hide"> Lorem Ipsum </h2>
</body>
Related
I'd like to have an html file that organizes certain files scattered throughout my hard drive. But after saving file, my text i.e "Indian" got underlined. My code is
<a href="file:///G:\work files\project\indian.html" target="_blank">
<div class="button-1">
Indian
</div>
</a>
My question: is there any rule or tag in css or html to remove that underscore?
I'd keep my <div> under <a>, so why text contained in <div> got underlined
Add you must use css to change the way your links look like. Use a selector ("a") and set the text-decoration property to none:
<html>
<head>
<title>TITLE</title>
<style>
div a {
text-decoration: none;
}
</style>
</head>
<body>
<h1>PAGE CONTENT</h1>
<div>
Link here
</div>
</body>
</html>
I'm trying to write some CSS that might take the page title (defined by a h1 element's content) and stick that content into every element with the class "DocTitle". I'm limited to using CSS and HTML.
Suggestions?
<head>
<style>
.DocTitle {
content: element(runningheader);
.pagetitle h1 {
position: running(runningheader);
}
</style>
</head>
<body>
<div class="DocTitle"></div>
<h1 class="pagetitle">This is the page title</h1>
<span class="DocTitle">This should be replaced</span>
</body>
Based on research, I would have thought this might have worked, but I think it only works if you use page at-rules, and I don't think I can apply content to a class in an at-rule. I'm not 100% on that though, because I'm not really sure what I can and cannot do in an at-rule. For reference, this is for use in generating print media.
I am styling a wordpress child-theme and the code below is what I am dealing with. each div is within the previous. It ends with a div then a h2. the last two our my additions to the code. I want to style the text in the h2 tag. when I use a id or class and go into the style sheet and type
#tag {
**Styles i want here**
}
or do it as a class, it wont register. How do I format it? I left the div and h2 without an id or class because idk how to format it like I said
<head>
<body>
<div clas="main-container">
<div id="page">
<div class="content">
<aside class="sidebar c-4-12">
<div id="sidebars">
<div class="sidebar_list">
<div>
<h2>TEXT HERE I WANT TO STYLE</h2>
ID of element should be unique. And because it's unique, you just have a CSS codes like below:
#your-id {
// Your css codes
}
It should work, but we should not use ID for styling element, class name instead.
In your case, your codes should be something like:
.content h2 {
// your css codes
}
Somehow, your h2 tag have a styling with higher priority. Then you can use !important in each of properties. But it's not a best practice for us.
.content h2 {
color: #fff !important; //Example code
}
By the way, I see wrong syntax in your code: clas="main-container", please correct class attribute
Thanks
I am having a really odd situation here. I have spent the last 7 hours researching why I cannot get display: inline; to work at all, unless it's on my main page. Nothing seems to be helping.
Here is the relevant coding.
<!DOCTYPE html>
<html>
<head>
<title>Contact Info</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="name">
<p>*****<p>
Go Back
</div>
<div class="contact">
<p>
<span style="color:#000000">By Phone:</span>
**********
</p>
<p>
<span style="color:#000000">By Email:</span>
****#****.ca
</p>
<p>
<span style="color:#000000">By Mail:</span>
<span style="color:#3300cc">***************</span>
</p>
</div>
</body>
And here is the CSS.
.name {
display: inline;
}
The result is the two items, (The name "****" and the "Go Back" link), appear one on top of each other. I have tried making it a list, but that had no effect. I tried making them both links, but that had no effect. display: inline-block; also has no effect. Nothing I do has any effect on the div class name. I tried changing the name of the div class several times no effect.
The problem here is the the <p> tag is also a block level element. One solution would be to add a style such that a <p> within the .name div is also inline
.name, .name p {display: inline;}
See https://jsfiddle.net/t0z2p9bn/
It would be better to change your html such that the stars are not contained within a <p> tag
<div class ="name">
*****
Go Back
</div>
See https://jsfiddle.net/t0z2p9bn/1/
divs should not be used for inline elements. Did you mean to use a span?
There is a typo - it shouldn't make a difference, but there's an unneeded space after "class" here:
<div class ="name">
The following is my code.
<!DOCTYPE html>
<html lang="en-UK">
<head>
<meta charset="utf-8">
<title>Test Webpage</title>
</head>
<body>
<h1>This is the Heading of the webpage.</h1>
.mainpara {background-color: #d3e5f2;}
<div class="mainpara">
<h3>And it will be the <strong>heading 2</strong>, main content body.</h3>
<p>This is another body, composed of plain text. It's defined internally as a paragraph. Some style will be applied to this and the above heading 2 text by CSS applications.</p>
</div>
<h6>Note that this webpage designing enthusiasm was generated out of necessity for edition of the theme at Japanaddicts, a website of <strong>cool people</strong> specialising in <em>Japanaddicting</em> others.
<p style="color: #f60; font-size: 15px;">This is a line now. Yes another one. However, an inline CSS has been applied to it. This particular paragraph has a different style. It's troublesome, this inline CSS but it's experimental.</p>
</body>
</html>
As you can see, there's a "mainpara" division. How do I specifically apply styling to it? I tried .mainpara {background-color: #d3e5f2;}, as you can see. I also tried putting it above the class.
You need to put CSS in a stylesheet, not as free text in the middle of your HTML.
Either use a style element or (preferably) put your CSS in an external file and reference it with a link element (both of which would go in the head, not the body).
There are examples of both in the specification
<style>
.mainpara {background-color: #d3e5f2;}
</style>
you can not write css code in html page without using style tag
<!DOCTYPE html>
<html lang="en-UK">
<head>
<meta charset="utf-8">
<title>Test Webpage</title>
<style type="text/css">
<!-- ALL STYLES SHOULD BE DEFINED HERE OR MOVED INTO A SEPERATE STYLE SHEET FILE THEN IMPORTED -->
.mainpara {
background-color: #d3e5f2;
}
<!-- Changes color and font size for all p tags on page -->
p {
color: #f60;
font-size: 15px;
}
<!-- Use an id for specific p tag -->
#customParaStyleId {
color: #f60;
font-size: 15px;
}
<!-- Use a class when you plan to apply it to many p tags on the same or additional pages -->
.custParaStyleClass {
color: #f60;
font-size: 15px;
}
</style>
</head>
<body>
<h1>This is the Heading of the webpage.</h1>
<!-- CLASSES ARE USED TO REPEAT STYLES ACROSS SITES -->
<div class="mainpara">
<h3>And it will be the <strong>heading 2</strong>, main content body.</h3>
<p>This is another body, composed of plain text. It's defined internally as a paragraph. Some style will be applied to this and the above heading 2 text by CSS applications.</p>
</div>
<h6>Note that this webpage designing enthusiasm was generated out of necessity for edition of the theme at Japanaddicts, a website of <strong>cool people</strong> specialising in <em>Japanaddicting</em> others.
<!-- USING ID AS EXAMPLE TO TARGET SPECIFIC SINGLE TAG -->
<p id="customParaStyleId">This is a line now. Yes another one. However, an inline CSS has been applied to it. This particular paragraph has a different style. It's troublesome, this inline CSS but it's experimental.</p>
</body>
</html>
CSS should be separated from the body of your HTML Code. It can be placed in either a separate style sheet that you import/include or it can appear between a <style type="text/css"><!-- YOUR STYLES HERE--></style> tags.
TIP:
Often I begin designing and manipulating styles in the head before separating them out into a style sheet. This allows me to focus on the design without having to worry about whether I attached the style sheet properly or not.
Once I finish the page I then move the working styles to a separate sheet to provide re-usable styles across the entire site.
<style>
.mainpara {background-color: #d3e5f2;}
</style>
If you have a stylesheet file or style.css you can just insert:
.mainpara {background-color: #d3e5f2;}
inside of the style.css file