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
Related
I am trying to modify the link color inside a <span>. (I know that this is not optimal/conforming, but I am stuck in a situation where I don't have access to the header and also cannot play with the <a> tags.) I tried something like this, which doesn't work
<span style="a {color:#C04040} ">
Try to change in a <span>: This link
</span>
I also tried other variations, like:
<span style="a.color:#C04040">
I admit that I don't understand the syntax of <style> as a tag, as opposed to inside the header. Would appreciate any help, or links to complete documentation.
Thanks!
If you want to apply this rule to all your span tags, you can just place this in the content of your html document. Then all tags inside a span tag will get red with blue background.
<style>
span a { color:red; background-color:blue; }
</style>
If you want to apply this only to a specific span tag, just use a named class like
<style>
span.colorlink a { color:red; background-color:blue; }
</style>
And then you can do <span class='colorlink> for the spans you want colored.
Imagine I have a div with children div and grandchildren divs like this:
<div class='1'>
<div class='2'>
<div class='3'>
<div class='4'>
<p class=''>Username</p>
<p class=''>Description</p>
<p class=''>Views</p>
</div>
</div>
</div>
</div>
Let's say I want to give a class name to the first <p> element so I can apply some CSS to the first <p> element only.
Should I give it a generic class name like 'username' and then select that username using descendant selector like this:
.1 .2 .3 .4 .username {
color: black;
}
Or should I give it a very specific class name like 'profile-page-username' and select it with the class selector like this:
.profile-page-username {
color: black;
}
If I understand it correctly, if I use the first way, I can give class name of 'username' to as many elements as I want and still apply different CSS rules to each one of them because I'm not selecting all elements with 'username' but only the element with 'username' that is children to the previously mentioned elements.
I'm wondering if one way is better/more used/more conventional than the other.
In your example, I would create a specific class name.
Your question falls into the lines of discussion around CSS Scoping. By your example, it looks like you have a specific p that is fairly far down the line of child elements that you want to apply a style to. Whenever I find myself targeting an element so far down where I need to start doing .1 .2 .3 .4, I usually create a separate class for that element. You can still apply a generic style to your p's in your css like below so it will apply to every other p.
p {
color: black;
}
.specificP {
color: green;
}
<div class='1'>
<div class='2'>
<div class='3'>
<div class='4'>
<p class='specificP'>Username</p>
<p class=''>Description</p>
<p class=''>Views</p>
</div>
</div>
</div>
</div>
Why?
Mostly for readability and maintainability. It's a lot easier to ctrl-f on a specific class name than it is to traverse down a tree of child elements to find where your style is applied.
You shouldn't use a class if you want to apply the css only to one element.
Use a individual id instead, like:
<p id="yourID"> username </p>
<p id="yourSecondID"> username </p>
etc...
Classes are commonly used if you want to apply some CSS to multiple HTML elements.
In your case, your CSS would look like:
#yourID{
//Some css
}
#yourSecondID{
//Some more css
}
etc...
if you are going to keep the styling same for the username throughout the website, you should specify it specifically. like so-
HTML File
<div class='1'>
<div class='2'>
<p class='profile-page-username'>Username</p>
<div class='3'>
<div class='4'>
<p class='profile-page-username'>Username</p>
</div>
</div>
</div>
CSS File
// for the first p attribute
.profile-page-username{
color: red; // all elements with this class will have the same styling
}
But if you want to style it differently at different places you should use the former. like so-
HTML File
<div class='1'>
<div class='2'>
<p class='username'>Username</p>
<div class='3'>
<div class='4'>
<p class='username'>Username</p>
</div>
</div>
</div>
CSS File
// for the first p attribute
.1 > .2 > .username{
color: red;
}
// for the second p attribute
.1 > .2 > .3 > .4 > .username{
color: blue;
}
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>
I'm new to css so I have this question:
Having this html document:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
The text property from h1 tag are inherited from the style class, from the h1 style or from both?
Expanding further on what Harry said in the comments there a multiple ways to define 'style' to an element using CSS.
Inline Style - <h1 style="color:blue;">
External Stylesheet
Internal Stylesheet
In the above question you're using an Internal Stylesheet. This meaning you've added <style> tags to your head of the document and then added the styles within there.
There are also several ways to change the style of an element using any of these methods. You can:
Style an object using an ID selector (#) (see example 1)
Style an object using a Class selector (.) (see example 2)
Style an object using the Tag (h1) (see example 3)
Example 1
#title { color:black; }
<h1 id ="title"> This is the title </h1>
In this example you're able to identify the H1 tag using an ID, allowing for that single object to be styled using the hash key.
Example 2
.title {color:black;}
<h1 class="title"> This is the title </h1>
In this example you're able to identify a class of objects or singular objects, you can also define the class to a certain tag {h1.title} so you're identifying that title belongs to the h1 tag and will change the colour black.
Example 3
h1 {color:black;}
<h1 class="title"> This is the title </h1>
In this example you can identify all tags and change them as you please. This will take all h1 tags in the document and make the colour of the writing black regardless if it belongs to a class or not.
Summary Example:
To summarise you can incorporate all three of these techniques to change various objects and to define specific elements to specific styles. So when you use multiple of these techniques it will read all only for the purpose of the operation: so a class selector will look for classes, tag selector will look for a tag etc etc. Look at this JSFiddle
h1 {padding:20px;}
h1 .title {color:green;}
#subtitle {color:red;}
<h1 class="title"> TITLE GOES HERE </h1>
<h1 id="subtitle"> This is a subtitle </h1>
In this example it'll add padding to both elements but only add the color to the element with the specific selector.
I hope this clears things up for you.
The text property from h1 tag are inherited from the style class, from the h1 style or from both?
There isn't a text property in CSS - so none of the above.
The only place that any property on your heading will be inherited from is the body element. In CSS inheritance is when the value of the property is inherit (e.g. font-style: inherit) and it copies the parent from the parent element in the DOM.
The only selectors you have in your stylesheet are type selectors, and the only one that matches the <h1> is the h1 selector, so the rules in that ruleset will apply to the heading.
If you had a class selector that matched the <h1> (which would require it to be a member of that HTML class (via a class attribute), then it would overwrite any rules from the type selector since a class selector is more specific.
I always wondered how can you select an element that is deeply buried in other elements that have classes and id's ?
For example :
<div class="container" id="footer">
<div class="sixteen columns"><span>some text here</span>
If I want to select element then what I would do is write in CSS the following :
.container #footer .sixteen .columns span {
font-weight: bold;
}
Unfortunately it seems that this method is not valid or recognized by browsers.
Let's say that I don't want to give any general styles to 'sixteen columns' class or span itself. I just want to apply very specific styles to this very specific element.
How should I select that span element ?
Given your code:
<div class="container" id="footer">
<div class="sixteen columns"><span>some text here</span>
</div><!-- I've chosen to close the opened div element -->
Your selector cannot work, but it is definitely "recognized by browsers." The problem is that it is not, as you say, 'valid' (for the HTML structure that you have).
The problem is that, in CSS, white-space implies an ancestor-descendant relationship, so:
E F
Selects an element, matching selector F, that is a descendant of selector E; your own selector:
.container #footer .sixteen .columns span
selects a <span> element, within an element of class 'columns', within an element of class 'sixteen', within an element of id="footer" itself within an element of class 'container'; giving HTML:
<element class="container">
<element id="footer">
<element class="sixteen">
<element class="columns">
<span></span>
</element>
</element>
</element>
Which bears no resemblance to your own HTML. As white-space establishes an ancestor-descendant relationship, the corollary is that no white-space implies the same element, which is what you were aiming for, I think. Omitting the white-space, then, gives the following selector:
#footer.container .sixteen.columns span {
/* CSS here */
}
This selector is, probably, overly complex (given that an id uniquely identifies an element1), and could be re-written as simply:
#footer .sixteen.columns span {
/* CSS here */
}
Or even, if you're willing, and able, to sacrifice some specificity:
#footer span {
/* CSS here */
}
Note that a class-name is often used in JavaScript to denote a state, state-change or interaction of some kind; so it's not definitively redundant to combine an id with a class (#footer.container), but if the class is not dynamically added or removed, it probably is redundant and unnecessary. As with all things in web-development, it's worth experimenting to find out what works for you; contemporary browsers are fast enough for the most part, that adding a class-name to the selector isn't going to slow things down substantially, but beware of time-critical use-cases, when it's best to remove everything that's not absolutely necessary.
References:
CSS Selectors (and combinators).
with:
#footer > .sixteen.columns > span
Your selector does not work because you have spaces between selectors which refer to the same element.
e.g. .container #footer
But the space reads: "find an element with the id footer that is a descendant of an element with a class that is container". But you mean: "find an element that has the class container AND the id footer" which you can do by concatenating them without a space:
e.g. .container#footer
See: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
Rearrange your selector like this
#footer.container .sixteen.columns span {
font-weight: bold;
}
<div class="container" id="footer">
<div class="sixteen columns">
<span>some text here</span>
</div>
</div>
#footer span { font-weight: bold; }