Mastering CSS Coding: Getting Started

Advertisement

CSS has become the standard for building websites in today’s industry. Whether you are a hardcore developer or designer, you should be familiar with it. CSS is the bridge between programming and design, and any Web professional must have some general knowledge of it. If you are getting your feet wet with CSS, this is the perfect time to fire up your favorite text editor and follow along in this tutorial as we cover the most common and practical uses of CSS.

Overview: What We Will Cover Today

We’ll start with what you could call the fundamental properties and capabilities of CSS, ones that we commonly use to build CSS-based websites:

  1. Padding vs. margin
  2. Floats
  3. Center alignment
  4. Ordered vs. unordered lists
  5. Styling headings
  6. Overflow
  7. Position

Once you are comfortable with the basics, we will kick it up a notch with some neat tricks to build your CSS website from scratch and make some enhancements to it.

  1. Background images
  2. Image enhancement
  3. PSD to XHTML

1. Padding vs. Margin

Most beginners get padding and margins mixed up and use them incorrectly. Practices such as using the height to create padding or margins also lead to bugs and inconsistencies. Understanding padding and margins is fundamental to using CSS.

What Is Padding and Margin?

Padding is the inner space of an element, and margin is the outer space of an element.

The difference becomes clear once you apply backgrounds and borders to an element. Unlike padding, margins are not covered by either the background or border because they are the space outside of the actual element.

Take a look at the visual below:

Box Model

Padding/Margin Values
Margin and padding values are set clockwise, starting from the top.

Practical example: Here is an <h2> heading between two paragraphs. As you can see, the margin creates white space between the paragraphs, and the padding (where you see the background gray color) gives it some breathing room.

Box Model - Example

Margin and Padding Values

In the above example of the heading, the values for the margin and padding would be:

margin: 15px 0 15px 0;
padding: 15px 15px 15px 15px;

To optimize this line of code further, we use an optimization technique called “shorthand,” which cuts down on repetitive code. Applying the shorthand technique would slim the code down to this:

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

Here is what the complete CSS would look like for this heading:

h2 {
background: #f0f0f0;
border: 1px solid #ddd;
margin: 15px 0;
padding: 15px;
}

Quick Tip

Keep in mind that padding adds to the total width of your element. For example, if you had specified that the element should be 100 pixels wide, and you had a left and right padding of 10 pixels, then you would end up with 120 pixels in total.

100px (content) + 10px (left padding) + 10px (right padding) = 120px (total width of element)

Margin, however, expands the box model but does not directly affect the element itself. This tip is especially handy when lining up columns in a layout!

Additional resources:

2. Floats

Floats are a fundamental element in building CSS-based websites and can be used to align images and build layouts and columns. If you recall how to align elements left and right in HTML, floating works in a similar way.

According to HTML Dog, the float property “specifies whether a fixed-width box should float, shifting it to the right or left, with surrounding content flowing around it.”

Float

The float: left value aligns elements to the left and can also be used as a solid container to create layouts and columns. Let’s look at a practical situation in which you can use float: left.

Float to Create Layouts

The float: right value aligns elements to the right, with surrounding elements flowing to the left.

Quick tip: Because block elements typically span 100% of their parent container’s width, floating an element to the right knocks it down to the next line. This also applies to plain text that runs next to it because the floated element cannot squeeze in the same line.

Floating right bug

You can correct this issue in one of two ways:

  1. Reverse the order of the HTML markup so that you call the floated element first, and the neighboring element second.
    Floating right fix
  2. Specify an exact width for the neighboring element so that when the two elements sit side by side, their combined width is less than or equal to the width of their parent container.
    Floating right fix

Internet Explorer 6 (IE6) has been known to double a floated element’s margin. So, what you originally specified as a 5-pixel margin becomes 10 pixels in IE6.

Double Margin Bug - IE6

A simple trick to get around this bug is to add display: inline to your floated element, like so:

.floated_element {
float: left;
width: 200px;
margin: 5px;
display: inline; /*--IE6 workaround--*/
}

Additional resources:

3. Center Alignment

The days of using the <center> HTML tag are long gone. Let’s look at the various ways of center-aligning an element.

Horizontal Alignment

You can horizontally align text elements using the text-align property. This is quite simple to do, but keep in mind when center-aligning inline elements that you must add display: block. This allows the browser to determine the boundaries on which to base its alignment of your element.

.center {
text-align: center;
display: block; /*--For inline elements only--*/
}

To horizontally align non-textual elements, use the margin property.

The W3C says, “If both margin-left and margin-right are auto, their used values are equal. This horizontally centers the element with respect to the edges of the containing block.”

Horizontal alignment can be achieved, then, by setting the left and right margins to auto. This is an ideal method of horizontally aligning non-text-based elements; for example, layouts and images. But when center-aligning a layout or element without a specified width, you must specify a width in order for this to work.

To center-align a layout:

.layout_container {
margin: 0 auto;
width: 960px;
}

To center-align an image:

img.center {
margin: 0 auto;
display: block; /*--Since IMG is an inline element--*/
}

Vertical Alignment

You can vertically align text-based elements using the line-height property, which specifies the amount of vertical space between lines of text. This is ideal for vertically aligning headings and other text-based elements. Simply match the line-height with the height of the element.

Line-height

h1 {
font-size: 3em;
height: 100px;
line-height: 100px;
}

To vertically align non-textual elements, use absolute positioning.

The trick with this technique is that you must specify the exact height and width of the centered element.

With the position: absolute property, an element is positioned according to its base position (0,0: the top-left corner). In the image below, the red point indicates the 0,0 base of the element, before a negative margin is applied.

By applying negative top and left margins, we can now perfectly align this element both vertically and horizontally.

Absolute Position

Here is the complete CSS for horizontal and vertical alignment:

