Html / css question

[Special T]

This is probably a stupid question but I haven't taken any formal classes to learn html or css so I honestly don't know the answer. Why does html/css code extend to mutiple lines? Why doesn't it just get entered left to right? Also why are certain portions of the code indented?

P {
text-align: center;
color: red;
}

Wouldn't it look better like this and use less lines of code?
P {text-align: center; color: red;}

Is there any reason I shouldn't be coding left to right?

[mz]

Your second example is perfectly valid and works as expected...

The only reason one should prefer to do it as in the first example is because it becomes much easier to read and edit later.

The second example will become an infinitely huge pain in the ass to edit once it starts to become bigger.

[Special T]

Thank you for the clarification.

It's probably best to start practicing html the same way most people code it. Plus it will be easier for other people to read if I code it the normal way. I just have to get used to it since this is new to me.

[mz]

There is no "normal way" or "other people's way"...

It's totally fine to do it as you like it when you *really* know there will only be 2 properties forever.

But, compare this:

Code Select Expand

example {
background: #df8b9d;
background: -webkit-gradient(linear, left top, left bottom, from(#df8b9d), to(#d46179));
float: left;
height: 318px;
margin: 0 10px 8px 0;
padding: 20px;
width: 260px;
border: 2px solid #000;
box-sizing: border-box;
color: #fff;
font-size: 1.5em;
font-weight: bold;
text-align: center;
}

To this abomination:

Code Select Expand

example { background: #df8b9d; background: -webkit-gradient(linear, left top, left bottom, from(#df8b9d), to(#d46179)); float: left; height: 318px; margin: 0 10px 8px 0; padding: 20px; width: 260px; border: 2px solid #000; box-sizing: border-box; color: #fff; font-size: 1.5em; font-weight: bold; text-align: center; }

You'll want to kill yourself each time you want to tweak those values or insert/remove properties.

[Jorpho]

Whether or not the opening brace should go on its own line seems to be one of those religious wars akin to putting two spaces after a period.

[USC]

You could always maintain a readable version of your CSS (with spacing, comments, etc), then put it through a CSS Compressor for use on the actual site, if you're keen on having a small(er) file that loads quick(er).

[filler]

You could always maintain a readable version of your CSS (with spacing, comments, etc), then put it through a CSS Compressor for use on the actual site, if you're keen on having a small(er) file that loads quick(er).

You could also leave your CCS file readable and optimize the image assets used on the site which will probably have a much greater impact on loading speed.

[USC]

Why not both?

I've seen CSS and Javascript compression have a noticeable impact on site speed, especially on Wordpress templates with umpteen (unnecessary) different files for each. Optimizing images will almost always do more for you, but the extra few seconds it takes to run your output CSS/Javascript files through a compressor has been worth it in my experience.

[RyanfaeScotland]

Working with CSS is great fun, you can do a lot of really cool stuff with it relating to colouring and layouts. The W3C's website is a great resource for getting started and as a reference later: http://www.w3schools.com/css/

A good tip for working with it is to use the developer tools in your browser (F12) and do tweaks there before messing with the CSS, saving and reloading the page as it is a lot quicker for trialling different values and gives you a real time update as to how the site will look as a result of your changes.

The developer tools also let you know which of your CSS rules are in effect and what file they are located in if there are multiple files in effect (which is almost always the case).

There is also a validator which can help you find issues in your CSS if something isn't working properly: https://jigsaw.w3.org/css-validator/ (although the dev tools may also highlight it).

If you are a person who likes to work with best practices or standards then most of the things in this list ring true to myself, although none of it is set in stone and you'll find yourself what you feel is really important and what isn't: http://code.tutsplus.com/tutorials/30-css-best-practices-for-beginners--net-6741