How to make all boxes visible

[Geldon]

I want to make all boxes around all elements visible. I do this because I am re-learning css and want to be able to see the boxes.( I guess this is called the box model? Not sure if that is the proper terminology.) What I currently do is just add
border-style: solid;
border-width: 1px;
<code></code>

To everything, but this is tedious when you have 100s of styles. Is there a program or browser plugin I can use to turn off/turn on the box models? With firebug, I can highlight various boxes, but I cannot force all to be visible at once – only the highlighted versions.

If there is no program available, css-based solutions would be helpful as well. But since border styles are not inherited, I am not sure what to do.

[jurotek]

You can apply border property with universal selector like so

*{border:1px solid red}
<code></code>

[chrisburton]

* { border: 1px solid red; }

@jurotek Don’t forget to end with a semicolon!

[Alen]

Maybe this can give you some ideas

http://codepen.io/alenabdula/pen/mdvJk

[Alen]

Don’t forget to end with a semicolon!

If that’s the last property declaration you don’t need a semicolon, so this

.row {
   display:block;
   padding:10px;
   margin: 40px 40px
}

Will work just fine. CSS and HTML are so forgiving in this way as they fail silently.

Watch this, skip to 6min mark for full talk or about 20min in related to this topic
http://vimeo.com/79556632

You should really watch the full talk tho!!! Highly recommended.

[nixnerd]

If that’s the last property declaration you don’t need a semicolon

Alen beat me to it. I was going to say this but I always add one because if I add properties… I always do it below. Saves me the hassle of having to do it later.

[Alen]

I always close with ; I’m OCD like that!

[nixnerd]

I always close with ; I’m OCD like that!

Dude, especially if you nest in SCSS. Shit can hairy real fast.

[chrisburton]

If that’s the last property declaration you don’t need a semicolon, so this

What?! I never knew this.

[Alen]

I guess parser reads values like this, finds

margin then sets the value 40px then 40px then sees closing } it ends the statement. Values have been set already and the last value is not followed by any illegal character. CSS is cool like that.

[Alen]

Sites like http://cssbeautify.com will add those for you. See “Automatic Semicolon”

[Geldon]

Thanks, jurotek.
And I didn’t know about the optional semi-colon either in the following interesting discussion.

For my future reference, what is the terminology to refer to the boxes of all elements?

[Alen]

The * {} is EVERYTHING selector.

This will select body, all div‘s and everything else. This will indeed show you everything, but again you wouldn’t know which one is which. Are you looking at the div or li, you wouldn’t know. You’re just making it more complicated. If you’re trying to learn layout go check out http://learnlayout.com.

There’s also http://learn.shayhowe.com/html-css/ and http://learn.shayhowe.com/advanced-html-css/

[Geldon]

I understand the universal selector, but didn’t consider applying it here.

But I was just asking in my previous question if there was a term for the borders of all page elements.

Thanks for the links.

[Author]

Posts