.vertical {
width: 600px; /*--Specify Width--*/
height: 300px; /*--Specify Height--*/
position: absolute; /*--Set positioning to absolute--*/
top: 50%; /*--Set top coordinate to 50%--*/
left: 50%; /*--Set left coordinate to 50%--*/
margin: -150px 0 0 -300px; /*--Set negative top/left margin--*/
}

Related articles:

4. Ordered vs. Unordered Lists

An ordered list, <ol>, is a list whose items are marked with numbers.

An unordered list, <ul>, is a list whose items are marked with bullets.

By default, both of these list item styles are plain and simple. But with the help of CSS, you can easily customize them.

To keep the code semantic, lists should be used only for content that is itemized in a list-like fashion. But they can be extended to create multiple columns and navigation menus.

Customizing Unordered Lists

Plain bullets are dull and may not draw enough attention to the content they accompany. You can fix this with a simple yet effective technique: remove the default bullets and apply a background image to each list item.

Here is the CSS for custom bullets:

ul.product_checklist {
list-style: none; /*--Takes out the default bullets--*/
margin: 0;
padding: 0;
}
ul.product_checklist li {
padding: 5px 5px 5px 25px; /*--Adds padding around each item--*/
margin: 0;
background: url(icon_checklist.gif) no-repeat left center; /*--Adds a bullet icon as a background image--*/
}

Custom List Items

Resources for list items:

Using Unordered Lists for Navigation

Most CSS-based navigation menus are now built as lists. Here is a breakdown of how to turn an ordinary list into a horizontal navigation menu.

HTML: begin with a simple unordered list, with links for each list item.

<ul id="topnav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

CSS: we remove the default bullets (as we did when we made custom bullets) by specifying list-style: none. Then, we float each list item to the left so that the navigation menu appears horizontal, flowing from left to right.

ul#topnav {
list-style: none;
float: left;
width: 960px;
margin: 0; padding: 0;
background: #f0f0f0;
border: 1px solid #ddd;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #ddd;
}
ul#topnav li a {
float: left;
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
ul#topnav li a:hover {
background: #fff;
}

Additional resources:

5. Styling Headings

The heading HTML tag is important for SEO. But regular headings can look dull. Why not spice them up with CSS and enjoy the best of both worlds?

Once you have the main styling properties set for your headings, you can now nest inline elements to target specific text for extra styling.

Styling Headings

Your HTML would look like this:

<h1><span>CSS</span> Back to Basics <small>Tips, Tricks, &amp; Practical Uses of CSS</small></h1>

And your CSS would look like this:

h1 {
font: normal 5.2em Georgia, "Times New Roman", Times, serif;
margin: 0 0 20px;
padding: 10px 0;
font-weight: normal;
text-align: center;
text-shadow: 1px 1px 1px #ccc; /*--Not supported by IE--*/
}
h1 span {
color: #cc0000;
font-weight: bold;

}
h1 small {
font-size: 0.35em;
text-transform: uppercase;
color: #999;
font-family: Arial, Helvetica, sans-serif;
text-shadow: none;
display: block; /*--Keeps the small tag on its own line--*/
}

Additional typography-related resources:

6. Overflow

The overflow property can be used in various ways and is one of the most useful properties in the CSS arsenal.

What Is Overflow?

According to W3Schools.com, “the overflow property specifies what happens if content overflows an element’s box.”

Take a look at the following examples to see how this works.

Overflow

Visually, overflow: auto looks like an iframe but is much more useful and SEO-friendly. It automatically adds a scroll bar (horizontal, vertical or both) when the content within an element exceeds the element’s box or boundary.

The overflow: scroll property works the same but forces a scroll bar to appear regardless of whether or not the content exceeds the element’s boundary.

And the overflow: hidden property masks or hides an element’s content if it exceeds the element’s boundary.

Quick tip: have you ever had a parent element that did not fully wrap around its child element? You can fix this by making the parent container a floated element.

In some cases, though, floating left or right is not a workable solution — for example, if you want to center-align the container or do not want to specify an exact width. In this case, use overflow: hidden on your parent container to completely wrap any floated child elements within it.

Overflow

Additional resources:

7. Position

Positioning (relative, absolute and fixed) is one of the most powerful properties in CSS. It allows you to position an element using exact coordinates, giving you the freedom and creativity to design out of the box.

You have to do three basic things when using positioning:

  1. Set the coordinates (i.e. define the positioning of the x and y coordinates).
  2. Choose the right value for the situation: relative, absolute, fixed or static.
  3. Set a value for the z-index property: to layer elements (optional).

With position: relative, an element is placed in its natural position. For example, if a relatively positioned element sits to the left of an image, setting the top and left coordinates to 10px would move the element just 10 pixels from the top and 10 pixels from the left of that exact spot.

Relative positioning is also commonly used to define the new point of origin (the x and y coordinates) of absolutely positioned nested elements. By default, the base position of every element is the top-left corner (0,0) of the browser’s view port. When you give an element relative positioning, then the base position of any child elements with absolute positioning will be positioned relative to their parent element — i.e. 0,0 is now the top-left corner of the parent element, not the browser’s view port.

Relative Position

An element with a value of position: absolute can be placed anywhere using x and y coordinates. By default, its base position (0,0) is the top-left corner of the browser’s view port. It ignores all natural flow rules and is not affected by surrounding elements.

The base position of an element with a position: fixed value is also the top-left corner of the browser’s view port. The difference with fixed positioning is that the element will be fixed to its location and remain in view even when the user scrolls up or down.

The z-index property specifies the stack order of an element. The higher the value, the higher the element will appear.

Think of z-index stacking as layering. Check out the image below for an example:

z-index

Additional resources:

Adding Flavor With CSS

Now that you understand the basics, step up your game by adding a bit of flavor to your CSS. Below are some common techniques for enhancing and polishing your layout and images. We’ll also challenge you to create your own website from scratch using pure CSS.

