CODEWITHSUNDEEP
htmlcssstylesheet
ThePlague
ThePlague

Reputation: 329

HTML + CSS Styles/Text Formatting inside Div container

I'm trying to bold and color certain words (or make them italic, different size, etc.) within a paragraph in my Index.HTML.

But the usual formatting tags (HTML) are not working.

I have a StyleSheet that contains all of my styles and properties for the website, but I only want to change three words (for example) in the paragraph. How do I do it?

index.html:

<div id="da-slider" class="da-slider">
    <div class="da-slide">
        <h2>This is the Heading</h2>
        <p>And HERE is where I want to make this word BOLD and this WORD in a different color, for example</p>
        <a href="#" class="da-link">Read more</a>
    <div class="da-img"><img src="img/pp-slider/imac.png" alt="image01" /></div>
</div>

Upvotes: 1

Views: 47848

Answers (5)

Nitesh
Nitesh

Reputation: 15749

Here is the Solution.

The HTML:

<div id="da-slider" class="da-slider">
    <div class="da-slide">
        <h2>This is the Heading</h2>
        <p>And HERE is where I want to make this word <span>BOLD</span> and this <span>WORD</span> in a different color, for example</p>
        <a href="#" class="da-link">Read more</a>
    <div class="da-img"><img src="img/pp-slider/imac.png" alt="image01" /></div>
</div>
</div>

The CSS:

.da-slide p span {
    font-weight: bold;
}

Hope this helps.

Upvotes: 0

Sree ram
Sree ram

Reputation: 379

Usage: 

Bold : <b> 
Italic : <i>
Underline :  <u>

Example:

To make the text <b>BOLD</b> and

To make the text <b><i>BOLD and ITALIC</i></b>

You could also use CSS with a span:

Example :

This makes the text <span>Bold and italic</span>

With the following CSS:

span {
    font-weight: bold;
    font-style: italic;
}

Upvotes: 1

dhanush
dhanush

Reputation: 41

You can have your desired results by pre-defined HTML tags strong, i, em, or you can set individual classes for assigning to different elements.

Here is the document you can save & try...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <style>
            body {
                font-size:100%;
                font-family:arial;
            }

            .boldme {
                font-weight:bold;
            }

            .italicme {
                font-style:italic;
            }

            .iambigger {
                font-size:150%;
            }

            .colormered {
                color:#FF0000;
            }
        </style>
    </head>
<body>
    <div class="da-slide">
        <h2>This is the Heading</h2>
        <p>And <span class="iambigger">HERE</span> is where I want to make <span class="italicme">this</span> word <span class="boldme">BOLD</span> and this <span class="colormered">WORD</span> in a different color, for example.</p>
        <p>And by the way, <span class="boldme italicme iambigger colormered">I can have combinations of all</span></p>
        <a href="#" class="da-link">Read more</a>
        <div class="da-img">
            <img src="img/pp-slider/imac.png" alt="image01" />
        </div>
    </div>
</body>
</html>

Let me know if you need to know anything else...

Upvotes: 3

DiederikEEn
DiederikEEn

Reputation: 743

check this fiddle: here

This is a little example.

I use <strong>Word</strong> to make it bold, but <b>Word</b> will do fine to.

use <i></i> to make words italic. Also i used <span class="color">Word</span> to make it blue.

Upvotes: 6

George
George

Reputation: 36784

Wrap the words in a <span> and then apply a style to them

HTML:

<p>And <span>HERE</span> is where I want to make this word <span>BOLD</span> and this <span>WORD</span> in a different color, for example</p>

CSS:

#da-slider p span{
    color:#F00;
    font-weight:bold;
}

See this Fiddle

Upvotes: 1

Related Questions