Background for Inline Elements

Is there a way to set a background color for inline elements (e.g. text)?

I have been setting a border and background color on block items to help me see where they are and how they behave.

It would be helpful to do that with inline elements that exist by themselves outside of block elements.

Debbie

Outline is commonly seen in some browsers like Firefox and IE to show a keyboarder where they’ve tabbed to. In Safari and Chrome it’s a sort of weird glow (I guess in keeping with the candy appearances).

Put your cursor at the top of this SitePoint page and start tabbing… and you’ll see the outline. On some sites, people remove them because they’re ugly, but unless you’re putting in some other :focus style for people, it’s a Bad Idea.

You really cant apply style to text, per se. Text is an anonymous element… even wrapping a span doesn’t actually show you where the text is… it shows where the SPAN you just created is ( which just so happens to coincide with the text, YES… but it’s bad karma to think the it is the text that you are moving or that you could do so without a tag around it , be it a block or inline tag. rmeber what you are playing with is the MARK UP ( tags) and not the actual string of characters.

The difference between “Outline” and “Border”??

basically the behaviours:

  1. Outline encompasses (dare I say outlines) the whole element. you cant have outline-top, for example.
  2. outline doesn’t affect the box model ( if you have an element with a width of 100px; for example. and you give it 10px border… it’s going to be 120px wide. (100px+ 10px left + 10px right) if you had the same element with a 10 px outline it would still be 100px wide , albeit the outline would cover surrounding element s by 10px, but it would not cause them to reflow
  3. the outline comes AFTER (outside the border) you can have BOTH outline and border!! if we had the same element we just mention, with the 10px border… and then added an outline… the outline will be drawn outside(surrounding) of the border. Again, it would affect the reflow/layout of the adjacent elements… (but remember, the border does).

if you want to see outline in action… and you have Firefox. not what happens when you click a link… you get a dotted outline. This is FF’s default a:active style. You’ll notice that tho the dotted outline appears, the layout doesn’t “jump” to accommodate it. ( this is point #2 in action) by contrast, if you had FF had used BORDER istead of outline you woudl see the jump I am talking about.

I agree with Gary plus outline also has no impact on the layout unlike borders.

Correct. And on pg 491 they say in the comment on the diagram, “Here, there’s room to fit all the inline elements horizontally. Notice that text is a special case of an inline element. The browser breaks it into elements that are right sixe to fit the space.

Well, I was trying to get something visually to appear on my screen that looks just like the diagram on pg 491 (and pg 492).

I’m pretty sure there is some web development add-on for Firefox that simulates that.

Anyways, that was what I was trying to do…

This is the html for the first two lines in the box on the left:

<h1>Text</h1>

<p>Text</p>

To style that text, you use this css:

h1 {background: blue; font-weight: bold; text-decoration: underline; font-size: 3em;}
p {background: red; font-size: 1.25em; color: #222;}

That’s how you style text. No other way.

Not style the text. Show visually how Firefox is viewing/treating/catagorizing the “inline elements” - which in this case are “text”.

Yep, it’s called Firebug, and it’s incredibly handy. It has a lot more uses than just that.

But can I mimic the illustrations from my book using code instead of that tool?

I was able to shade the block elements using “background”. Isn’t tehre a way to shade inline elements like text?

Debbie

P.S. Miss my bird? :slight_smile:

I don’t understand what you are saying?

Do you have the Head First book I’m referring to?

If so, you’ll see on that page that they show how your browser wraps text in it’s own fluid container and it breaks when it gets to a logical place at the end of the line - similar to how a word processor works.

I thought there was some Firefox HTML debugging tool that showed where the borders and boundaries for everything was at, but I just use the “background” attribute in CSS as a quicky.

So I thought there might be a way to do that for untagged text.

I guess you need my book to know what I’m trying to mimic.

Debbie

Debbie, that text is wrapped in block elements like <h1>Text</h1>, <p>Text</p> etc.

So the way to style it is

h1 {background: blue}

p {background: red}

etc.

You should never have text that is not wrapped in an element of some kind.

Hmm, inline elements should always be contained within block elements.

But anyhow, yes, you can put a background on inline elements just the same.

E.g.

a {background: red}

Yep, I see what you are saying. But you can also put borders etc on inline elements.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">
p {border: 1px solid red;}
a {border: 1px solid blue;}
</style>
</head>

<body>
<p>This is a sentence <a href="#">with a link in it</a> that goes nowhere.</p>
</body>
</html>

Thanks Ralph.

That works except it doesn’t hi-light the text on a line by line basis like the book example does, but it’s good enough!

Debbie

Gary, that works, except I was looking for a style that applied to all text in one swoop. (I would have to add <span> tags everywhere I wanted to see that.)

Good enough!

BTW, what is the difference between “Outline” and “Border”??

Debbie

Ralph,

Attached is an example of how I use backgrounds, borders, and margins to help me see “under the hood” and better understand what the elements are doing.

See how by bumping over my floated box using margins I can see that the block elements underneath it extend the whole width of the screen?

That helps to better understand what CSS is really doing.

Debbie

I’m making a big deal out of nothing.

I just find that highlighting elements to know where they are, what they look like, etc helps me to get a better grasp of how CSS works.

For instance, I added a background and border to my block elements when doing the float examples in my book. By adding a background and border to the block elements and then offsetting them with a margin tweak, I could better see how my right column indeed was “floating” above the block elements underneath it, and how those block elements extended all the way to the right edge of my screen even though the inline elments inside those block elements stopped when they got to the floated item.

I thought if I could visually see - like the book diagrams - how the browser treats inline elements it would make things even clearer.

I think padding and margins and borders and where elements truly exist (versus how they appear to exist) is the trickiest part of learning CSS.

Follow me? (:

At any rate, it’s all good.

Debbie

Yes, I do, and I’m referring to what’s on p492.

If so, you’ll see on that page that they show how your browser wraps text in it’s own fluid container and it breaks when it gets to a logical place at the end of the line - similar to how a word processor works.

No! That’s not what they are showing you.

The dark gray areas represent <h1></h1>, <p></p> etc.

The lighter gray areas are the text inside.

This is the html for the first two lines in the box on the left:

<h1>Text</h1>

<p>Text</p>

To style that text, you use this css:

h1 {background: blue; font-weight: bold; text-decoration: underline; font-size: 3em;}
p {background: red; font-size: 1.25em; color: #222;}

That’s how you style text. No other way.

I thought there was some Firefox HTML debugging tool that showed where the borders and boundaries for everything was at

Yep, it’s called Firebug, and it’s incredibly handy. It has a lot more uses than just that.

So I thought there might be a way to do that for untagged text.

No. There’s never a need to do that. Text will always be contained in some element or other, so you style it via that element.

Hi Debbie,

Go back to Ralph’s and donboe’s first responses. For any text you want to segregate for style purposes, wrap it in span tags. Then style the span for however you want to render that text. E.g.

span {
  background-color: yellow;
  }

or (and I like to use this for inline stuff)

span {
  outline: 1px dotted gray;
  }

I think the outline is more informative.

cheers,

gary

Very interesting!

I never even knew that “outline” existed?! :blush:

Thanks,

Debbie

It would be cool if something like
p * {
background-color: #f00;
}
would do something like, highlight all the anonymous inline boxes the browser creates for each word. So, words highlighted, but not the spaces in between.

I’m sure there’s an easy way to do what you are asking, but I’m really not sure what you are trying to do here.

Firebug is just a way to examine elements on a page, not to style a page, so I’m a bit confused as to where this comes into the picture.

You could use <span>

span {background: red}

Okay, but can you do it for TEXT??

(If anyone has the book “Head First: HTML with CSS & XHTML”, I am trying to do like the example on pg 492)

Debbie