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 Link

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. margin1
  2. Floats2
  3. Center alignment3
  4. Ordered vs. unordered lists4
  5. Styling headings5
  6. Overflow6
  7. Position7

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 images8
  2. Image enhancement9
  3. PSD to XHTML10

1. Padding vs. Margin

Most beginners get padding11 and margins12 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? Link

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 Link

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 “shorthand13,” 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 Link

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 Dog20, 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 Link

You can horizontally align text elements using the text-align28 property. This is quite simple to do, but keep in mind when center-aligning inline29 elements30 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 margin31 property.

The W3C32 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 Link

You can vertically align text-based elements using the line-height33 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 positioning34.

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 Link

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 Link

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? Link

According to W3Schools.com57, “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.

Overflow58

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.

Overflow59

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-index64 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-index65 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 Link

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 Link

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

Check out this detailed tutorial by Nick La71 of WebDesigner Wall72 on how to achieve this effect:

Large Backgrounds in Web Design73

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

Text Replacement Link

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 ways75. One rather simple technique is to use the text-indent76 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 Link

CSS Sprites81 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 Sprites82

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

CSS Sprites83

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 tutorial92 on clever tricks to enhance your images. Do check it out!

CSS Sprites93

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 Link

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)

Footnotes Link

  1. 1 #CSS-Basics1
  2. 2 #CSS-Basics2
  3. 3 #CSS-Basics3
  4. 4 #CSS-Basics4
  5. 5 #CSS-Basics5
  6. 6 #CSS-Basics6
  7. 7 #CSS-Basics7
  8. 8 #CSS-Basics8
  9. 9 #CSS-Basics9
  10. 10 #CSS-Basics10
  11. 11 http://www.w3schools.com/css/css_padding.asp
  12. 12 http://www.w3schools.com/CSS/css_margin.asp
  13. 13 http://www.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/
  14. 14
  15. 15 http://htmldog.com/guides/cssbeginner/margins/
  16. 16 http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
  17. 17 http://www.dustindiaz.com/css-shorthand/
  18. 18 http://www.tizag.com/cssT/margin.php
  19. 19 http://www.tizag.com/cssT/padding.php
  20. 20 http://htmldog.com/reference/cssproperties/float/
  21. 21 http://css.maxdesign.com.au/floatutorial/
  22. 22 http://www.quirksmode.org/css/clearing.html
  23. 23 http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
  24. 24
  25. 25 http://www.complexspiral.com/publications/containing-floats/
  26. 26 http://www.w3schools.com/Css/pr_class_clear.asp
  27. 27 http://www.w3schools.com/css/pr_class_float.asp
  28. 28 http://www.w3schools.com/CSS/pr_text_text-align.asp
  29. 29 http://en.wikipedia.org/wiki/HTML_element#Inline_elements
  30. 30 http://htmlhelp.com/reference/html40/inline.html
  31. 31 http://www.w3schools.com/CSS/css_margin.asp
  32. 32 http://www.w3.org/TR/CSS21/visudet.html#blockwidth
  33. 33 http://www.w3schools.com/css/pr_dim_line-height.asp
  34. 34 http://www.w3schools.com/Css/pr_class_position.asp
  35. 35 http://blog.themeforest.net/tutorials/vertical-centering-with-css/
  36. 36 http://www.w3.org/Style/Examples/007/center
  37. 37 http://simplebits.com/notebook/2004/09/08/centering.html
  38. 38 http://www.maxdesign.com.au/presentation/center/
  39. 39 http://www.sohtanaka.com/web-design/vertical-alignment-css/
  40. 40 http://www.noupe.com/css/css-styled-lists-20-demos-tutorials-and-best-of.html
  41. 41 http://www.webdesignerwall.com/tutorials/style-your-ordered-list/
  42. 42 http://www.alistapart.com/articles/taminglists/
  43. 43 http://www.smashingmagazine.com/2007/03/14/css-based-navigation-menus-modern-solutions/
  44. 44 http://sixrevisions.com/css/30-exceptional-css-navigation-techniques/
  45. 45 http://mirificampress.com/permalink/the_amazing_li
  46. 46 http://www.sitepoint.com/article/navigation-using-css/
  47. 47 http://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/
  48. 48 http://woork.blogspot.com/2008/01/digg-like-navigation-bar-using-css.html
  49. 49 http://www.3point7designs.com/blog/2008/06/02/10-examples-of-beautiful-css-typography-and-how-they-did-it/
  50. 50 http://webdesignledger.com/resources/12-css-tools-and-tutorials-for-beautiful-web-typography
  51. 51 http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/
  52. 52 http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
  53. 53 http://net.tutsplus.com/tutorials/html-css-techniques/six-ways-to-improve-your-web-typography/
  54. 54 http://www.noupe.com/css/css-typography-contrast-techniques-tutorials-and-best-practices.html
  55. 55 http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/
  56. 56 http://www.alistapart.com/articles/howtosizetextincss/
  57. 57 http://www.w3schools.com/Css/pr_pos_overflow.asp
  58. 58 http://www.sohtanaka.com/web-design/examples/css-back-to-basics/overflow.htm
  59. 59 http://www.sohtanaka.com/web-design/examples/css-back-to-basics/overflow-hidden-trick.htm
  60. 60 http://htmldog.com/reference/cssproperties/overflow/
  61. 61 http://www.w3schools.com/Css/pr_pos_overflow.asp
  62. 62 http://cssglobe.com/post/1305/create-resizing-thumbnails-using-overflow-property
  63. 63 http://css-tricks.com/the-css-overflow-property/
  64. 64 http://www.w3schools.com/Css/pr_pos_z-index.asp
  65. 65 http://www.w3schools.com/Css/pr_pos_z-index.asp
  66. 66 http://www.w3schools.com/Css/css_positioning.asp
  67. 67 http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
  68. 68 http://thecssblog.com/tutorials/stopping-the-css-positioning-panic-part-1/
  69. 69 http://www.barelyfitz.com/screencast/html-training/css/positioning/
  70. 70 http://www.onextrapixel.com/2009/05/29/an-indepth-coverage-on-css-layers-z-index-relative-and-absolute-positioning/
  71. 71 http://www.ndesign-studio.com/
  72. 72 http://www.webdesignerwall.com/
  73. 73 http://www.webdesignerwall.com/tutorials/how-to-css-large-background/
  74. 74 http://www.webdesignerdepot.com/2008/11/dos-and-donts-of-large-website-backgrounds/
  75. 75 http://www.mezzoblue.com/tests/revised-image-replacement/
  76. 76 http://www.w3schools.com/Css/pr_text_text-indent.asp
  77. 77 http://css-tricks.com/css-image-replacement/
  78. 78 http://stopdesign.com/archive/2003/03/07/replace-text.html
  79. 79 http://www.tjkdesign.com/articles/tip.asp
  80. 80 http://www.mezzoblue.com/tests/revised-image-replacement/
  81. 81 http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
  82. 82 http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
  83. 83 http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
  84. 84 http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
  85. 85 http://www.webdesignerwall.com/tutorials/advanced-css-menu/
  86. 86 http://www.ehousestudio.com/blog/2008/06/27/css-sprite-navigation-tutorial/
  87. 87 http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites
  88. 88 http://www.tutorial9.net/web-tutorials/building-faster-websites-with-css-sprites/
  89. 89 http://www.alistapart.com/articles/sprites
  90. 90 http://www.websiteoptimization.com/speed/tweak/css-sprites/
  91. 91 http://www.peachpit.com/articles/article.aspx?p=447210
  92. 92 http://www.webdesignerwall.com/tutorials/css-decorative-gallery/
  93. 93 http://www.webdesignerwall.com/tutorials/css-decorative-gallery/
  94. 94 http://net.tutsplus.com/videos/screencasts/slice-and-dice-that-psd/
  95. 95 http://net.tutsplus.com/videos/screencasts/slice-and-dice-that-psd/
  96. 96 http://net.tutsplus.com/videos/screencasts/converting-a-design-from-psd-to-html/
  97. 97 http://net.tutsplus.com/videos/screencasts/converting-a-design-from-psd-to-html/
  98. 98 http://net.tutsplus.com/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/
  99. 99 http://net.tutsplus.com/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/
  100. 100 http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-illustrative-web-design-from-scratch/
  101. 101 http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-illustrative-web-design-from-scratch/
  102. 102 http://net.tutsplus.com/tutorials/site-builds/build-a-sleek-portfolio-site-from-scratch/
  103. 103 http://net.tutsplus.com/tutorials/site-builds/build-a-sleek-portfolio-site-from-scratch/
  104. 104 http://www.blog.spoongraphics.co.uk/tutorials/how-to-build-your-own-single-page-portfolio-website
  105. 105 http://www.blog.spoongraphics.co.uk/tutorials/how-to-build-your-own-single-page-portfolio-website
  106. 106 http://css-tricks.com/video-screencasts/12-converting-a-photoshop-mockup-part-two-episode-one/
  107. 107 http://css-tricks.com/video-screencasts/12-converting-a-photoshop-mockup-part-two-episode-one/

↑ Back to top Tweet itShare on Facebook

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.

Advertisement
  1. 1

    pretty sure most of us knew all this already.

    -26
  2. 2

    Thank you for the nice tutorial.

    0
  3. 3

    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
  4. 4

    Great tutorial!
    Thank you very much…

    3
  5. 5

    Great CSS tips!

    3
  6. 6

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

    5
  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

↑ Back to top