CSS Tutorials

CSS Galleries – Get inspiration for your new designs

Gareth Gillman — Sun, 04 Jul 2010 23:11:20 +0000

Stuck with ideas for a new design, galleries are full of websites which will improve your design perspective.

Here are just a couple of links to CSS galleries I know and use when grabbing inspiration for new designs.

CSS Drive

CSS Elite

CSS Heroes

Themeforest (not a css gallery but themes for sale, some amazing designs in there).

Any more you recommend, post them below.

Styling a html table with css

Gareth Gillman — Sun, 04 Jul 2010 22:45:19 +0000

A table doesn’t have to be boring and predictable, you can use css to style it up and make it stand out.

CSS code:

body { 
 margin:0;
 padding:0;
 font-size:15px;
 font-family:"Helvetica", verdana;
}
table, thead, tbody, tfoot, th, td, h1 {
 margin:0;
 padding:0;
}
table {
 background:#A7D8D8;
 border:1px solid #79B2AF;
 border-collapse:seperate;
 border-width:0 1px 1px 0;
 border-spacing:4px;
 color:#333;
 margin:20px auto 0 auto;
 max-width:900px;
 min-width:500px;
 padding:20px 5px 5px 5px;
 width:95%;
}
caption h1 {
 background:#F38630;
 border:1px solid red;
 border-width:0 1px 1px 0;
 color:#38210e;
 display:inline-block;
 font-size:18px;
 position:relative;
 text-shadow:0 1px 1px #eecaae;
 top:14px;
}
th, td {
 border-width:5px;
 padding:1px 6px;
}
th {
 color:#31605d;
}
thead, td {
 text-align:center;
}
td:empty {
 background:A7DBD8;
 border:0;
}
thead th {
 background:#D3EDEB;
 background:rgba(255, 255, 255, 0.5);
}
thead tr:nth-of-type(n+2) th {
 background:#C1E5E3;
 background:rgba(255, 255, 255, 0.3);
}
tfoot td {
 font-style:italic;
 font-family:"Georgia";
 background:#95C4c1;
 font-weight:bold;
 padding:5px 6px;
 text-shadow:0 1px 1px #fff; 
}
th[scope=row] {
 font-variant:small-caps;
 letter-spacing:1px;
}
tbody td {
 font-style:italic;
 font-family:"Georgia";
 text-shadow:0 1px 1px fff;
 background:#e5f2f1;
}

HTML code:



html table




HTML Template caption

 
  Column one
  Column Two
  Column Three
  Column Four
  Column Five
  Column Six
 


 
  Footer item 1
  Footer item 2
  Footer item 3
  Footer item 4
  Footer item 5
  Footer item 6
 


 
  item 1
  item 2
  item 3
  Titem 4
  item 5
  item 6
  
 
  item 1
  item 2
  item 3
  
  item 5
  item 6

HTML Template caption
Column one	Column Two	Column Three	Column Four	Column Five	Column Six
Footer item 1	Footer item 2	Footer item 3	Footer item 4	Footer item 5	Footer item 6
item 1	item 2	item 3	Titem 4	item 5	item 6
item 1	item 2	item 3		item 5	item 6

Article courtesy of .net magazine

Browser targetted CSS

Gareth Gillman — Sun, 04 Jul 2010 21:08:09 +0000

Ever wanted to use a set of css for just one browser, for example show different techniques for different browsers. Using php we can do this,

 
 $user_agent = $_SERVER['HTTP_USER_AGENT'];
if (preg_match('/Firefox.3.0/i',$user_agent)) {
 $browser = "ff ff30";
}
else if (preg_match('/MSIE.7/i',$user_agent)) {
 $browser = "ie ie7";
}
else if (preg_match('/MSIE.6/i',$user_agent)) {
 $browser = "ie ie6";
}
else if (preg_match('/Chrome/i',$user_agent)) {
 $browser = "chrome";
}
else if (preg_match('/Safari/i',$user_agent)) {
 $browser = "safari";
}
else {
 $browser = "in_unknown";
}
?>

That code would go at the top of a .php file.

To make it stick in the html of the site, we would add some php code into a html template.



Website Title

 
 $user_agent = $_SERVER['HTTP_USER_AGENT'];
if (preg_match('/Firefox.3.0/i',$user_agent)) {
 $browser = "ff ff30";
}
else if (preg_match('/MSIE.7/i',$user_agent)) {
 $browser = "ie ie7";
}
else if (preg_match('/MSIE.6/i',$user_agent)) {
 $browser = "ie ie6";
}
else if (preg_match('/Chrome/i',$user_agent)) {
 $browser = "chrome";
}
else if (preg_match('/Safari/i',$user_agent)) {
 $browser = "safari";
}
else {
 $browser = "in_unknown";
}
?>

$browser?>">
The following box below will be styled differently in each browser, check it out

 This box is unique to each browser

Save as index.php, below is the style.css file.

/* @group Internet Explorer */
 body.ie div.content-box {
 width:400px;
height:100px;
margin:0 auto;
 background:red;
}
/* @end */
 
