Creating style alias in CSS on HTML page

Question

I am wanting to do selectively stop the line feeds associated with the < p> command on a dynamically built HTML page and am using a style to do this. I know that

   p {
   display: inline
    }

can do this, but I do not want to continually add this tag throughout the page.

Is there a method where I can create an alias of the p tag, or somehow create another tag that will invoke the style.

For instance (and I know that this code won't work), something like

  <style type="text/css">
  stop-p-lf {
     p {
       display: inline
     }
  }
  </style>

then in my HTML I just use the tag like this..

  <stop-p-lf>the next p tag will not line feed <p> 
   but the one after this</stop-p-lf> <p> will

I'm hoping to use these tags to ease readability and to reduce the amount of coding throughout the html.

Is there a way of doing this?

Blady214 · Accepted Answer · 2016-02-02 07:41:29Z

1

You cannot create your own tags but you can do it using CSS classess. For example:

.stop-p-lf p { display: inline; }

Then in HTML:

<div class="stop-p-lf"><p>This will be inline</p></div><p>And this don't</p>

answered Feb 2, 2016 at 7:41

Blady214

7396 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Todd Moore Over a year ago

Strictly speaking you can create elements with javascript, so that's not entirely correctly. document.createElement('x-foo'), then instantiate it and add it to the DOM, and indeed the element outlined above is entirely valid. However, obviously it's better to use a class in this instance.

Blady214 Over a year ago

@ToddMoore in HTML you can also create elements in almost the same way but it's not valid with W3C.

Todd Moore Over a year ago

That's not correct, you can't just create an element in static HTML, you are right it would not be valid. However, it's entirely valid to create elements dynamically via javascript, particularly now with the WebComponent specification. My point was it's not correct to say you cannot create your own tags. It gives the impression that the DOM is fixed and inflexible when it is not.

southskies Over a year ago

This seems the simplest solution... also considered templates and the webcomponent function

Mr Lister · Accepted Answer · 2016-02-09 08:35:21Z

0

Just do it like that :

<span class="stop-p-lf"><p>Some text here</p></span><p>And some here</p>

This way you can select which <p> tag you want to using CSS :

p{
    color:blue;
}
.stop-p-lf p{
    color:red;
}

See this : https://jsfiddle.net/faeh5szy/

edited Feb 9, 2016 at 8:35

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Feb 2, 2016 at 7:49

Levent Bayrakli

71 silver badge5 bronze badges

Collectives™ on Stack Overflow

Creating style alias in CSS on HTML page

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related