This post was written by the MindSumo design team to help anyone who’s starting to learn CSS and HTML. If you have any requests for a simple explanation of another CSS property, feel free to ask for it in the comments! [Disclaimer: we are still learning ourselves]
DIVS
HTML pages are essentially an arrangement of elements, usually <div>s. It’s helpful to plan out divs as a basic outline before you start styling. Elements like <p>, text, <b>, bold, and <h>, header, have default styling properties like size, and margins, that make them more difficult to style. However, <h> elements are helpful to search engines to understand the structure and hierarchy of your page!
CLASSES
You can style a div by giving it a class. Classes are usually declared like this in html - <div class=”my_awesome_class”>content</div>. In the css file you declare it like this - .my_class{height:100px;}
HEIGHT/WIDTH
The size of divs depends on their content unless you specify dimensions. You can specify them with height/width properties. Max/Mins can also be used… “min-height: 250px;” for example, allows the div to expand beyond 250px but constrains it to that 250px even if there’s no content inside.
DISPLAY
Things are default “display: block;”, which means a div will be displayed under the one that comes before it. Inline-block puts things in line like the orange or green blocks in the diagram below. For divs to look like this, you have to put the inline-block property on both divs. It’s important that when you put things inline, that you use the “vertical-align: top” property to make sure each element is glued to the top.
Note: Vertical align is actually a property to align pictures and text. It’s a really quirky property, so watch out!
POSITION
The position attribute is default “relative”, meaning it will move depending on the size and position of other divs. Making things absolute or fixed is usually unnecessary. But, if you’re totally sold on absolute position, you then have to designate where it should be - top: 10px, right: 20px, bottom, left etc. Make sure to test your layout by resizing your browser window to see if the element moves or behaves as expected.
PADDING vs. MARGINS
Padding puts space within a div, and adds to overall height/width dimensions. Margins put space outside a div and do not affect height/width. You can declare a margin like this - “margin: 5px 10px 15px 20px;” (5 - top, 10 - right, 15 -bottom, 20-left) … it’s just clockwise. If you want to do individual properties you can like this: padding-bottom: 5px; It’s best practice to do it with all 4 numbers if you have 2 or more being declared (e.g. margin: 5px 0 2px 0). One good trick to know is that margin: 50px 5px; actually means 50 top/bottom and 5 left/right.
FONTS & TEXT
font-size, color, font-weight, line-height, and font-style are the most important font properties. font-weight: bold… and font-style: italic are helpful to know. Line-height determines the spacing between lines. text-align can be right, center, left and affects text-alignment for all children divs. Text-transform is also a cool one to know. “text-transform: uppercase;” does what you expect.
FLOATING
Floating takes things out of “the flow” meaning that their position is not determined by previous divs. It should usually be avoided at all costs because it makes positioning other elements really hard. Text-align usually gets things to where you want them. If that doesn’t work because the div has several pieces of content, use margin: 0 auto; to place it in the center of the parent div.
<span>’s & <a>’s
Spans are a way to keep text or other elements inline. They can also help you break up parts of a sentence if you want to give it a special color, weight, etc. Links act like spans, so they aren’t defaulted to “display: block”. That means they’ll do some weird things sometimes and line up unnaturally with neighboring divs/spans. If you care about styling on hover, active, or visited links, make sure to use :hover and :visited and :active as sub-css properties. For example .my_profile_link:hover{color:pink;}
TABLES
Tables can get messy sometimes, so I usually only use them when necessary. They’re structured with <table>,<th>(header),<tr> (row), and <td> (cell). You can make a cell span 2 columns with the colspan=”2” attribute.
BROWSER COMPATIBILITY
There are a few properties that need multiple attributes (moz and webkit) to account for different browsers. Here’s a list of the important ones: border-radius, background (gradients), box-shadow. You usually declare 3 like this -
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
BORDERS
Borders can be styled this way - “border: 2px solid black;” (thickness, type, color). You can also put it on one side of the div like this - “border-top: 1px dashed grey;”
SHADOWS
Shadows are declared - “box-shadow: 1px 2px 5px #b5b5b5;” (horizontal shadow size, vertical shadow size, spread, color)
ELLIPSIS (…)
Whenever text needs to be constrained to one line and can’t overflow you need to use these properties:
width: __px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
Note: It’s impossible to put ellipsis on anything but the first line of text. If you want to put it on the third line, for example, you’re going to have to use javascript!
NESTING CLASSES
Nesting is nice from an organizational perspective but becomes a HUGE pain when you want to use that css elsewhere, but you don’t have the div nested in the right parent div. I usually avoid nesting css classes so that they can be used universally.
STYLING ID’s
Id’s are used for Javascript purposes and start with a “#” instead of a “.” in the CSS file. Feel free to style an ID if it’s used once. If you’re using that ID elsewhere, giving it a class might be the easiest way to style it.
