24consulting's favorite css pages, page 1

Last login: 12 days ago24consulting: 24consulting is a 27 year old guy from Verona, Italy.; Likes 105 pages, 2 videos, 1 photo • 4 fans; Member since Aug 08, 2007

Favorites » His css pages

Display:
List
• Grid

Back to Basics: A Beginners guide to starting a CSS Document: Apr 28, 2:14am 1 review css
http://www.cssjuice.com/back-to-basics-a-beginners-guide-to-starting-a-css-do...; From the page: "Back to Basics: A Beginners guide to starting a CSS Document Hereā€s a tip for you. Never let the browser to decide what your site will look like. What weā€ll go over today is a quick and easy way of defining styles for common html tags that should dramatically cut down on the amount of guess work a browser will have to do to interpret your website. As you all know some of our more popular browsers **cough** IE **cough** tend not to display things as well as we want on their own. The good news is that itā€s really simple to fix. The bad news is that itā€ll take a little bit of typing to get it down to the way you want. I hope youā€ve warmed your fingers up a bit so that you donā€t get a cramp. Letā€s get startedā€¦ Now, I like to start with the tag when Iā€m creating my style sheet. It really doesnā€t matter what order you go in, but I generally go down the list of whatā€s first presented on the page. body { } First up letā€s define the margins and the padding of the body so that weā€ll get a nice even border across all browsers. body { margin: 0px; padding: 0px; } What the above does is tell the browser to make all margins and all padding zero pixels across the entire body (meaning our website can go full screen all the way out to the edges). Next weā€ll go ahead and define our fonts and background color that we want the browser to use. body { margin: 0px; padding: 0px; background-color: #FFFFFF; font: normal 0.92em Arial, Helvetica, sans-serif; } With the font, Iā€ve used a little bit of short hand just to keep things compact and simple. If you arenā€t familiar with this, itā€s perfectly ok to do whatā€s comfortable for you. With that out of the way, letā€s move on to our next set of tags. For me this is either a tag with tags within it or a , depending on what type of site Iā€m doing. Now is a good time to go ahead and define what we need for these two. td { font: normal 0.92em Arial, Helvectica, sans-serif; } div { margin: 0px; padding: 0px; font: normal 0.92em Arial, Helvectica, sans-serif; } Youā€ll notice that Iā€ve zeroed out the margin and padding on all tags. Why would I do this? Simple, not all browsers use the same settings to display these. Doing this we bend the browsers to our will. I prefer zero when doing all CSS layouts, but you can set them to whatever works best for you. Next on the list will be our handy dandy links, but before we jump into these Iā€d like to say a few things. Links are a little different animal when it comes to redefining them. You could just make a standard ā€oeaā€¯ class in your CSS, but that doesnā€t cover all aspects of the link itself. Instead weā€ll use whatā€s called ā€oepseudo-classesā€¯ for our linking. a:link { color: #0000CC; text-decoration: underline; } a:hover { color: #0000CC; text-decoration: none; } a:visited { color: #551A8B; } What this basically means is that weā€ll be able to control various states of a link like itā€s normal state (a:link), itā€s mouse over effect (a:hover), and itā€s state after itā€s been clicked (a:visited). I set all my links to default blue with an underline. Then when you put your mouse over them they stay blue, but the underline disappears. Once itā€s been clicked, just so you know youā€ve clicked it before, I chose to use a dark purple. Like always you are free to use whatever effects/colors youā€d like. This is just to give you a starting block to build upon. Now weā€ll move onto the next tag weā€ll redefine, to make appear standard across all the browsers, the *lt;p> paragraph tag. For some reason there is a huge difference in the margins created by the in FireFox and Internet Explorer. Weā€re going to fix that. p { margin: 10px 0px; } Finally weā€ll move out to our head tags . The ā€oexā€¯ would be replaced by a number to suit your needs of course. These arenā€t really used as often as they used to e, but they still hold some value SEO wise. So, just to be sure, weā€ll go ahead and include how we want them to look instead of the greatly oversized bold black text they normally default to. h1, h2, h3 { margin: 0px; padding: 0px; } h1 { font-size: 1.5em; } h2 { font-size: 1.3em; } h3 { font-size: 1.1em; } For the sake of time, and a lot of reading weā€ll end it here. What you should end up with is a very basic CSS document that addresses a few issues that you may encounter when browser checking your new website. body { margin: 0px; padding: 0px; background-color: #FFFFFF; font: normal 0.92em Arial, Helvetica, sans-serif; } td { font: normal 0.92em Arial, Helvectica, sans-serif; } div { margin: 0px; padding: 0px; font: normal 0.92em Arial, Helvectica, sans-serif; } a:link { color: #0000CC; text-decoration: underline; } a:hover { color: #0000CC; text-decoration: none;