Tag Archives: css

Mastering CSS Coding: Getting Started (Smashing Magazine)

Posted on by
Reply

I’ve been practicing strict CSS rules for years now, but it was only this year that I changed the way I fix floated containers inside another container, to stretch the height down to the bottom of the floated inner container. I guess almost everyone started with <br /> with ‘clear’ or the next element with CSS ‘clear’ in it to fix the issue, but we all know it’s ‘dirty’.

I found this great tutorial that would make a ‘css nobody’ become a ‘big guy’ on CSS, and I myself is going to keep this page available when needed.

6_b

Mastering CSS Coding: Getting Started covers:

  1. Padding vs. Margin
    • What Is Padding and Margin?
    • Margin and Padding Values
    • Quick Tip
  2. Floats
  3. Center Alignment
    • Horizontal Alignment
    • Vertical Alignment
  4. Ordered vs. Unordered Lists
    • Customizing Unordered Lists
    • Using Unordered Lists for Navigation
  5. Styling Headings
  6. Overflow
    • What Is Overflow?
  7. Position
    • Adding Flavor With CSS
  8. Background Images
    • Using Large Backgrounds
    • Text Replacement
    • CSS Sprites
  9. Image Enhancement
  10. PSD to HTML

Blueprint CSS as base CSS, sweet!

Posted on by
Reply

Hacking in or modifying Blueprint CSS to match your design is easy! You will notice that the original .box class had the light blue color, but here it isn’t.

What I did is added this code below to make .box background color as grey.

.entry .box { 
  background-color: #fdfdfd !important; 
  color: #696969 !important; 
  border: 1px solid #dedede; 
}
.entry .box a { 
  color: #363636 !important; 
  text-decoration: none; 
}
.entry .box a:hover { 
  text-decoration: underline; 
}

					

		
		
	


				
					
	

		

						
On-the-fly Blueprint CSS

			
						

				Posted on   by  			

			
						

				1			

					


				

			
Ok, I think there’s more to Blueprint CSS than fixed width designs. Somebody already came up with the liquid version.


So I think I’d spend some time adapting this generator and pass the four parameters needed to calculate the grid.



<script src="/getblueprint.php?width=950&cols=24&colwidth=30&margin=10"></script>



or perhaps a mode parameter to set px or percent as values



<script src="/getblueprint.php?mode=px&width=950&cols=24&colwidth=30&margin=10"></script>


					

		
		
	


				
					
	

				
					
	

		

						
Working with CSS

			
						

				Posted on   by  			

			
						

				Reply			

					


				

			
 In any task or project, planning smoothe things out. Same with little chunks of it – the CSS, you have to be really careful structuring your CSS from zero up.


If you’re lucky, you received a JPEG image or screenshot of what the final design looks like and that you are at a good start, if not, all I can say is “good luck”, LOL! With or without reference, this is how I’d go.


Consider first how you want to look a normal HTML element or based from screenshot design, create a set of CSS attributes for them (p { color: #333; }) . Later if you realize you want a group of HTML elements to look slightly different from others, create a class for them (.lighter { color: #666;} or p.lighter { color: #666;}). Now the ID, which many often replace the purpose with that of the class. Don’t know why, probably because the dot (.) looks tidier than the hash (#) sign? Or easier to type it on keyboard without the shift key? Whatever reason, it is so much NOT right, NOT recommended (well of course your page passed W3C CSS validation test), and if you do this, it just shows you just want this task or project pushed out of the door.


The ID, same in the sense of programming, must be unique, like the #footer and the #header, which should only appear once in an HTML page. If you’re not sure the ID appeared only once, submit it to W3C CSS validation service. It is also a common practice in web development, when displaying a data table, the rows are associated with the database ID during iteration (<tr id="row_25"><td>...). You can also manipulate the look of a specific row given the ID like #row_25 { background-color: yellow; } for purposes of highlighting.


Often, good css structure start with this.



* {
  padding: 0;
  margin: 0;
}



This code is known as “reset”, some “global selector”, which sets visible elements gets zero padding and margin, thus making your design to be 90% constant appearance on majority of browsers. What happened to the 10% ? These are the elements that inherit system behaviour, like form inputs, viewable window size and scrollbars, system colors, etc. I’m afraid, you really have to deal with those little bits of pieces or I maybe wrong. Somebody may have found a way to normalize these elements.