How can I optimise this css code for not writing same css code several times in html?

Question

I have an input box. Where the values are already defined in or it will be generated in some other rules that's why they all have individual id's.

html code:

<input class="box" type="text" style="width:8%; text-align:center" id="a" value="A" readonly="true"/>
<input class="box" type="text" style="width:8%; text-align:center" id="b" value="B" readonly="true"/>
<input class="box" type="text" style="width:8%; text-align:center" id="c" value="C" readonly="true"/>
<input class="box" type="text" style="width:8%; text-align:center" id="d" value="D" readonly="true"/>
<input class="box" type="text" style="width:8%; text-align:center" id="e" value="E" readonly="true"/>

now suppose, i've to decrease the size of the width 8 to 6. Then I've to write width:6%' 5 times, which is redundant thus I don't wanna use it. Is there any way I can improve this or write any loop for this?

For cases like this (where you have styles for multiple elements), it's best to use an external stylesheet or a <style> tag; then you can use a CSS selector like .box {} or #a, #b, #c, #d, #e {} to apply styles to all of your inputs — Matthew Schlachter
– Matthew Schlachter, Commented May 19, 2020 at 14:49
.box { width: 6%; text-align:center; } instead of inline styles — Roko C. Buljan
– Roko C. Buljan, Commented May 19, 2020 at 14:49

ROOT · Accepted Answer · 2020-05-19 14:57:11Z

3

Your HTML elements already have a CSS class attribute, so you can style them like this:

.box {
  width: 6%;
  text-align:center;
}

<input class="box" type="text" id="a" value="A" readonly="true"/>
<input class="box" type="text" id="b" value="B" readonly="true"/>
<input class="box" type="text" id="c" value="C" readonly="true"/>
<input class="box" type="text" id="d" value="D" readonly="true"/>
<input class="box" type="text" id="e" value="E" readonly="true"/>

edited May 19, 2020 at 14:57

answered May 19, 2020 at 14:52

ROOT

11.7k5 gold badges35 silver badges49 bronze badges

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

Comments

Wes · Accepted Answer · 2020-05-19 15:03:35Z

0

The whole point of CSS classes is exactly to handle this situation. Rather than put style="width:8%; text-align:center" in each tag, you could use your box class to change all of them at once.

INPUT.box {
  width: 8%;
  text-align: center;
}

The trick, of course, is to use the right CSS selector to access the things you want to change as a group. INPUT.box means "all INPUT elements with the class box"

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

edited May 19, 2020 at 15:03

answered May 19, 2020 at 14:50

Wes

1,0906 silver badges14 bronze badges

2 Comments

Edric Over a year ago

Property values don't work that way - you're supposed to specify the values without quotes.

Wes Over a year ago

Good Lord, it really IS Monday. Thanks, fixing my answer. Much appreciated.

Collectives™ on Stack Overflow

How can I optimise this css code for not writing same css code several times in html?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related