Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
What is the difference between
<span style="text-transform: uppercase;">some text</span>
and
<span>SOME TEXT</span>
I mean both look exactly the same, but I have read somewhere that it is better to write the text normal in html and then set text-transform: uppercase; in CSS, but does it really make a difference? I know you can use text-transform: uppercase; if you want to automatically capitalize every first letter of all paragraphs on a page with pseudo-elements (:first-letter). I think it would even use more memory and processing/rendering time if you use text-transform: uppercase;.
From a design and content perspective, the CSS option is better.
For starters, you should always use CSS for appearance. HTML is only to describe and structure content.
Now imagine you have a special term on your site that you want in all caps, but tomorrow you decide it should be in small caps or initial caps. Which is easier to change: one line in a style sheet or x number of instances buried in text?
Using CSS today will make your life easier tomorrow.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 months ago.
Improve this question
I'm having issues with my process, since I'm a newbie in HTML-CSS.
The thing is...Whenever I begin my CSS codes I'm having some issues with the
text-align:
font-family
font-size
font-weight
they all seem too similar to me, sometimes I end up doing something that I didn't wanted to.
As an example, in this print
Anyway, I'm taking back all the study I had with CSS so that I can strengthen my knowledge.
I just wanted to share what I'm going through. A lot of things in the CSS seems the same to me and it's confusing!
So text-align determines whether your text is oriented at the left, right, or center of its container, much like the alignment feature on Microsoft Word. Font-family is what kind of font you're using (Arial, Times New Roman, etc.). Font-size is just that, how large your font is, while font-weight determines whether your font is bold or not.
If you want the 2 images to be side by side, rather than one on top of the other, I recommend setting the parent container's display property to flex and its flex-direction to row like this:
.parent-container{
display: flex;
flex-direction: row;
}
You can learn more about Flexbox at https://css-tricks.com/snippets/css/a-guide-to-flexbox/ I found this website invaluable when I was a CSS beginner.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm currently new(ish) at HTML. What I'm trying to do is Make a centered "Hello!" That has the font of Georgia and the font color of purple. This is what I have right now:
<div style="<font face="Georgia" color="purple"">
<center><h1>Hello!</h1></center>
</div>
I'm not even sure if I'm doing it correctly, but right now it's hard to find an anwser without having to use CSS, and I have no idea how CSS works.
Yes, CSS is required. HTML just builds the layout and framework of the page, while CSS styles it and makes it visually appealing / formatting how the page fits with everything. You should learn CSS. It's an excellent language that fits with HTML, and it will be very useful for later website development. Also, the tags <font> and <center> have been obsolete, so you shouldn't waste your time using them. You should look at the documentation for up to date HTML5 tags. Learning CSS will make this process a whole lot easier.
CSS:
.hello {
color: purple;
font-family: Georgia, Times, Times New Roman, serif;
text-align: center;
}
HTML:
<p class="hello">Hello!</p>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I would like to achieve this text format.
<p>you 10 oz bottle</p>
The text number "10" and text "oz" has same height. Is there anyway to achieve this? Or do I need some fonts to achieve this text format? Can someone please help me. Thanks in advance.
Not a lot to go on. But I'll try.
body {
font-family: Arial, sans-serif;
}
.size {
font-size: 0.75rem;
text-transform: uppercase;
}
<p>
I have a <span class="size">10 <span class="unit">oz</span></span> bottle.
</p>
Notice the source text is lowercase. After the CSS is applied it is uppercase.
Though I am a bit wary that this might not work for all fonts, numbers, letters etc. The baseline positioning and heights of some characters may not work out as well as it does with Arial. That is why I wrapped oz in a <span> so it could be individually targeted if the font size needs adjustment.
Wrap your the number in another element you can target to adjust the font-size accordingly. Or simply wrap it in small tags.
<span>You have <small>10</small> oz bottle</span>
<span>You have a <small>10</small> oz bottle</span>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Firefox renders special character too small. I compared in Chrome and Firefox.
You can check - http://jsfiddle.net/y23rwucp/
How can I do same size in all browsers using px:
font-size: 14px;
Thank you
Screenshot
P.S. I'm testing on Mac.
As the comments suggest, using dingbats (or any font not designed for this perpose) for this is not optimal. A proper replacement would be ×:
span{
font-size: 14px;
font-weight: bold;
}
<span>×</span>
You could also make a class and use the before. You can use this as simply
<span class="Times"></span> or put text in the span (required a tad more css)
.Times:before {
content:"\00d7";
font-weight: bold;
}
This might be worthy to add: Font Awesome does the same thing I just did with the :before, only they have a lot of icons. If you need various icons in your site, you might want to check this out.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
I know that search engine bots pay attention to bold texts on the page, which are strong HTML tags. But do they still recognize if we use font-weight:bold instead of strong tag?
Is the HTML strong tag equivalent to font-weight:bold; for SEO?
Last time I checked, most search engines do not factor CSS into rankings.
However, certain semantic tags such as h1 and so on do factor in.
Of course, it all depends on what else is on the page.
Aside
I did a casual search on Google and found some discussion about hidden text, which is a tangent to your question but may be of interest:
http://www.youtube.com/watch?feature=player_embedded&v=UpK1VGJN4XY
You can't expect all search engines to be bullet-proof, so the answer is, not all of them.
What you can do is use CSS to ensure that search engines like Google and Yahoo understand which words are important, without having to annoy your readers:
<p>This sentence contains several
<strong>keywords</strong> of
<em>significant importance</em>.
Append it with a new “SEO” CSS class:
<p>This sentence contains several
<strong class="seo">keywords</strong> of
<em class="seo">significant importance</em>.
And then write a simple CSS rule like this:
em.seo, strong.seo {
font-weight: normal;
font-style: normal; }
This CSS will prevent strong and em tags from being bold-faced or italicized on the screen while still allowing search engines to recognize the significance of those tags.
Source: http://www.cssnewbie.com/4-ways-css-can-improve-your-seo/
Edit: However, as suggested by the commenters below, be aware that SEs may recognize your low tricks. You should first consider a read to this link before starting with hacks, and do it at your own risk.