CODEWITHSUNDEEP
htmlcss
Sam
Sam

Reputation: 501

Styling Text without HTML Tag?

Is there anyway to style Plain text without HTML tag in HTML.

Example: like I type in HTML some plain text say

    hello world   -> Can I style this plain text without any tag

    and not like

  <div> Hello World </div>

Upvotes: 7

Views: 28136

Answers (2)

James Donnelly
James Donnelly

Reputation: 128856

Plain text is contained within an element: the body element:

<body>
    Hello, world!
</body>

Because of this, you could style this text by simply styling the body element:

body {
    color: red;
    text-decoration: underline;
}

Depending on the context though, CSS3 does provide two pseudo-element selectors which could be used for this: :first-line and :first-letter.

To style the "H" you could simply use:

body:first-letter {
    font-size: 32px;
}

If there was a <br> element separating your first line from another line, you could also make use of :first-line:

<body>
    Hello, world!<br>
    Second line.
</body>

body:first-line {
    font-style: italic;
}

JSFiddle demo.

Upvotes: 12

Josh Powell
Josh Powell

Reputation: 6297

You will need to use a span or something of that nature to target certain parts of text. With only the use of css a tag is required to style the text.

You can achieve that effect like so with span,

<p>I can style <span>this</span> text with the use of a tag</p>

p span {
    color: teal;
}

I found this article on adding an underline to certain words. With the use of a script you could tweak this around to work how you want it to and without you adding an html tag by hand. Instead the jQuery will be adding the tag for you.

Upvotes: -2

Related Questions