9. Background Images

Background images come in handy for many visual effects. Whether you add a repeating background image to cover a large area or add stylish icons to your navigation, the property makes your page come to life.

Note, though, that the default print setting excludes the background property. When creating printable pages, be mindful of which elements have background images and include image tags.

Using Large Backgrounds

With monitor sizes getting bigger and bigger, large background images for websites have become quite popular.

Check out this detailed tutorial by Nick La of WebDesigner Wall on how to achieve this effect:

Large Backgrounds in Web Design

Also be sure to read the article on Webdesigner Depot about the “Do’s and Don’ts of Large Website Backgrounds.”

Text Replacement

You may be aware that not all standard browsers yet support custom fonts embedded on a website. But you can replace text with an image in various ways. One rather simple technique is to use the text-indent property.

Most commonly seen with headings, this technique replaces structured HTML text with an image.

h1 {
background: url(home_h1.gif) no-repeat;
text-indent: -99999px;
}

You may sometimes need to specify a width and height (as well as display: block if the element is inline).

.replacethis {
background: url(home_h1.gif) no-repeat;
text-indent: -99999px;
width: 100%;
height: 60px;
display: block; /*--Needed only for inline elements--*/
}

Articles on text replacement:

CSS Sprites

CSS Sprites is a technique in which you use background positioning to show only a small area of a larger single background image (the larger image being actually multiple images laid out in a grid and merged into one file).

CSS Sprites

CSS Sprites are commonly used with icons and the hover and active states of images that have replaced links and navigation items.

CSS Sprites

Why use CSS Sprites? CSS Sprites save loading time and cut down on CSS and and HTTP requests. To learn more about CSS Sprites, check out the resources below!

Articles on CSS Sprites:

10. Image Enhancement

You can style images with CSS in various ways, and some designers have made a lot of effort to create very stylish image templates.

One simple trick is the double-border technique, which does not require any additional images and is pure CSS.

Double Border Technique

Your HTML would look like this:

<img class="double_border" src="sample.jpg" alt="" />

And your CSS would look like this:

img.double_border {
border: 1px solid #bbb;
padding: 5px; /*Inner border size*/
background: #ddd; /*Inner border color*/
}

Nick La of WebDesigner Wall has a great tutorial on clever tricks to enhance your images. Do check it out!

CSS Sprites

11. PSD to HTML

Now that you have learned the fundamentals of CSS, it’s time to test your skill and build your own website from scratch! Below are some hand-picked tutorials from the best of the Web.

Conclusion

Developing a strong foundation early on is critical to mastering CSS. Given how fast Web technology advances, there is no better time than now to get up to speed on the latest standards and trends.

Hopefully, the techniques we’ve covered here will give you a head start on becoming the ultimate CSS ninja. Good luck, stay hungry and keep learning!

(al)

↑ Back to top

