The <div style=" and the <span style=" are two different parts, is there a name that each is called?

HTML & CSS
1

Is there a name you call both the top and lower part of the code?

<div style="width: 256px; height: 150px; cursor: pointer; text-align: center; line-height:114px;background-color:#000000;border-radius: 50px; border: 5px solid #0059dd;">
    <span style="font-family: New Times Roman; font-size: 20px;color: #0059dd; ">[ ENJOY THE MUSIC ]</span>
</div>
2

I’d call it poor coding. You have been told many times not to use inline styles.

3

How about we call them each.

Wrapping Element
Inner Element

Would that be right?

or,

Parent
Child

as what below says.

4

Its a parent - child relationship…

BTW, closing the top <div> at the end of <span> is awkward to read because one does not know that the <div> has been closed without scrolling the code box and looking for it. Indented tags, just like indented CSS, is waaay easier to read.

5

I don’t understand what you mean.

6

I’ve amended it to read like that.

1 Like
7

Did you understand the part about the parent - child relationship? That’s my response to your question.

The bit about indented tags, especially those with inline styles, is an “extra” tidbit that I threw in. Look at your own screen and think about what I have very briefly described. It’s easier and cleaner to scroll vertically to see the code than it is to have to scroll horizontally to see code that is hidden offscreen (or out of the box, in the forum) to the right. Uniformly indented code, one level per indent, is a treat to read compared to the stuff that a lot of CMS’s churn out. I’m just rambling. :slight_smile:

8

Don’t you find this easier to read? I know I do

HTML:

<div>
    <span>[ ENJOY THE MUSIC ]</span>
</div>

CSS:

div {
  width: 256px; 
  height: 150px;
  cursor: pointer;
  text-align: center;
  line-height:114px;
  background-color:#000000;
  border-radius: 50px; 
  border: 5px solid #0059dd;
}

span {
  font-family: "Times New Roman"; 
  font-size: 20px;
  color: #0059dd;
}
1 Like
9

Yes, but not for blogger, I use inline for that. making grids I like using css.

10

The example is bad as there is no need for the span at all and the div would not be the correct tag for a paragraph either.

I realise the example may be contrived but it helps if it is semantically correct for points of discussion:)

2 Likes
11

ronpat says they are the correct tags.

12

Sometimes ronpat gives in too easily. Initially, I said that a semantically appropriate block tag would be appropriate, but you weren’t interested, so … what can I say.

1 Like
13

What would be the correct tags then?

14

If not div and span, then what?

15

I thought I had it set up correctly, now you’re telling me it’s not.

16

What would I change this to then? For it to be correct?

<div style="width: 256px; height: 150px; cursor: pointer; text-align: center; background-color:#000000;border-radius: 50px; border: 5px solid #0059dd;">
    <span style="font-family: New Times Roman; font-size: 20px;color: #0059dd;line-height:114px; ">[ ENJOY THE MUSIC ]</span>
</div>
17

Knowing only what you’ve told us about a web page that has only a side bar as its content, <div> for the outer element and <p> for the inner element would be my choices.

You play it very “close to the vest” as we say which makes it tough to guess the context.

18

So, just change span to p?

19

Better still, why not just omit the <p>? How does that sound.? No p, and no span.

20

But then I’d be putting all this code into div? You said it didn’t look good like that?
font-family: New Times Roman; font-size: 20px;color: #0059dd;line-height