Page 1 of 1

CSS based Design 101 Rate Topic: -----

#1 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,425
  • Joined: 28-November 09

Post icon  Posted 05 December 2009 - 09:43 PM

*
POPULAR

CSS based Design 101
Before you read this you should learn HTML at http://www.w3schools.com and look up some CSS afterwords.

Tables = Data only

Look through most sites today and tell me what you see. A vast majority use a system with a bunch of div tags and absolutely no tables! This is called a CSS design.

Now, some of you may still be designing websites with tables and may be wondering if it’s worth it to keep reading. After all, you still can make a functioning website can’t you? The simple answer is no. Table based web design is bulky, hard to understand for beginners, and extremely inflexible to edit. Don't believe me? Try and make a change to your design and tell me how long it takes to implement, because with CSS I can have it done sitewide with one file and save.

Tables in web design should be left only as data holders, not as design frames.

Tables were probably a primary way of web design for most of you. What could be more simple than making a table site in dreamweaver or an imageready slice-up in photoshop? Surprisingly CSS design is extremely easy to learn, much more so than tables. This even carries over to the extent that you need no more than notepad to make a functioning site with CSS.

Now then, some would ask what is CSS and why is it so important. CSS is short for Cascading Style Sheets. The beauty of CSS is that you can have only one html page and keep it the exact same, but it can change drastically in look based on the style sheet. Don’t believe it? Check out the marvels of css at http://www.csszengarden.com . Same html, different CSS.

CSS – basics

If you learned html quickly then CSS should be even faster. A basic CSS style would look something like this in html :

<style type="text/css">
body {
background: black;
color: white;
}
</style>


In this statement we have set all font to be the color white, and the background color of the page to be black. Now for the syntax of CSS.

.Class #id tag {
area:attribute;
}


Make sure to remember the semicolon on the end of the attribute, it can cause a lot of problems if you don’t.

Let’s start with the Class. A class in css is started with a . and can be used multiple times. Normally a class is used to contain areas, explained below.

Next is an ID. and ID is defined by a # and can only be used once. IDs are normally under a class.

The tag is the html attribute you wish to edit, like b, p, img, or a. It can also be nested, such as ul li.

The area is what is being called for change. A quick list to get you started :

background:black;
– background color set to black (can use hex or RGB, explained later)

background-image: url("images/image.png");
– background image

background-repeat:no-repeat;
– stops the background for repeating, use repeat-x or y to get the image to repeat in one direction

font:georgia;
– set the font to Georgia.

font-size:12px;
– set the font size

color:white;
– set the font color

margin: 5px 5px 5px 5px;
– set all margins to 5px, area outside of the box font or objects are in. (order is up right down left)

padding: 5px 5px 5px 5px;
– set padding to 5px, padding is how much space is in between the object and the container.

float:right;
– float an element to the right of the scree, can also be left. (explained later)

clear:both;
– clears floats so elements aren’t scattered randomly. (explained later)

width:200px;
– set the width of an element.

Now you at least have a basic understanding of CSS. Now there are two ways to put a CSS style on your page, either locally on the page or embedded.

Local:
<style type="text/css"></style>


Embed:

<link href="style.css" rel="stylesheet" type="text/css" />


The beauty of embed is that the SAME sheet can be used on ALL pages making it easier to edit fonts and other items globally without the hassle of editing every page. Simple yet extremely effective.

CSS – LAYOUTS

Now then some may still be wondering how CSS can replace tables for design. The float element. Make a new html document and a new css document in dreamweaver (or in notepad just save as all files and put .css on the end of it)

Floats align an element to one side of its parent contained (in most cases the browser) to either the left or the right. A Clear Float is essential to alleviate some of the bugs in IE as well as reset the float for elements that are below the one that is floated.

In the html document put this :

<html>

<link href="style.css" rel="stylesheet" type="text/css" />

<div class="main">

<div id="container">

<div id="header"><h1>Page title</h1></div>

<div id="sidebarleft">
random text! Hello world!
</div>

<div id="content">
more random text!
</div>

<div id="footer">
copywrite stuff
</div>

</div>

</html>



save it.

Now in the CSS document put this :

body  {
font: 100% Georgia;
background: #000000;
margin: 0;
padding: 0;
text-align: center;
color: #FFFFFF;
}
.Main #container {
width: 800px;
background: #FFFFFF;
margin: 0 auto;
text-align: left;
}
.Main #header {
background: #000000;
background-repeat:no-repeat;
padding: 10px 10px 10 px 10px;
}
.Main #header h1 {
margin: 0;
padding: 10px 0;
}
.Main h1 {
font-size:24px;
font-family:Georgia, "Times New Roman", Times, serif;
}
.Main h2 {
font-size:20px;
font-family:Georgia, "Times New Roman", Times, serif;
}
.Main #sidebar1 {
float: left;
width: 150px;
background: #FFFFFF;
padding: 15px 20px 0 0;
margin: 0 15px 0 0;
}

.Main #mainContent {
margin: 10px 15px 5px 10px;
padding: 10px 15px 5px 10px;
}

.Main #footer {
padding: 0 10px 0 20px;
color:#FFFFFF;
background:#000000;
}
.Main #footer p {
margin: 0;
padding: 5px 0;
}



