What is the CSS equivalent of the <big> element? If I'm not mistaken then wrapping your text in the <big> element is not the same as setting a larger font-size.
Google Chrome says:
big {
font-size: larger;
}
That should be the corresponding CSS. Anyway, make sure not to use tags like big since they go against the rule which states HTML should be used to describe the content, not the appearance.
You could go for something like:
<span class="important-text">My important text</span>
And use this in CSS:
span.important-text {
font-size: larger;
}
Which is the correct form, whereas
<big>My important text</big>
is incorrect.
This
<span style="font-size:larger">...</span>
is a direct equivalent of the <big>
The W3C says:
BIG: Renders text in a "large" font.
So setting a larger font-size should be fine.
font-size:200% = font-size:2.0em = <big><big><big>
Related
I've a logo text in anchor tag and the Text logo to have the first letter of ever word red.
FLETCHER ROBBE INTERNATIONAL LLP
Like below image:
I've used span but it doesn't seem working in my scenario. Can some one point me to some CSS approach? Thanks
Working JSFIDDLE
This is the best you can do for inline elements in pure HTML + CSS:
<a class = "name" href="http://frobbeintl.com" title="">
<span>F</span>letcher
<span>R</span>obbe
<span>I</span>nternational
<span>LLP</span<
</a>
CSS:
.name {
text-transform: uppercase;
}
.name span {
color: red;
}
You could use the ::first-letter selector, as in CSS-Tricks. <- only for block elements
Although you can use this property
a::first-letter {
color: red;
}
But note this would be applied to the very first word in the Hyperlink, not in the word.
Here is a document for this http://css-tricks.com/almanac/selectors/f/first-letter/
You could change your code to the following:
<span>F</span>LETCHER <span>R</span>OBBE <span>I</span>NTERNATIONAL <span>LLP</span>
Having that you can style the spans differently. From a markup standpoint that's fine because span has no meaning.
Using this technique and ids/nth-child you can even go as far as styling every letter differently.
As you see this gets ugly very quickly - so someone created a little jQuery plugin to do it for you: http://letteringjs.com/
Hope that helps.
I know this has been asked before here. But let me put my problem in a different way. I am using PHP and would like to show a HTML string coming from database in my page. But the problem is as the CSS of the page is of a generic style, it's taking the them in the HTML string also. But I want it to show without any styling whatsoever. I have gone through some searching the internet only to find about the "not" selector of CSS. I would like to know whether there is a way to identify a single element in my html page that would “not” take the general styling/css? What “not” does is specify all other element and “not” the one in the argument. I just want the opposite.
<style>
.div-class p{font-weight: bold;}
.div-class p:not(.no-style){font-weight: normal;}
</style>
<div class="div-class">
<p>This should be bold.</p>
<p class="no-style">This should not be bold.</p>
</div>
I would like the “p” with the “no-style” class to have a normal font weight. It’s currently the opposite. I hope to have made myself clear.
Thanks,
You may place your script output in div with certain id/class. And reset css to this div. There are a lot of various css resets available.
P.S. IMHO there is no css rule to disable all css for certain elements.
P.P.S. You may create an empty iframe (src="about:blank") and place your content there with javascript.
<style>
.div-class p
{
font-weight: bold;
}
.div-class p.no-style
{
font-weight: normal;
}
</style>
<div class="div-class">
<p>This should be bold.</p>
<p class="no-style">This should not be bold. </p>
</div>
Edit: see it working: http://jsfiddle.net/C3jqc/
Edit 2: you can't avoid heritage. You could use "not" in your CSS in this way:
<style>
p:not(.unstyled){
font-weight : bold;
}
</style>
<p> this should be Bold</p>
<p class='unstyled'> This shouldn't be bold</p>
Then add the "unstyled" class to every content you create from your PHP and the ":not(.styled)" to every CSS declaration.
Another option is to redefine every style in your CSS to match my original response.
Bear in mind the availability of the "not" selector across browsers.
there is a simple way to override the styles applied
you can use !important
for example
p{
font-weight:bold;
}
will not be applied if u have
.nostyle
{
font-weight:normal !important;
}
JSfiddle
I have the following HTML markup:
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>
When I use the CSS selector h1 I get Hello World.
I can't unfortunately change the markup and I have to use only CSS selectors because I work with the system that aggregates RSS feeds.
Is there any CSS selector which I can take only the text node? Specifically the World in this example?
The current state of CSS can't do this, check this link: W3C
The problem here is that the content you write to the screen doesn't show up in the DOM :P.
Also ::outside doesn't seem to work yet (at least for me in Safari 6.0.3) or it simply doesn't generate the desired result yet.
Check my fiddle and then check the DOM source: JSfiddle
Finally there are attribute selectors a { content: attr(href);}, making CSS able to read DOM-node attributes. There doesn't seem to be a innerHTML equivalent of this yet. It would be great tho if that was possible, whereas you might be able to manipulate the inner markup of a tag.
Bit of a workaround:
h1 {
color: red;
}
h1 * {
color: lime;
}
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>
This is almost the opposite of a question I asked last week: Is it possible to select the very first element within a container that's otherwise pure text without using classes or identifiers in pure CSS?
The short answer is no. "World" in this example isn't an element of its own - therefore there isn't a way to select it.
What you would have to do here is style the h1 then override that styling with div.sponsor. For instance, if you wanted "World" here to have a black background with white text you woud use something similar to:
h1 {
background:black;
color:white;
}
h1 div.sponsor {
background:white;
color:black;
}
Unfortunately, however, this wouldn't work if you were only wanting the word "World" styled and your markup had more than just that within <div>Hello</div> World Foo, for instance.
I don't believe it would be possible with pure CSS to style just "World" in this situation.
I also met same problem, where I can't touch the markup and have no control with js.
I needed to hide a text nodes in a div element, but the element to remain visible.
So here is my solution:
markup:
<div id="settings_signout_and_help">
<a id="ctl00_btnHelpDocs" class="ico icoHelp" href="http://" Help Guide</a>
Signed in as: <a id="ctl00_lUsr" href="Profile.aspx">some</a>
Home
Sign out
</div>
css:
#settings_signout_and_help {
font-size: 1px !important;
}
#settings_signout_and_help a {
font-size: 13px !important;
}
Hope this helps guys!
I had a similar problem where I had to remove the "World" text from html generated by a C# function.
I set the font-size to 0 on the 'h1' element and then applied my css to div class. Basically hiding the extra text, but keeping content in the div.
I don't know how to do it with just CSS, but...
Using JQuery, you could select all the elements inside except the stuff inside its child element
$("h1:not(h1 > div)").css()
and put whatever CSS effect you want inside there.
I'm fairly new to CSS, so I want to ensure I'm implementing it correctly. I need to include an explanatory paragraph on a web page. I'd like it to look different, so I've included the following in the external CSS file:
div.usage { font-style: italic; margin-left... margin-right... ; }
and then included <div class="usage">Explanation</div> in the HTML file. This is working as expected.
My understanding is that when using CSS, content and layout are separated. How, then, would I underline some text in my explanation? My understanding is that I should avoid the following: <div class="usage">This is <u>very</u> important.</div>.
You are right about separating content and layout, but in this case, I would wrap it in a tag. The <u/> tag is deprecated, though. What I would use, is something like this:
<div class="usage">This is <em>very</em> important.</div>
and
em { text-decoration:underline; }
The <em/> stands for emphasized text. The default is italic, so depending on your CSS reset, you may need to also reset font-syle to normal.
As an aside, it's usually a bad idea to underline text, as most people assume underlined text are links. I would make it bold instead, or maybe even give it a background color.
As you say, HTML is for content and CSS is for styling. So, you don't have to use styling stuff in your HTML. Indeed, when you think in HTML you must think in content as well in a semantic way.
So the class you use for your div.usage is very well chosen, because it doesn't say anything about its style, but about its semantic. Now, what about the text you want to underline? I would say that in a semantic way this is a text you want to highlight, and HTML has a good element for this: <strong>. Then, in your HTML you can override the browser default style for <strong> elements (bold) for the underline you want.
<div class="usage">This is <strong>very</strong> important.</div>
strong {
font-weight: normal;
text-decoration: underline;
}
If you want to have this style only for highlighted text inside of your div.usage element, then be more specific:
.usage strong {
font-weight: normal;
text-decoration: underline;
}
Surely, you don't want to add the div to the selector (i mean .usage better than div.usage). This way you are ready in case you are going to code, for example, a list or a pragraph with the usage semantic.
The "text-decoration: underline" property allows you to undeline text.
You should use one of these tags: <strong> or <em> and style them in the css.
.usage strong { font-weight: bold; }
In your markup you define some content that you want to emphasize (<em>) or strongly emphasize (<strong>). See http://www.w3.org/TR/html4/struct/text.html.
I would not use underline for emphasizing as this will confuse users in thinking it's a hyperlink.
Just a bit of friendly advice, it's a good idea not to use underline on the web, as it is very often confused with a clickable link.
I would suggest using
<strong>this is important</strong>
Which will appear bold by default.
Or perhaps you could use a yellow background on the text, like a highlight marker...
<p>text <span class='highlight'>hightlighed</span> text</p>
And put this in your CSS
span.highlight {
background-color: #FF9;
}
you can try this:
<div class="usage">This is <span class="underline">very</span> important.</div>
css:
.underline { text-decoration: underline; }
hi for underline you can take a small example here
HTML
<div>
<p>
This is just a text to check <span>underline</span> with CSS
</p>
</div>
CSS
div p { font-style: italic; }
div p span{ text-decoration: underline;}
Nowadays, people use to say that <u> markup should not be used, but few people can back this up with factual arguments (as opposite to citing purported authorities and using negative-sounding adjectives). If you really want underline (which is generally not a good idea in HTML documents, as pointed out here), then <u> is the simplest and most robust way. You would still have the liberty of later deciding that you wish to use, say, bolding instead of underlining, and then you could do it simply in CSS:
u { text-decoration: none; font-weight: bold; }
For emphasis, other methods are almost always better than underlining. But there are situations where underlining is part of a conventional notation (e.g., in phonetics or mathematics), and then you might want to use <u> (and you would not want to rely on CSS).
You could encapsulate the text you wish to underline in span and specify a class for that span
.underline {
text-decoration:underline;
}
<div class="usage"> This is <span class='underline'>very</span> important.</div>
I want to know which of the following code is correct... among all the three...
<h1><span class="bold">realestate</h1>
<h1>realestate</h1>
<h1 class=bold>realestate</h1>
Please let me know about that...
The best would be option 4:
<h1 class="main-heading">realestate</h1>
You should give your classes semantic meaning - a main heading will always be a main heading, but what if the designer decides they would look better underlined? You'd end up with this:
.bold { font-weight: normal; text-decoration: underline; }
Which is confusing at best!
The first is not correct, since the span element has no end-tag:
<h1><span class="bold">...</span></h1>
The second and third are both correct (but the doublequotes are missing in the third example).
But if you want to use which one to use, I'd say use the second one and define the bold style for the h1 element, e.g:
<style>
h1 { font-weight: bold; }
</style>
It depends on what you are trying to do.
Are you trying to make all your h1's bold. In that case, use #2 and use CSS to style all h1 elements accordingly.
CSS
h1 {
font-weight: bold;
}
HTML
<h1>realestate</h1>
If you are trying to make only a select few h1's bold, use #3 and use CSS to style all h1 elements that have the bold class.
CSS
h1.bold {
font-weight: bold;
}
HTML
<h1 class="bold">realestate</h1>
The first one is really only useful if for some reason you wanted part of h1 to be bold
CSS
.bold {
font-weight: bold;
}
HTML
<h1><span class="bold">real</span>estate</h1>
Also, in general from your samples, watch out for quotes and end tags.
The third option certainly seems to me to be the cleanest option, except the attribute value should be enclosed in quotes, assuming you are using XHTML:
<h1 class="bold">realestate</h1>
It doesn't really make sense to enclose the entire contents of the <h1> tag in another tag. It would make more sense to enclose just the part of the tag that should be different to the rest of the <h1>, but not completely different, e.g:
<h1>Real <span class="bold">Estate</span></h1>
Think of the <span> tag as the inline equivalent of the <div> tag.