/* @group Firefox */
 body.ff div.content-box {
 width:400px;
height:100px;
margin:0 auto;
 background:orange;
}
/* @end */
 
/* @group Chrome */
 body.ie div.content-box {
 width:400px;
height:100px;
margin:0 auto;
 background:blue;
}
/* @end */
 
/* @group Safari */
 body.safari div.content-box {
 width:400px;
height:100px;
margin:0 auto;
 background:red;
}
/* @end */

Hopefully that gives you some thought of how to target individual browsers, by having a little php coding. Remember you need to name your pages with .php as the file type and your web server needs to be php enabled.

Thanks for reading.

Article courtesy of .net magazine

New redesign – competition time

Gareth Gillman — Sun, 04 Jul 2010 20:30:26 +0000

To celebrate the redesign of the new CSS-tutorials website, we are offering 2 lucky members a 3 month membership to tutsplus.

All you have to do is sign up to the forums, and tweet a link to our website.

Competition closes 1st August 2010 @ 12am (UK time).

Good luck

Floats vs positioning

Gareth Gillman — Sun, 03 Jan 2010 23:33:02 +0000

Which is better, floating or positioning?

I answered this very question for someone on Webdesigner Forum so will run through my reply here but in more detail.

Floating is the css method of telling an object to “stick” to the left or right side of the website. Floating is very basic but means it’s easier to keep an eye on what’s happening.

Positioning is more advanced and has many options. You can assign individual margins and even “sticky” an object.

The problem with positioning objects is that it can be highly confusing, as you can end up with objects placed all over the place.
I only use positioning for elements that need to be placed where floating won’t help e.g. overlapping another object.

What do you recommend? Floats or positioning? and why?

Vertically Centering a Website

Gareth Gillman — Sun, 03 Jan 2010 23:08:22 +0000

How often have you wanted to make your website appear in the middle of the users browser?

Centering a website is quite simple, in your html create a div called wrapper and add some text e.g.



 some text

Now in your css add this,
#wrapper { width:960px; margin:0 auto; text-align:center; }

The width can be any amount as long as it’s less than 1200px (the most commonly used screen size of users). I have added the IE 6 fix. IE6 doesn’t like the margin: auto command so we need to add the text-align:center; command to combat this.

The three types of css stylesheets

Gareth Gillman — Sun, 03 Jan 2010 22:59:42 +0000

There are 3 ways recommended by the W3C to add styling to a markup language. You can use all 3 methods in your html document.

External stylesheet
This is the recommended method by me and many other professionals. The main bulk of the css stylesheet is kept in an external document. The document is called in the head of the html document. The document can be called anything but must end in the .css prefix, e.g. styles.css, some-random-file.css.

To call the stylesheet, we add the following code in between the two head tags in the html document.

The biggest advantage of using this method is the css is easily editable. You can link the stylesheet to as many files as you need. You can change the whole design of a whole website from one file.
The css code is also clearer to understand and can also help a website load quicker. This is the recommended method as websites become bulkier and they rely more on CSS.

Internal
This is the method recommended by many tutorial websites, but not by professionals. The css coding is inside the head tags of the html document. If your website uses a lot of css for the design, then this can add quite a few lines of coding to the document.

To use this method, we add the css code inside a style command, like the javascript command.

This method is handy if the document uses it’s own styles e.g. a javascript image gallery. Less css code included using this method is better.

Inline
This method is used quite a lot, as it is when using html. The earlier versions of html used this method to change the basic configurations of the website including fonts and colors.

The only time I recommend using this method is for adding some styling to a script, that cannot utliise stylesheets. This method isn’t recommended as it looks very untidy when reading through the code.

To use this method, we add a style command to an object, such as a paragraph.


Text

All of the above examples are used by websites, the bottom 2 are used more by tutorial websites for ease of use. I always recommend the top option as it makes your html code look neater and makes it easier to edit the css code.

What is css?

Gareth Gillman — Sun, 03 Jan 2010 22:29:22 +0000

CSS or Cascading Style Sheets are a stylesheet language used to desribe the presentation of a document written in a markup language such as HTML (Hyper Text Mark up Language) or XML (Extensible Markup Language).

CSS was designed primarily to seperate the markup code and the design. CSS provides more control and flexibility for the presentation of the markup. The main advantage of a seperate stylesheet is that multiple documents can share the same styling. This means a whole folder of documents (or known as a website) can change it’s whole appearance from one file.

The CSS specficifications are maintained by the W3C foundation. The W3C is a not for priofit organisation set up by the internet’s founder, Tim Berners-Lee. The W3C maintains the specifications for all the markup and stylesheet languages used in Websites. These include xml, html, xhtml and css.

The current CSS standard is CSS 2.1 but CSS 3 is imminent. CSS3 brings many new techniques to css that used to be left to images and javascript. CSS3 is only used on the most recent browsers, Mozilla Firefox 3.5, Opera 10, safari 3 (mostly mac based) and Google Chrome. Unfortunately all versions of Microsoft Internet Explorer don’t follow the Css3 standards, but hopefully a new version will.

CSS is a major part of website design and development so is a handy language to know.