save it as style.css

Open the page. You now have a CSS base to do whatever you will with to make a website out of. Play around with a few things and see where it can take you, experimentation is the best way to learn anything.

If you want me to make any more tutorials on web design send me a PM with the title as the subject of the tutorial.

This post has been edited by JackOfAllTrades: 20 January 2011 - 03:29 PM
Reason for edit:: Fixed funky quotes.


Is This A Good Question/Topic? 5
  • +

Replies To: CSS based Design 101

#2 jwoody23  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 28-December 09

Posted 28 December 2009 - 04:17 PM

Awesome, Thanks for the tutorial
Was This Post Helpful? 0
  • +
  • -

#3 rwilcher  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 03-October 09

Posted 30 December 2009 - 01:44 PM

This is the bees knees :D Just what I needed. I can try all this stuff with HTML-tools and my local webserver. KUDOS to you. I am going through the whole tutorlai after that it's on to PHP and postgresql db stuff. Thanks again.
Was This Post Helpful? 0
  • +
  • -

#4 3G Alarm  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 31-May 09

Posted 15 January 2010 - 11:57 PM

very good tutorial for beginners nice work
Was This Post Helpful? 0
  • +
  • -

#5 Lurks  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 28-February 10

Posted 06 March 2010 - 08:49 PM

This was so easy to figure out. Thanks for the help man!
Was This Post Helpful? 0
  • +
  • -

#6 Harlen  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 40
  • Joined: 08-February 10

Posted 24 March 2010 - 09:04 AM

Good tutorial! Nicely done.
Was This Post Helpful? 0
  • +
  • -

#7 caseyb313  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 03-March 10

Posted 26 March 2010 - 11:09 AM

Thanks ! very helpful !
Was This Post Helpful? 0
  • +
  • -

#8 crazzy.x  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 07-April 10

Posted 07 April 2010 - 02:46 AM

thanks its nice ...
Was This Post Helpful? 0
  • +
  • -

#9 espirator  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 07-March 10

Posted 09 April 2010 - 06:39 AM

What can be more than this :D it's so beneficial tutorial. Thank u so much
Was This Post Helpful? 0
  • +
  • -

#10 ExpensivE  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 17-April 10

Posted 18 April 2010 - 12:21 PM

hi everyone. just read this and i have a few questions. i'm still new to css so i hope you can help me with this.
ok, so far i thought that css was easy but this tutorial confused me completely... i mean all that code, and the only things you can see done is a background and text colour and the fact that text is centred...
ok as far as my knowledge goes i can clearly see and recognise the code in both html and css for background, text colour, style, alignment. i also recognise the code for the sidebar, but when you preview the page its not there...

Quote

.Main #sidebar1 {}
that's from css.

Quote

<div id=”sidebarleft”>
that's from html. so here i assumed that it was just a mistake and changed the css code to this
.Main #sidebarleft {
but apparently it didn't do anything. so that's the first thing that really confuses me.
another thing is
.Main #sidebar1 {}
what does ".Main" do? i never used this before. i used to do simple
#sidebar1 {}
and it worked perfectly. well i hope someone has time to answer my question, and thanks for the help in advance. :)
Was This Post Helpful? 0
  • +
  • -

#11 Shado3225  Icon User is offline

  • D.I.C Regular

Reputation: 17
  • View blog
  • Posts: 325
  • Joined: 23-February 10

Posted 08 November 2010 - 03:27 PM

I'm confused! What is .Main #container, .Main #header and so forth?

Surely the container that holds all the elements should be a ID? If one considers what ID and class stands for and why those particular names where given to them.

Quote

* ID = A person's Identification (ID) is unique to one person.
* Class = There are many people in a class.


So the container of code should be a ID and everything else within that container should be a class.
Was This Post Helpful? 0
  • +
  • -

#12 julianht  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 18-December 10

Posted 19 December 2010 - 12:38 AM

awesome.. very helpfull..
Was This Post Helpful? 0
  • +
  • -

#13 Guest_Guest*


Reputation:

Posted 19 January 2011 - 11:06 AM

the <link .... etc> needs to be contained between <head></head> tags and the "curly" quotes are not 'real' quotes when copied & pasted so they need to be changed to "straight quotes" or the html may not link to the style sheet -- (this website's probably using a "Typography plugin/widget/addon" for it's CMS that's converting straight quotes to curly quote ..!!!wrong for code!!!!)

was going to post a LINK to an example pic but it messaged me "that file type not allowed" ??? they don't allow PNG files here???? wth?? archaic!! so see ATTACHED image Attached Image
Was This Post Helpful? 0

#14 Guest_dezi*


Reputation:

Posted 19 January 2011 - 11:10 AM

hmm... doesn't show image name which says "top link code doesn't work bottom does"

note differences in quotes ...
(no way to edit post here? ps. give someone 30 secs after posting to edit is a good idea)

EDIT: Fixed, thanks for the feedback. People who join the forum get editing capabilities after posting a few times.

This post has been edited by JackOfAllTrades: 20 January 2011 - 03:30 PM

Was This Post Helpful? 0

Page 1 of 1