Soh Tanaka, based in Los Angeles, CA, is a passionate front-end developer and designer who recently launched a CSS Gallery called Design Bombs. He specializes in CSS driven web design with an emphasis on usability and search engine optimization. For more front-end Web development tutorials, check out his Web design blog.

  1. 1

    Thank you for the nice tutorial.

    0
  2. 2

    Nice Review of CSS!
    The link to the “shorthand” page on your website is incorrect. It should be http://www.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/

    Other links to your web site appear broken as well. They work if I replace “media1″ or “media2″ in the url with “www”.

    (SM) Thank you, Ben, it was fixed.

    1
  3. 3

    Great tutorial!
    Thank you very much…

    3
  4. 4

    Great CSS tips!

    3
  5. 5

    Great, love it. I’ll be sending a link to all my employees. Thanks Smashing.

    5
  6. 6

    pretty sure most of us knew all this already.

    -20
  7. 7

    Another solid article summarizing and clarifying essential css issues. Thanks!

    2
  8. 8

    Wow, this is going to be in a little of people’s bookmarks bar. Good job.

    3
  9. 9

    Very nice clear article..

    well done.

    2
  10. 10

    What an article!

    Thanks for that amount of work!

    Cheers, Oliver

    2
  11. 11

    isdanielonline.com Very nicely put together. Thank you.

    2
  12. 12

    Pam - Ryvon Designs

    October 5, 2009 6:44 am

    Thanks! I think a lot of beginners and those starting out are in great need of something like this! Your support of the beginner community is wonderful, keep it up!!!

    2
  13. 13

    Bookmarked!!

    2
  14. 14

    like it! Well done in the usual Smashing way!

    2
  15. 15

    Awesome stuff!

    I will sift through this, this evening to see if there is anything that I don’t already know in there :)

    -2
  16. 16

    I cannot really understand why PSD to HTML is needed.
    As far as I know, PSD id the format of photoshop and how is image related with website developement ?

    I’m really confused.

    0
  17. 17

    Good stuff- But I think the biggest fundamental understanding missing from this intro is the difference between block and inline elements, and how css declarations affect each.

    1
  18. 18

    Awesome and very useful article.. very good for reference.. thanks so much!!

    0
  19. 19

    I usually never comment. But this a a great article.

    0
  20. 20

    Thanks a lot for this interesting list of advices.

    I found another one, really interesting on anidea.com: http://anidea.com/technology/css-best-practices-for-modern-designs/, it’s more about how to organize your code and reduce the size.

    Thanks for you share!

    1
  21. 21

    AFAIK, IE6 will only double the margin in the direction the float is. Ie: if you float your element to the left, only margin-left will be doubled.

    And why would you float the header in chapter 2.?

    1
  22. 22

    Hi All,

    Smashing magazine has always been great in giving tips and tricks.
    Just this one thing was missing, BASIC CSS understanding.

    Even this beginner tutorial would be of great use to professionals!

    Thanks you for this.

    1
  23. 23

    Nice! Hoping for the next article.. Thanks!

    -2
  24. 24

    Thanks for that amount of work

    -2
  25. 25

    Grat article, grat overview, thanx SM

    1
  26. 26

    very nice article!

    1
  27. 27

    Really a great article.

    Can you please post more on javascript too. please

    0
  28. 28

    Thanks—perfect timing for me!

    0
  29. 29

    Jewen Soyterkijns

    October 5, 2009 8:43 am

    The image is semantically linked to the paragraph no? why not add the img inside the paragraph and be gone with any float problem?

    0
  30. 30

    Thanks, certainly learned some new CSS.

    0
  31. 31

    Awesome article. I learned a lot. Thanks

    0
  32. 32

    Thanks Soh for this awesome article about CSS. I have been using CSS for a while now, but I still learned something from this article. I never knew that just by adding line height to your text, you can vertically center it. That’s awesome.

    Jad Limcaco
    Jad Graphics

    1
  33. 33

    Slobodan Kustrimovic

    October 5, 2009 9:34 am

    “In this case, use overflow: hidden on your parent container to completely wrap any floated child elements within it.”

    Isn’t clearing the float a better solution for this?

    0
  34. 34

    Martin Frobisher

    October 5, 2009 9:35 am

    Very nice tutorial. I am going to pass it around.

    I would add that an absolutely positioned item’s base point is the upper left corner of the browser window unless it is contained within a element that has its own absolute or relative positioning. In that case, the base point is the upper left corner of that element. I think.

    0
  35. 35

    Very interesting, I like well done illustrations and the way things are explained. Thanks !

    0
  36. 36

    Woow! That’s great article. Thank you very much…

    0
  37. 37

    Yea! It’s great. I’m from Poland. I usually only read smashing articles but now i had to comment this. Really helpful for beginers.

    0
  38. 38

    Very nice article, Soh!

    But I’ve got one problem working on a new site:

    The navigation is set with margin-top: 0 and the container for the content is set with margin: 0 auto, but this is not what I want. I want it to have a margin-top of 80px, but this does not work. In the case with margin: 80px auto the navigation is inside the container. In another case that the container has position: absolute the margin: auto does not work.

    Does anyone know how to set a container centered with a topmargin?

    Thanks.

    Edit:
    I just got it and I am going to tell you – might happen that you’ll have the same problem in future:

    I set the container with margin: 80px auto. The navigation was this time inside the container, so I gave it a margin-top of -80px and this time it works.

    Greetings from Germany.

    0
  39. 39

    fantastic. Thanks!!!

    0
  40. 40

    Super..

    0
  41. 41

    Excellent article, even for those who already are very familiar with CSS. Thanks!

    0
  42. 42

    Man, really really really awesome article. I need something exactly like that. Thanks alot ! :)

    0
  43. 43

    Great article ! Thanks for sharing.

    0
  44. 44

    Go, Soh! :D.

    0
  45. 45

    Jean-Francois Monfette

    October 5, 2009 12:13 pm

    Fantastic tutorial. I hope the book will be as good as theses tutorials !

    0
  46. 46

    To Slobodan Kustrimovic, if part of your structural layout relies on floats, I believe clearing a float will clear all parent floats as well. Thus, if you have a left-floated nav bar, clearing a float will push the content down past the nav bar, no matter what internal floats you intended to clear. It’s been a point of frustration for me.

    0
  47. 47

    What site is it that the little guy in the gas mask comes from? I know I’ve seen him in a 3×3 grid of icons with him in the center and they ‘grow’ when you hover over them. I want a similar effect in something I’m doing.

    0
  48. 48

    AFAIK, IE6 will only double the margin in the direction the float is. Ie: if you float your element to the left, only margin-left will be doubled.

    That was my understanding too; it doesn’t affect vertical margins.

    @Slobodan Kustrimovic as Tom Something points out, clearing floats with more floats can sometimes cause you problems elsewhere; I’d use overflow over floats in almost all situations except when you want some content to appear outside the boundaries its container.

    With regards the styling headings, I believe your use of <small> is incorrect. If you’re using it for presentational purposes, then obviously, that’s wrong, but if you’re using it for the sort of semantics it provides as suggested by the HTML5 spec, namely that it be used for small print, then I’d suggest that the subheading to a heading isn’t small print, it’s another heading.

    0
  49. 49

    I truly love you Smash.
    Thanks for this amazing article! It did come at the perfect time for me.

    0
  50. 50

    Great article. I liked it very much. Thanks for sharing your knowledge.

    0
  51. 51

    This is soooooooo great! Everything you have to know when you start with CSS. For me it is good to look back and see what I am missing in my workflow. I already saw some things that I will change because of this tut.

    Thanks guys

    ps: looking forward what will be there in the book :-)

    0
  52. 52

    Fantastic article, I’ve been looking to get a refresher in CSS, and this hit the spot!

    0
  53. 53

    wow .. great post… everythin’ in one

    0
  54. 54

    Why the rest of us can´t write so clear, punctual and without “bells and..”…
    The greatest explanation about CSS, Thank you very, very much…

    0
  55. 55

    Very insight full post. I would have like to see some advance selectors used in the examples. Thanks for the article.

    Benga creative

    0
  56. 56

    as always you get and compile nice articles and wrapped ideas. keep up the good work guys. let’s rock the web world.

    0
  57. 57

    On “padding vs margin” one thing that took me forever to discover is that when you have two elements with vertical margins that “collide”, you’ll only end up with one margin that is the larger of the two. Drove me nuts trying to figure out why I couldn’t get things to work out. Google “css collapsing margins” for more detail.

    0
  58. 58

    thanks so much for this tutorial. i’m currently in school studying web design and interactive media. i actually had a mental breakdown trying to do the css for my final project. once i was able to figure out why i was having a mega brain fart i was able to get the css done. the thing this taught me was that i need to learn, or rather focus more on learning css, so i’ve been reading as many tutorials as i possibly can on css. i hope that by the time i’m done with school that i’ll be a css ninja. this tutorial will definitely be a part of my arsenal.

    0
  59. 59

    I’m currently studying graphic design in Buenos Aires, Argentina and I found this article amazingly useful, I’ve been reading a lot about CSS lately since I started working with it on a daily basis and SM has been my starting point for everything. Thanks for being there when needed, when wanted and most of all, when the brain is so fried that you don’t know how the heck you’re gonna find a new idea =)
    Once again, Brilliant article

    Greetings from South America!

    1
  60. 60

    Great post!
    Thank you.

    0
  61. 61

    Nicely done Soh! Even us DB guys can learn a few CSS tips and tricks. :-)

    0
  62. 62

    That’s good to begginer!

    0
  63. 63

    Great article!
    Just one thing tho, in the Floats section, the image under “Using Floats To Create Layouts” has style as float:left for both LEFT NAV as well as MAIN CONTENT. Shouldn’t the one for MAIN CONTENT be float:right instead?

    0
  64. 64

    Good Job.

    0
  65. 65

    A Nice and useful tutorial!

    0
  66. 66

    Woohooo !!
    that was AWESOME!
    nice post!

    0
  67. 67
  68. 68

    very very nice tutorial

    0
  69. 69

    Great post.
    Really awesome.

    0
  70. 70

    Nice round-up, but in chapter 1 (margins vs paddings) you’re really missing some guidance for usage when there is no border or background, and the same visual effect can be accomplished using either a padding or a margin. That’s where it becomes interesting.

    0
  71. 71

    If we have to read only one page about CSS it must be this one ! Some of theses tricks are used on our page aSeed Webdesign

    0
  72. 72

    Nice “tutorial”. Very clear and clever. Always good to read basics :)

    0
  73. 73

    Excellent. The power of CSS is incredible!

    0
  74. 74

    Smashing as usual :) thumbs up

    0
  75. 75

    thanks…..nice tutor

    0
  76. 76

    Chapter 6: the container of a floating element needs first the overflow:hidden clearing the float. But older IEs additionally need a height:1% or a zoom:1 (to get hasLayout). Otherwise it doesn’t work.

    0
  77. 77

    A great tutorial that I can refer back to and not constantly ask / nag to “how do you do this again!”

    Thank you – keep them coming

    0
  78. 78

    good article. However…
    for and using the background technique isnt what id use. Id use list-style-image.
    And, for the text replacement, wouldnt the technique be very very bad for accessibility?

    0
  79. 79

    สุดเดช

    October 6, 2009 12:22 am

    nice thx for article

    0
  80. 80

    thx
    was refreshing my memory with that

    0
  81. 81

    Hallelujah Smash Magazine!

    0
  82. 82

    Great! thank you so much to share this article

    0
  83. 83

    Gjergji Kokushta

    October 6, 2009 1:23 am

    Very nice tutorial, very useful – great job!

    0
  84. 84

    Great, this kinds of articles is appreciated.

    1
  85. 85

    Very practical, simple and very useful guide… Thank you!!!

    0
  86. 86

    Good!!!! Excellent article

    0
  87. 87

    These articles are great, but people dont understand how to use :

    floats, relative and absolute positioning.

    Theres alot of bad techniques in this tutorial :(

    0
  88. 88

    Hello,

    This is really one of the nicest tutorial for bigginers.Thanks a lot!!! keep up the good work.

    MEG :)

    0
  89. 89

    “Even this beginner tutorial would be of great use to professionals!”

    What. This is a basic article, not taking away from it but if a professional that uses html/css needs this they are not a professional.

    0
  90. 90

    Excellent tutorial, very useful!
    please make some articles about ERGONOMIC DESIGN GUIDELINES or STANDARTS! for websites…
    thank you

    0
  91. 91

    @Soh Tanaka, welcome to Smashing Magazine. You’re best.

    0
  92. 92

    Very nice tutorial for newbies.

    0
  93. 93

    Webstandard-Team

    October 6, 2009 5:16 am

    Very nice overview, but don’t miss this “CSS Shorthand Properties” ressource!

    0
  94. 94

    fantastic article…

    i am a beginner and this article cleared my doubts about padding, margin and float.

    thanks

    0
  95. 95

    Best CSS tutorial I’ve ever seen, also emphasizes the current trends. Thanks!

    0
  96. 96

    Nice article!

    However, in the thing about floats it says ‘Reverse the order of the HTML markup so that you call the floated element first, and the neighboring element second.’ but this make the semantics suck.

    0
  97. 97

    Martin Bentley Krebs

    October 6, 2009 6:19 am

    Thanks for a very helpful article. For those of us who don’t work in or with CSS every day, it’s great to have a resource for “remembering” how to do something in CSS, as well as a place to see what’s currently being used.

    0
  98. 98

    I found the link I was looking for. The logo is for DesignBombs and the effect I was wanting is here: http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/ in case anyone else cares. :}

    0
  99. 99

    Awesome article on CSS! I just redesigned a website homepage for a client last week, using PSD and CSS, but will go back to add text-shadows for the headers. Thx for the great tips!

    0
  100. 100

    What an article! I wish there was something like this a couple of years ago, I’d have made my life easier!

    You put it really clear, congrats!

    0
  101. 101

    Great article. I’ve been pondering over this one problem I had for my container, and overflow:hidden did the trick. I’ve been meaning to find a really short/condensed tutorial that teaches almost all there is to know to begin CSS, and I found it. I’ll be sharing this link around, thanks for writing it.

    0
  102. 102

    Wow this article is going to help me out so much, I am more of a print designer but i have noticed that more and more of my clients want web pages as well, and this will help me get the start I need.

    Thank You Smashing Magazine.
    M@

    0
  103. 103

    great information

    0
  104. 104

    nice, thanks a lot!

    0
  105. 105

    Thank for this very useful tutorial! A lot of trying and messing around falls into place now!

    0
  106. 106

    To get customized bullets for a list, you go a long way around — and involve background images which are problematic to print — when something like this works even better:

    UL { list-style-image: url(http://example.com/bullet.png) }

    Is there a reason for that?

    -1
  107. 107

    Text Replacement – This is perfectly SEO friendly, google (as far as I know) doesn’t take ranking points off for negitive indent. It does hate “display:none;” and a few other techniques though;

    I always use the following css on elements which will have a graphic background with text to replace the text. The more explicit rules help in consistent rendering across browsers.
    html:

    [h1]The site title[h1]

    css:

    h1 {
    background: url(image/thesitetitle.jpg) no-repeat 0 0;
    height:{the height of the image};
    line-height:{the height of the image};
    font-size:0.05em;
    overflow: hidden;
    text-indent:-555px;
    width:{the width of the image};
    }

    0
  108. 108

    This really hasn’t been covered before on here? Not even in one of the twenty or so “Top [Some Exorbitant Number] CSS Tutorials” posts on here?

    I’d rather see a short article that completely deconstructs a single method or technique, than something that most people visiting this site on a regular basis should already have a pretty solid grasp of.

    0
  109. 109

    Nice article, really. One thing: Would it be so hard to provide alternative CSS for a printable version? :-)

    0
  110. 110

    Keep up the good work sophEr.

    0
  111. 111

    This tutorial was really helpful for me. This trick with overflow hidden for wrapping any floated child elements within parent element was exactly what I needed. Thank you very much.

    0
  112. 112

    Awesome … kick ass CSS skill booster

    0
  113. 113

    very useful for me, thanks!

    0
  114. 114

    Nice.. Regarding Point no. 6.. — It doesn’t work in IE6.. any solution for this….

    0
  115. 115

    this is the greatest article i have read in a while. great, great work! :)

    0
  116. 116

    Vertical alignment is wrong…. the margin rule is top right bottom left and both top and bottom as right and left must be set as negative like that:

    width:600px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin:-150px -300px -150px -300px; (or just -150px -300px as heights and sides as the same)
    position:absolute;

    0
  117. 117

    @maria He is not wrong. Your solution works because the right and bottom margin is being ignored by the top and left margin, which results in the same technique as his method.

    0
  118. 118

    Very basic stuff, but nice tutorials for begniners or to freshen up the ‘ol nugget :)

    @Russell: Sure you want to use only 555px in your text indent to hide text? Think fully maxed windows on HD screens, your text might just pop up ;)

    0
  119. 119

    I can’t bloody wait for the book!

    0
  120. 120

    it’s nice bro..

    0
  121. 121

    Very good tutorial, nice fresh up :)

    0
  122. 122

    Thanks for the post…

    0
  123. 123

    Thank !
    I am going to do my first Div design by this link. So wish me a good luck .
    You guys are great, keep it up.

    0
  124. 124

    Good and informative.

    0
  125. 125

    Very good job. I had to learn all these issues when documentation as this was not available, nor was it so popular. Congratulations. Highly recommended for beginners.

    0
  126. 126

    Great article, the only thing I’d add is that if you’re going to use “float” make sure you’ve learnt about “clear” first!

    0
  127. 127

    Great article, thanks!

    0
  128. 128

    Normally I don’t comment the posts but this one, IMHO, is one of the greatest compilations about most comon doubts of Wed Design. Congrats and thanks ;)

    0
  129. 129

    Good summery of important CSS tips however you missed some fundamental tricks a CSS beginner needs such as CSS reset and Conditional Comments.
    Also whenever talking about absolute positioning make sure to mention that it has to be within a relatively positioned container. That drove me crazy when I was first starting.
    Cheers,
    Tai – New Spark Designs

    0
  130. 130

    Another method of text replacement is to use padding and overflow hidden rather than the minus text indent way. For eg.

    h1 {
    background: url(img/yourimage.png) no-repeat 0px 0px;
    width: 300px(the width of the image) ;
    height: 0px;
    padding: 20px(the height of the image) 0px 0px 0px;
    overflow: hidden;
    }

    0
  131. 131

    Hussain Cutpiecewala

    October 7, 2009 10:30 am

    Thanks for such a nice tutorial :-)
    It will help me lot..

    0
  132. 132

    where is the boookkkkkkkkk………….waiting for a long time…..:(

    0
  133. 133

    Very nice tutorial for beginners…thx a lot…

    0
  134. 134

    Really great information here. Thanks so much.

    0
  135. 135

    It’s good to remember for novice that complete width of the elemet is also includes border width so I think better would be changing line

    100px (content) + 10px (left padding) + 10px (right padding) = 120px (total width of element)

    to

    100px (content) + 10px (left padding) + 10px (right padding) + border (even if it’s 0px)= 120px (total width of element)

    0
  136. 136

    A CSS rehash. Thanks

    0
  137. 137

    I dont need to thank you, to many before me did already. It most be great to post on a website that attracts so much good visitors.

    0
  138. 138

    nice article you got here. Very useful for newbie like me :)

    0
  139. 139

    This one is really helpful for beginner. Thanks a Lot for the Tutorial.

    0
  140. 140

    Great post, thank you! Since the title is “Mastering CSS Coding: Getting Started,” can we reasonably expect another post in the same vein? “Mastering CSS Coding: Intermediate Techniques,” for example? :)

    0
  141. 141

    nothing new for experienced web designers, but hats off for a well-presented article with all the right information. very impressive!

    0
  142. 142

    Excellent post, as usual.

    0
  143. 143

    I was surprised to see so many positive comments on this article. It does look like it took a lot of time to compile, but there were many instances where vital information was omitted. A few of these have been mentioned by other commenters, but here are some examples of things I noticed:
    1) covering padding/margin without mentioning the fact that margins collapse
    2) covering floats without ‘clearing’
    3) the 50% position / -left margin method of horizontal centering is listed in the vertical centering section
    4) ol and ul should be defined as lists of items wherein the order matters and does not matter (respectively), as opposed to their presentation
    5) examples would be much more helpful if they were stripped down to their essential code ie. the custom bullets example
    6) the heading styling section is not standards compliant. Css seems like an h1, Back to Basics an h2, and Tips/Tricks an h3. Using small like this is presentational, rather than semantic.
    7) overflow:auto requires a set height
    8) the overflow:hidden suggestion very hackish, and too complex for a beginner’s tutorial – a better solution would be to float the parent as well.
    9) the text replacement section could be enhanced with a sentence or two about why it is the best method (from an accessibility point of view)
    10) vertical centering, sprites and psd->html are definitely not beginner topics. ;)

    It is a pretty long list, so again, not a slam – but a suggestion of edits that could be made to the article now, in order to make it more useful for real beginners.

    And to the beginners I would say: the two most helpful things I found (by far) when starting to learn CSS were the ‘CSS for Designers’ video series on lynda.com hosted by Molly Holzschlag and Andy Clarke, and the book CSS Mastery by Andy Budd. :)

    0
  144. 144

    awesome post.. very informative specially for beginners!

    thanks
    sharath

    0
  145. 145

    Best article on CSS I’ve ever read. Thank you.

    0
  146. 146

    excellent article. you all never disappoint.

    0
  147. 147

    Can’t wait to get started!

    0
  148. 148

    great guide for begginers, thanks for this, I atleast found another great resources for further education, thanks!

    0
  149. 149

    Abdul-Basit Munda

    October 9, 2009 11:53 am

    Excellent Article, very useful

    0
  150. 150

    Best article on CSS I have ever read. Very clear, clean, and illustrative. Thanks a bunch!

    0
  151. 151

    This was really a best article.
    I found the following solution for the floating elements very handy. Thanks to smashingmagazine.

    http://www.quirksmode.org/css/clearing.html

    0
  152. 152

    Really like this summary / reference / how-to article.

    Motivating to become a bedder webber :)
    #hungry to learn more

    0
  153. 153

    wow.. these tips will help me a lot!!! thanks.. :)

    0
  154. 154

    very good article. It explains quickly thew basics of CSS.

    0
  155. 155

    excellent article, very use full thanks……

    0
  156. 156

    It’s great post Chris.

    I would actually post a question here !

    I’have seen some amazing menu styles on these sites:

    http://www.casioexilimlab.com/
    http://www.razorbraille.com/

    But I’ve no idea to create that. Can we expect your post on this?

    If anyone else knows how to do it, please share then.
    Thanks

    0
  157. 157

    Great tutorial! This is what all web-related developers must read!

    BTW, I think that it’s worth mentioning that position:relative not only sets new origin for absolutely positioned child elements(in fact fixed and absolute positioned elements also do that), but also allows to move element around using left and top properties, keeping the original(0,0) space reserved by that element. I think that is what position:relative is all about.

    0
  158. 158

    great tutorial…
    i like it.. thanx..

    0
  159. 159

    Nice round up……strong in basics….

    0
  160. 160

    karthikeyan Bhaskaran

    October 13, 2009 3:50 am

    Nice Tutorials and Explanations. But some what is missing to explain briefly…….

    In CSS Sprites

    0
  161. 161

    very very very nice all in one css tutorial.

    0
  162. 162

    Phuket Website Design

    October 13, 2009 6:42 pm

    Ho Good Tutorial, Thanks a Lot for the Tutorial.
    Thanks krab

    0
  163. 163

    Great tutorial!
    Thank you very much…!

    0
  164. 164

    I learned a lot; thanks!

    0
  165. 165

    yeahhh…it’s a great magazine for blogger..hohohoho

    0
  166. 166

    Brilliant. This would be something for me to read again and again to sharpen my CSS skill. Thanks

    0
  167. 167

    this is a fantastic contribution for all people starting on this sweet css world we are living in.
    please keep doing the goodwork, long life to smashingmagazine.com!
    thank you once more,
    p

    0
  168. 168

    for Sarfraz Ahmed: This is most likely Flash animation. It goes WAY beyond css! If you are interested in it, you can visit http://www.adobe.com/products/flash/

    0
  169. 169

    i liked the Post…
    are very useful!
    really nice
    Thank you

    0
  170. 170

    Nice, again!

    0
  171. 171

    0 to %100m for me … :))

    0
  172. 172

    This is one of the best quick and simple write ups I think I have ever seen… very nicely done guys

    0
  173. 173

    Very very useful tutorial. Thanks a bunch !

    1
  174. 174
  175. 175

    Greatest article that ever seen…..Thanks alot.

    1
  176. 176

    Great tips. You definitely put it to the next level thanks to all those wonderful examples and screenshots.
    I bet many starting CSS coders would find good tips from this article.

    1
  177. 177

    really good and useful article

    1
  178. 178

    Very timely article — I needed a ‘refresher’. The writing is very good… illustrative…and has some good tips.

    0
  179. 179

    Really nice to start CSS site

    0
  180. 180

    Thank you, it’s one of the best tutorials I’ve ever seen!

    0
  181. 181

    Really useful tutorial. Thank you.

    0
  182. 182

    “Another great article to read while coding web layouts:

    http://www.xhtml-css-code.com/html/things-to-remember-while-coding-a-website-to-make-it-search-engine-friendly

    Though, not exactly a psd to html conversion article, but one must keep these tips in mind while coding a PSD into search engine as well as user friendly web layout.

    1
  183. 183

    Great article, and even more importantly… well designed! Graphics are clear and easy to understand, and you did a great job explaining everything.

    I would love to see a similar article digging deeper into CSS horizontal navigation with drop downs for certain menu items.

    Again, great job and thanks for taking the time to make it visually appealing as well.

    1
  184. 184

    Great article, incredibly well written and easily understood.

    Well done!

    0
  185. 185

    This is definitely the best tutorial ever…
    Thank you for your great site!

    0
  186. 186

    Thank’s a lot for your time, I have learned a lot ^^

    0
  187. 187

    Great article…I have learned something…

    0
  188. 188

    Great and useful articles. I like very much. Thanks smashing team.

    0
  189. 189

    very nice tutorial

    0
  190. 190

    Good Article coud use some tipps of css.

    0
  191. 191

    Soh you’re Da man!
    I have an exam tomorrow on building sites with CSS and thanks to you I feel much more confident
    thank you very much!

    0
  192. 192

    very useful tutorial.greeting from romania!

    0
  193. 193

    website design arizona

    February 5, 2010 3:32 am

    CSS is fundamental for evry designer & i found this post very helpfu in browser hacking too…i will definitely share is to my colleagues.

    Thanks

    0
  194. 194

    Great css tips…
    Thanks

    0
  195. 195

    Thanks a lot – great article !

    0
  196. 196

    muchas gracias…

    saludos,
    Felipe…

    0
  197. 197

    Nice article. I found an example of vertical & horizontal aligning a while ago that doesn’t disappear off the top & left of the page if it’s resized too small. Here’s the url: http://www.pmob.co.uk/pob/hoz-vert-center.htm

    0
  198. 198

    Thank you
    web 2.0 strict css2
    sytes.in.th

    i have css3 it not support IE8

    0
  199. 199

    It’s really great and amazing.Before i didn’t know exactly how to solve the problems what i had especially in CSS.But now i have got the solutions after i read your post.
    thanks you so much.
    :D

    0
  200. 200

    Hey man, great tutotial
    I have a problem, I have tried to center a layout but I couldn’t, i have used this scrip
    width: 867px; /*–Specify Width–*/
    height: 750px; /*–Specify Height–*/
    position: absolute; /*–Set positioning to absolute–*/
    top: 50%; /*–Set top coordinate to 50%–*/
    left: 50%; /*–Set left coordinate to 50%–*/
    margin: -375px 0 0 -434px; /*–Set negative top/left margin–*/

    but the layour isn’t in the top margin, it is up of the top, can you please help me ?
    Regards

    0
  201. 201

    Thank you so much for this clear and beautiful tutorial,
    i think you should be rewarded for this nice tut

    Thanks so much

    0
  202. 202

    As usual a wonderful post. Didn’t want to comment but I guess it needs and comments are always welcome for the author and for the website as well.

    0
  203. 203

    Really great article, very useful tutorial. Thanks to posting.

    0
  204. 204

    Nice tutorial buddy

    0
  205. 205

    Best tutorial ever!!!!
    Thank you for the simple, clear comprehensive evrything-i-needed-to-know tutorial

    0
  206. 206

    This is great! Very well explained and gave me answers to many questions that I had. This has been my homepage for a while haha!

    0
  207. 207

    Imam Zatnika W

    June 5, 2010 5:57 am

    Thanks for useful tutorial… ;-) From : Muslim Indonesia

    0
  208. 208

    Awesome tutorial i learn a lot

    0
  209. 209

    Great article,

    thank you

    0
  210. 210

    Simply the great post, Thanks for sharing.

    0
  211. 211

    Great tutorial, very simple yet very comprehensive

    Thanks

    0
  212. 212

    Nice artical…i got many ideas after read this..Thanks a lot..

    1
  213. 213

    it’s cool………..thanks

    0
  214. 214

    WOW.. Great Tutorial & Bookmarked for sure.

    0
  215. 215

    AMAZING!

    TANX A LOT !!!!!!!!

    0
  216. 216

    Very impressive walkthrough of some basic principles working with CSS. I think you captured the most essential parts and in a way that even most beginners could grasp and embrace.

    0
  217. 217

    Nice article.. very helpful.
    Thanks

    0
  218. 218

    Very easy-to-understand and immensely useful tutorial. Thanks!

    0
  219. 219

    thanks for this g8 tutorial. :) :)

    0
  220. 220

    Very good article

    0
  221. 221

    Thanx! Love smashingmagazine because of this

    0
  222. 222

    Css helps a lot to put more attractive tools to navigate sites. It is very useful to learn and use it to make you more efficient.

    0
  223. 223

    that was really ..nice round up.. …. tanaka.. san?.. r u japanese…hehehxd..

    0
  224. 224

    thanks for such a tutorial…
    Would try implementing these techniques in my blog..
    thank you!!.

    0
  225. 225

    Wow. Good Tutorial. It answered a lot of questions I had for years.

    0
  226. 226

    Thank you so much for this!
    Especially helpful were the FANTASTIC illustrations. Good visual examples seem to me to be awfully rare.

    1
  227. 227

    i like this tutorials

    0
  228. 228

    Awesome stuff!

    0
  229. 229

    Wow It’s really great.

    0
  230. 230

    Awesome tutorials!
    Thanks a lot!

    0
  231. 231

    Very helpful. Nice tutorial

    0
  232. 232

    This is the best tutorial I’ve seen online. The topics are very well explained. Keep up the good work. Kudos!

    0
  233. 233

    Great work for article creation.. it’s more useful for anyone else.. it will be going through all of their bookmark links even my bookmark also…

    0
  234. 234

    Frontend/User Ineterface/Layouts , there are all usually designed in photoshop and then sliced.The slices are then given functionality (woven into a website) using (x)html/css etc..

    1
  235. 235

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top