Tutorial 4: Less and Css

I have already shown you that you can modify the css of your article. Adding classes and changing the layout to fit your needs. CSS can be very finiky so if you do change something just ensure that it works well in the preview, on all screens (you can shrink your browser appropriately). CSS has many, many attributes and there is literally no way I can show you everything you could possibly do. But please keep in mind

1. If you find yourself writing the same rule over and over on all your articles. Let me know and I will add it to the default css. This is ultimately better because if we want to change the rule for a new site, we will simply have to do it in one file (the default css file) as opposed to dozens if not hundreds of articles individual css modifiers.

2. I hesitated to add this feature. I wanted you to have complete control over your content, it is my hope that you never really need to use this, that most of your needs are handled simply through the default css. Making sure the site and your articles have a consistant, simple, and elegant feel is more important than experimenting with crazy options. Just because you can doesn't mean you should. Having said that, I may remove it/limit it for some authors so that they don't get crazy with their articles.

3. Feel free to use general rules, all of your css modifications will be scoped within this articles "div" and this article alone.

Here is the syntax

Changing the color of the first h3 in your article

h3:first-of-type {
    color: blue;
}

selector:second-selector {
    attribute: rule;
    second-attribut: rule2;
}

If something isn't doing what it's supposed to do, then you need to check the syntax because the less parser will fail if it is wrong.

Clearing your floats appropriately

Floating objects is a great way to have them move content (say an image) to one side and have text wrap around it beautifully of the screen, but there is the caviat that it will break out of it's containing div

By adding the uk-clearfix selector, the wrapper stays within its wrapping divider.

Margins create space outside of an element

Look at our blue image, it has 15px worth of space around it.

Padding creates space inside of an element

Look at our blue image text, it is 15px worth of space from the edge of the box;