Jump to content

trying to learn CSS, stumped by a simple problem


keytone

Recommended Posts

I am trying to get how to change font size, family and color within a single line and am just not getting it. :facepalm:

Trying go by W3Schools Online, but am obviously missing the concept.

I would like to be able to change the word Tahoma to font size 30px, but only that one word. Is there an easy way? and also, am I changing to font color in the right way? Also, for some reason the "p." class name I used in <style> is different than the class name I used in the body, but it seems the same result :fool: or am I simply well confused?

Thought you guys would like to hear from a "dummy" today, Here's what I have:

 

<!DOCTYPE HTML >

<html>
<head>
<title>change</title>
<style>
p.tahoma15
{
font-family:tahoma;
}
{
font-size: 15px;
}
</style>
</head>
<body>
<center>
<p class="tahoma30">This is <font color="blue">Tahoma </font>15</p>
</center>
</body>
</html>
Link to comment
Share on other sites

Wrap the word in a <span>, then use a descendent selector to get the span that's a descendent of tahoma30.

 

I recommend using a more descriptive class name than "tahoma30", because if you someday decide you want something different the class name will be misleading.

 

You need to get your knowledge up to date. The <font> tag was deprecated 15 years ago.

Link to comment
Share on other sites

no one uses font tag, use span instead

 

 

<p class="tahoma30">This is <span color="blue tahoma15">Tahoma </span>15</p>

 

<style>
p .tahoma15 /* space means you are targeting a child element with class 'tahoma15', not parent paragraph with class 'tahoma15'*/
{
font-family:tahoma;
font-size: 15px;
}
</style>
Link to comment
Share on other sites

Thanks very much for your input, I was going about it all wrong. I used styles (but that's not really CSS, is it?) instead of getting all mixed up with classes. I'll work on that next.

Here's what I was trying to do (seems like a long way around the barn to me), is it acceptable to just use the HTML <i> tag for just one word?

 

<!DOCTYPE HTML >
<html>
<head>
<title>Use the "span" tag</title>
<style>
</style>
</head>
<body>
<center>
<span style="font-family:courier;font-size:20px;color:red">This is text at 25px,</span>
<span style="font-family:tahoma;font-weight:bold;font-size:25px;color:blue">
this is text at 30px, in<i> Tahoma</i></span>
<br>
By the way, does anyone know <span style="font-weight:bold;font-style:italic">"where" </span> Tahoma is?
</center>
</body>
</html>
Link to comment
Share on other sites

Not everything needs to be a <span>. Wrap paragraphs in a <p> element while using <span> to target tiny excerpts of it that you'd like to style.

 

Proper HTML coding is about using elements where they need to be, so a good way to begin is learning what is there and when to use it:

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...