Ok here is the thing. I need 2 different font sizes in my <h1> heading.
The text after the <br> need to be larger than the text before.
<h1>Welcome text from<br>Name</h1>
So I tried it with
h1 {
color: #c3c2c2;
font-size: 35px;
}
h1 br:after {
font-size: 50px;
}
But this doesn't work, any ideas or suggestions?
If you don't want or cannot change the markup, you could use the :first-line selector from CSS3. Something like this:
<h1>Welcome text from <br/> Name</h1>
h1 {
color: #c3c2c2;
font-size: 50px;
}
h1:first-line {
font-size: 35px;
}
According to Quirksmode the compatablity is quite okay, especially if you use the one-colon syntax over the ::first-line syntax (all good browsers support it, and IE from 5.5 and up as well).
See a jssfidle for a working demo.
If you are able to edit the markup, wrap "name" in a span and target the span with your selector.
Here is one way of doing it:
HTML:
<h2>Heading<br><span class="name">Name</span></h2>
CSS:
.name {
font-size:200%;
}
Example:
http://jsfiddle.net/ghWKm/
However, its more common to keep the heading to one line and put the subheading as a new element (h3 for example) underneath it.
you can use
`<h1>`Welcome text from`<span class="abc">Name</span></h1>
instead of
<h1>Welcome text from<br>Name</h1>
And give style to .abc
Why not wrap each side in a span and then set the sizes differently there, this will also mean that you do not need the br.
<h1>Welcome text from<span class="size2">Name</span></h1>
h1 {
color: #c3c2c2;
font-size: 35px;
}
h1 .size2 {
font-size: 50px;
}
Related
I have a basic clickable text with black color, and I want to make another text green, but if I change it, the text that changes in black
How can i do this?
a {
color: black;
font-size: 40px;
font-weight: bold;
text-decoration: none;
}
<p class="margin-ot">Reviews from past exams</p>
Give the element you wanted to be green a specific class, then use that class to style it. Notice that i declared that style below the original style with a class selector next to it to give it the priority.
All of the above is related to CSS selectors, Selector Specificity. I suggest to take a research about all those CSS concepts which is really important to understand.
Additional, you can wrap the inner text of the black text by a span, then style it the way you want.
a {
color: black;
font-size: 40px;
font-weight: bold;
text-decoration: none;
}
a.green{
color: green;
}
a span{
color: green;
}
<p class="margin-ot">Reviews from past exams</p>
<p class="margin-ot">Reviews from past exams</p>
<p class="margin-ot">Reviews from past<span> exams </span></p>
Your question is confusing, please explain better what exactly you want to achive here.
If you have element with nested ones, then styles from parent also will affect it's children. The cleanest way to set different styling to children elements is to add to it various classes, for example:
.text-green {
color: green;
}
.text-big {
font-size: 1.2rem;
}
<p>A paragraph text with <span class="text-green text-big">span element in different color and size</span>.</p>
my task is to create a tag which CONTAINS an ordered list, that's my idea:
<section>
<h2>Ich kann physische Auszeichnungen:</h2>
<ol>
<li><b>Coffee, Bold Text </b></li>
<li><i>Tea, Italic Text</i></li>
<li><u>Milk, Underlined Text</u></li>
</ol>
</section>
is this correct? Second problem:
I am asked to make the <h> tag size 300% and word-spacing between listed text 50px with CSS styling, that's what I do:
h2 {
font-size: 300%;
}
ol {
word-spacing: 50px;
}
it seems to be working, but when I do that, the order (1.2.3) of the list disappears, how should I fix it?
You are targeting the wrong element for word spacing.
Try this:
h2 {
font-size: 300%;
}
b, i, u {
word-spacing: 50px;
}
See fiddle: https://jsfiddle.net/nLjy6xgp/1/
You could try something like this. You can wrap a <p> tag around your elements inside the li - then add the word spacing to the p tag
h2 {font-size: 300%;}
ol p { word-spacing: 50px; }
Example: http://jsfiddle.net/Lj5kz8p5/
This works:
h2 {
font-size: 300%;
}
li {
word-spacing: 50px;
margin-left:30px;
}
Fiddle
Seems that the wordspacing is messing with the numbering. Adding a bit of left margin works.
Is it possible to change the value of a <p> after hovering over an <h1> only using CSS?
When the user hovers over a heading, I want the color value of a <p> element to change accordingly. I'd like to achieve this using only CSS.
Yes You can. Here is an example.
#a:hover ~ #b {
background: #ccc;
}
<h1 id="a">Heading</h1>
<p id="b">random Text</p>
But element with id b must be after a.
Hope that was Helpful!
if the h1 directly precedes the <p> tag, you could do something like:
h1:hover + p { color:red; }
Note that IE needs a <!doctype> before it will honor hover on elements other than <a>, and the + selector does not work in IE 6
It is possible, but requires a sort of "hack". My advice would be to go with JavaScript, JQuery for this action, much easier.
I'm reading this question as changing the actual value inside the <p> element. If that's the case here is how it can be done.
Fiddle: https://jsfiddle.net/fc3rhgow/1/
HTML:
<h1 id="myH1">this is the h1</h1>
<p id="myP">this is the p</p>
JavaScript:
var h1 = document.getElementById("myH1");
var myP = document.getElementById("myP");
h1.addEventListener("mouseover", mouseOver);
function mouseOver(){
myP.innerHTML = "new value";
}
Perhaps this decision will suit you. Good luck.
h1:hover + p:before{
content:'Ohhh hover h1';
}
h1 + p:before{
content:'h1 no hover ';
}
<h1>Header H1</h1>
<p></p>
Depending on what you mean by 'value', and what your HTML looks likes (ie, which p element you wish to modify) you can do something like...
h1:hover p
{
color: red;
font-size: 2em;
}
OR maybe this?
h1:hover ~ p
{
color: red;
font-size: 2em;
}
OR this perhaps?
div h1:hover p
{
color: red;
font-size: 2em;
}
OR maybe even this?
h1:hover > div p
{
color: red;
font-size: 2em;
}
Whatever you need to to target mate...
NB: As far as I know, we can't target parent selectors :-(
I am developing a front end HTML page using bootstrap and basic HTML code. I need to print price of a particular product say $63.
I want this to be in same line but the size of $ needs to be smaller than the number. How do I achieve this?
span { font-size: 3em;}
span b { font-size: 60%; font-weight: normal }
<span><b>$</b>63</span>
You could also avoid to use a nested element to wrap the currency sign and use the ::first-letter pseudoclass to style it, but this requires a block or inline-block parent element, e.g.
span {
font-size: 3em;
display: inline-block; }
span::first-letter { font-size: 60%; }
<span>$63</span>
Only HTML: using
Two span tags and 2. different font size in style
<span style="font-size: 25px;">Rs</span> <span style="font-size: 50px;">2000/-</span>
Check this http://jsfiddle.net/RPf4N/2/
html
<div id="mydiv">$<a>63</a></div>
ur css
#mydiv
{
font-size:20px;
}
#mydiv a
{
font-size:100px;
}
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>