I know that h1 tag is important for SEO, so all my title is H1 (bravo!)
Now, I need to have a title (as the first line of a text ) a little different on some pages.
Usually, I just duplicate h1 as h2 and alternate.
The question: Is it possible to add a class to the title tag... (I have try without success)
You can style a header like this:
h1 { color: red; }
Or like this:
<h1 class="fancy">Fancy</h1>
.fancy { font-family: fantasy; }
If it's not working:
Check you don't have an old stylesheet cached (ctrl-F5 to reload)
Check you don't have any rules overriding your class (inspecting with Firebug or similar is very helpful here).
Check for typos in the HTML and CSS
Edit:
It sounds like you had h1 .myClass instead of h1.myClass - there's an important distinction:
h1 .myClass { } /* any element with class="myClass" within an <h1> */
h1.myClass { } /* any <h1> with class="myClass" */
Sure you can:
<h1 class="someclass">…</h1>
The class attribute is a in the attribute group coreattrs of core attributes that can be used with the h1 element.
It sounds like you are using h1 for all titles on the page. Typically you would have a single h1 tag on the page for what the page contains (with text at least partly matching the title of the page), and lesser header tags for headlines of different parts of the content. That way you give most information to the search engines about what's important on the page. There are of course pages that doesn't fit into this model, but many do.
There are many different ways that you can specify a style for headers. For example:
For all h1 tags:
h1 { font-weight: bold; }
For all h1 and h2 tags:
h1, h2 { margin: 10px; }
For all h1 tags inside an element with id="main":
#main h1 { background: #ccc; }
For all h2 tags with class="Info":
h2.Info { color: #000; }
For all h3 tags inside an element with class="More":
.More h3 { text-decoration: underline; }
You can add a class to an <h1> tag. Like this:
<h1 class="myclass"> ... </h1>
You can easily style it like this:
<style type="text/css">
.myclass { color : green }
</style>
The following should work:
<html>
<head>
<style type="text/css">
h1.custom {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<h1 class="custom"> test </h1>
</body>
</html>
The < title > tag is in your < head > section, so it wouldn't really make sense to add a class to it.
You can add a class to your < h1 > tag, though.
<h1 class="title">
<div class='row' id='content-wrapper'>
<div class='clear'/>
<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-wrap'>
<h1 class='error-item'>404</h1>
<h2>Page Not Found!</h2>
<p>Sorry, the page you were looking for in this blog does not exist.</p>
<div class='clear'/>
<a class='homepage' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Go To Home</a>
</div>
Related
I am creating a custom CSS class and i am not sure how to write the code.
The element uses a h2 font size for its heading and a standard paragraph font size for everything else.
I would like to code a custom size for the h2 headings.
my custom class name is hosting-post-slider and my code starts as follows...
.hosting-post-slider {
}
I am not sure how to refer to the h2 heading in my CSS in the above so i can customize h2 just for this element.
if you have some styling in a class such as
.hosting-post-slider {
color: red;
}
Then to make a single h2 tag have this style, simply do this in you HTML:
<h2 class="hosting-post-slider">The heading</h2>
If you want all h2's to have this style, either add that class to all h2 elements, OR change your css to target all the h2s, such as:
.h2 {
color: red;
}
The code below will reference only this instance of the h2 element. Any style you add to it will only be applied to this element.
The complete code will look like this:
.hosting-post-slider h2 {
font-size: 30px;
}
<div className="hosting-post-slider">
<h2>My header</h2>
<p>My paragraph</p>
</div>
Is this what you are looking for, this selects all h2 elements with your custom class
h2.hosting-post-slider{
}
On this answer: https://stackoverflow.com/a/1725486/2519402 to a question, it states:
It sounds like you had h1 .myClass instead of h1.myClass - there's an
important distinction:
h1 .myClass { } /* any element with class="myClass" within an <h1> */
h1.myClass { } /* any <h1> with class="myClass" */
I don't have enough points to ask my question as a comment on that answer.
So, based on what is said above, shouldn't the following code work:
<style>
h3 .h3nobtmgn {
margin-bottom:-20px;
}
</style>
<h3><strong class="h3nobtmgn">Why would I need or want this item?</strong></h3>
Yes, but vertical margin styles won't work on an inline element like <strong>. http://www.w3.org/TR/CSS21/box.html#propdef-margin-top
So your CSS selector will target the correct element but the style you applied will have no effect.
For that to work you can try:
<style>
h3 .h3nobtmgn {
display: block;
margin-bottom:-20px;
}
</style>
<h3><strong class="h3nobtmgn">Why would I need or want this item?</strong></h3>
Yes it does.
h1.myClass would change the appearance of
<h1 class="myClass">...</h1>
And h1 .myClass would change the appearance of
<h1> ... <span class="myClass">...</span></h1>
You will see through http://www.w3schools.com/cssref/trysel.asp that when you are doing div p it will select all p inside of div. So, the answer is yes.
here is a sample: https://jsfiddle.net/r5d0kkb5/
which shows selectors for div p and div .B and also div .A for your thoughts.
Code:
<div class="A">
<p >
A
</p>
<p class="B">
B
</p>
</div>
Css:
div p {
background-color: cyan;
}
div .B{
font-size: 32px;
}
div .A{
color: red;
}
I am curious why would the second color get over-written by the first one? Is there a way around this by not adding !important or wrapping it in the body class?
body.football h3 {
color: #a07a40;
}
footer h3 {
color: white;
}
Cascading stylesheets go by a hierarchical scheme if two selectors exist targeting the same element. The more specific one will take precedence.
However, your body probably should not have a class on it like that, just as a best practice. It's begging for headaches.
Your options:
Quick and dirty, you can use a descendant selector > to specify the immediate child. For instance:
body.football > h3 {
color: #a07a40;
}
footer > h3 {
color: white;
}
<body class="football">
<h3>Football is the Bees Knees</h3>
<footer>
<h3>Hi Ma Hi Pa</h3>
</footer>
</body>
Alternately, per your OP, you can also wrap the body content in a section or div and apply styles to that, IE:
section#football h3 {
color: #a07a40;
}
footer h3 {
color: white;
}
<body>
<section id="football">
<h3>Football Yo</h3>
</section>
<footer>
<h3>Yo Football</h3>
</footer>
</body>
Edit: I should add that the empty space between the two elements means that you're going to hit ALL the elements that are descendants of the parent elements.
It is getting overridden because css will use the most specific selector over any other selector.
To resolve this you will either need to use the !important flag or change the footer selector to be more specific, the easiest way to do that is use an id.
An Example:
#footer h3{
color: white;
}
<footer id='footer'><h3></h3></footer>
CSS likes to prefer more specific declarations over less specific declarations. Without seeing accompanying HTML it may be a little hard to be sure, but it is most likely because your body.football declaration is more specific.
There is html mistake on writed code or css structure.
HTML:
<body>
<div class="football">
<h3>ho</h3>
</div>
<footer>
<h3>test</h3>
</footer>
</body>
CSS:
body.football h3 {
color: #a07a40;
}
footer h3 {
color: red;
}
Example on Fiddle.
Or if football is on footer section, then you need put a class.
footer h3 {
color: red;
}
footer .football h3 {
color: #a07a40;
}
Fiddle
I'm just beginning to learn CSS (and XHTML) and I ran into a problem of assigning different properties to tags which have the same tag name.
For example: I have two h3 headers, but want to address them specifically using CSS because I want to make them different colours.
I believe this has something to do with naming the headers differently (i.e. h3.a), but trying this didnt work. Help would be appreciated!
Besides the tag name CSS can be applied by Class and ID. Note that it's best to make sure the case in your tags matches the case in the tags.
.myClass may not apply to class="myclass"
IDs:
<style>
#FirstHeading {color: red;}
#SecondHeader {color: blue;}
</style>
<h3 id="FirstHeading"></h3>
<h3 id="SecondHeader"></h3>
Classes:
.redHeading {color: red;}
.blueHeader {color: blue;}
<h3 class="redHeading"></h3>
<h3 class="blueHeader"></h3>
The purpose of IDs are typically to point to one specific element in your page, classes are designed to work with multiple different elements
Classes can also be combined, so you don't need to load all the styles into one class.
<style>
.redHeading {color: red;}
.blueHeader {color: blue;}
.boldHeader {font-weight: bold;}
</style>
<h3 class="redHeading boldHeader"></h3>
<h3 class="blueHeader boldHeader"></h3>
You can assign a class to each element and use CSS to target only that class. For example:
HTML:
<h3 class="green">Green heading for this one</h3>
<h3 class="red">Red heading for this.</h3>
CSS:
h3.green { color:green; }
h3.red { color:red; }
Add different class attributes to each h3, then address them in CSS using .className.
e.g:
HTML:
<h3 class="class1">One header</h3>
<h3 class="class2">Another header</h3>
CSS:
.class1 {
color: #00f;
}
.class2 {
color: #f00;
}
This is where classes come in handy.
CSS
.myFirstClass { color:green; }
.mySecondClass { color:red; }
HTML
<h3 class="myFirstClass">Text</h3>
<h3 class="mySecondClass">Text</h3>
There are so many different ways to target selectors.
You can give them class names:
<h3 class="makeblue">This should be blue</h3>
<h3 class="makegreen">This should be green</h3>
// in you css
h3.makeblue { color: blue; }
h3.makegreen { color: green; }
You can use "advanced selectors":
<div class="container">
<h3>This should be blue</h3>
<p>
<h3>This should be green</h3>
</p>
</div>
// in your css
div.container > h3 { color: blue; }
div.container p h3 { color: green; }
have a look here: http://css.maxdesign.com.au/selectutorial/
A useful thing to keep in mind when naming classes is to avoid names that imply how the class is styled. Naming classes after their styles leaks design information into the HTML, and if you later do a redesign, you will either have class names that no longer match the design, or you will have to edit both the HTML and the CSS to keep it up to date.
A much better practice is to create classes with semantic meaning, such as: subtitle, navigationHeader etc. Additionally, it's a good practice to give multiple classes and thus "extend" objects instead of repeating yourself:
<h2 class="subtitle forum">Forum</h2>
<h2 class="subtitle group">Groups</h2>
.subtitle {
font-size: 14px;
font-weight: bold;
color: green;
}
.subtitle.forum {
color: blue;
}
.subtitle.group {
color: red;
}
In CSS by addressing a tag you address all copies of that tag unless you are more specific.
e.g.
a h3 {} would address all h3 tags within an a tag.
However if you want to style individual elements or want more freedom you should be using a class or an id.
An id can be used on one element and works like so:
<h3 id="header"></h3>
you can then use
#header {
// your css style here
}
to style it.
Or you can use a class which can be used on multiple elements like so:
<h3 class="red"></h3>
<a class="red"></a>
you can then use
.red {
// your css style here
}
to style it.
Google provides some good video tutorials here: HTML, CSS and Javascript from the ground up
Make a class in CSS, like this:
h3.class1
{
color: blue;
}
Then just say:
<h3 class="class1"></h3>
You can use the class or a parent to define it. If you use a class it would be defined like:
h3.colorOne {
color: #ff0000;
}
h3.colorTwo {
color: #0000ff;
}
Then they would be used like:
<h3 class="colorOne">I'm red</h3>
<h3 class="colorTwo">I'm blue</h3>
Alternatively you can specify settings by a parent using an id field in a div of sorts:
#divOne h3 {
color: #ff0000;
}
#divTwo h3 {
color: #0000ff;
}
Which would be used like:
<div id="colorOne"><h3>I'm red</h3></div>
<div id="colorTwo"><h3>I'm blue</h3></div>
The usage all depends on the needs of your layout and the extensibility of your styles.
I've got a h1 line of 5 words and I want to increase the size of the 3rd, 4th and 5th initial letters only, underline them and then make them a different color.
I've done it but WC3 says my code is invalid on all attributes and elements in each case of size, underlining and color.
Here's what works in the browsers but won't validate:
<p><h1>Welcome to <br /><font size="120%" color=Red><u>M</u></font>y <font size=120% color=Red><u>F</u></font>vourite
<font size=120% color=Red><u>W</u></font>ebsite</h1></p>
It's giving me my only errors (15 in all) on this design.
Please can anyone assist with the HTML and or CSS to fix this so that it validates.
I have tried variations for size and color and though they work in the browsers, they will not validate.
Thank you :)
They won't validate cause the font tag was deprecated long ago, and thus all of its parameters,
You can use this in CSS:
h1 {
margin:5px;
}
#title span {
font-size: 1.2em;
color: #c13636;
text-decoration: underline;
}
And wrap the word to be highlighted in span tags:
<span>TEST</span>
Applied to your code:
<h1 id="title">Welcome to <br /><span>M</span>y <span>F</span>avourite <span>W</span>ebsite</h1>
Demo:
http://jsfiddle.net/Mutant_Tractor/SBbcu/
<font></font> and <u></u>
are deprecated. Use a <span></span> with CSS applied to it.
Use a span element with a style attribute, as in:
<span style="font-size: 120%; color: red; text-decoration: underline;">M</span>
Alternatively, define CSS classes for the various combinations and use those instead.
So, as a summary
can't have inside a
don't use <font> or <u>
HTML is for markup, CSS for styling
With "pure" HTML/CSS you have multiple possibilities to achieve what you're after. Here are couple variations. You probably should add class attributes to span elements but I've omitted them here for brevity.
1°
HTML file:
<h1>Welcome to <span>M</span>y <span>F</span>vourite <span>W</span>ebsite</h1>
CSS file:
h1 span {
font-size: 120%;
color: red;
text-decoration: underline;
}
2°
HTML file:
<h1>Welcome to <span>My</span> <span>Favourite</span> <span>Website</span></h1>
CSS file:
h1 span:first-letter {
font-size: 1.2em;
color: red;
text-decoration: underline;
}
You have some invalid tags <font> and <u>.
I would do something like this to validate and clean up your code:
<style>
.big {
font-size: 1.2em;
}
.red {
color: red;
}
</style>
<h2>Welcome to</h2>
<h1>
<span class="big red">M</span>y
<span class="big red">F</span>avorite
<span class="big red">W</span>ebsite
</h1>
or even:
<style>
h1 span:first-letter {
font-size: 1.2em;
color: red;
}
</style>
<h2>Welcome to</h2>
<h1>
<span>My</span>
<span>Favorite</span>
<span>Website</span>
</h1>