StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>A list has the bullet points by default, and also some margins and padding.</p> <pre><code><ul> <li><a href="">list item 1</a></li> </ul> </code></pre> <p>With CSS you can change the way the list looks.</p> <pre><code><style> /* the styles go in between the style tag */ </style> </code></pre> <p>You can use CSS to grab each element in the list and change the properties.</p> <p>For example I usually start by removing the list style, margin and padding.</p> <pre><code>ul { list-style:none; margin:0; padding:0; } </code></pre> <p>Next you can change the link or anchor tags to have a width and height and background colour.</p> <p>Links by defaul are inline elements, which means they don't force a new line but flow inline.. I need them to be displayed as a block element so I can style it.</p> <pre><code>ul a:link, ul a:visited { display:block; width:100px; height:20px; line-height:20px; background:blue; } </code></pre> <p>Now when the user hovers the mouse over the link you can change its colour again, CSS stacks so all the styles you wrote above will still apply but we can over write whatever we choose.</p> <pre><code>ul a:hover { background:orange; } </code></pre> <p>Some reading: <a href="http://www.w3schools.com/css/css_list.asp" rel="nofollow">http://www.w3schools.com/css/css_list.asp</a> </p> <p>Once you know how to select elements using CSS, you will be able to create pretty much anything.</p> <p>You can give HTML elements a unique id or a class. An id is used to select a single element, on it's own.</p> <p>But if you have a lot of elements, a class is used.</p> <p>"#" for Ids and a "." For classes.</p> <p>Example:</p> <pre><code><div id="something">some text wrapped in a div with an id</div> <div class="something">a div with a class</div> <div class="something">a div with a class</div> <div class="something">a div with a class</div> <style> #something { background:red; } .something { background:blue; } </style> </code></pre> <p>The startings <a href="http://jsbin.com/oyibok/5/edit" rel="nofollow">http://jsbin.com/oyibok/5/edit</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload