HTML/CSS Basics

Vaska A / 2009-01-16 15:04:01   

This will become some kind of a tutorial in the future...people just getting started out should read this. I'll improve this later as I have time. This is my own simplistic take on things...I try to not use jargon for these things myself.

What is html?

HTML is a kind of code that you use to build webpages.

What is CSS?

CSS is a kind of code primarily used to go give 'style' or aesthetics to html.

How can I tell them apart?

CSS is usually stored in an external file called something like 'style.css'.

This is a list of html tags.

This is a list of all css properties.

If you read through these many of them are self-explantory. By clicking on them you can get fast defintions of things. The more you get familiar with them the easier this gets.

Html and CSS do not do the same things in most cases. With html you can wrap text in < strong > tags to get bold text. With CSS you can place a property onto text that will make it bold. But the two are different procedures.

  1. <strong>My text is bold.</strong>
  1. .bold { font-weight: bold; }

Attributes

Html is composed of tags and attributes. Attributes tell the tag various things. For instance, this image has attributes of source, height and width:

  1. <img src='myimage.jpg' height='100' width='100' />

Properties

CSS uses properties, many of which can do similar things to html, to place style onto things. Consider this example:

  1. p { font-size: 12px; }
  1. <p>My text is 12px tall.<p>

What we have done here is style ALL the p (paragraph) tags on our page with a font-size of 12px.

Does it make sense how an attribute works directly with a tag while a property can effect many tags at the same time?

Furthermore, one can further style things through the use of id's and classes. To extend the example above using a class.

  1. p.bigger { font-size: 18px; }
  1. <p class='bigger'>My text is 18px tall.<p>

What we have done here is style all paragraphs with a class of 'bigger' to have larger text.

Class are denoted with a . in the stylesheet. ID's are identified with a #.

------------------------------------------------------

Familiarize yourself with tags, attributes, properties and look over your code and your style.css file. Look for the simple patterns that line up the various things. What does #menu style? What does #content .container style? What are 'li' tags? How do you attach styles to them?

Many newbies ask these questions - some understand quickly and some do not. But this stuff is easier than complicated actions in Illustrator. Just look for the patterns...it's really easy.

Hammer / 2009-01-16 15:11:26   

Haivng just gone through the process of CSS tinkering myself, would also recoment the Firebug plugin for Firefox. It has been invaluable for me as it allows you to trial changes to your CSS without wrecking your website.

It also allows you to inspect other websites and learn from their use of CSS.

Vaska A / 2009-01-16 15:19:15   

Yes...super good tool.

Firebug

I was not so good with math until I realized that all I was searching for much of the time were patterns (even visually). Once I discovered the patterns, or derivations of patterns, it become much more simple and fun.

DO NOT POST QUESTIONS IN THIS THREAD. ONLY POST RELEVANT RESOURCES ABOUT HTML/CSS.

;)

hlain83 / 2009-02-14 23:39:24   

Questions go in the forum...not this thread...thank you...

cruz / 2009-02-26 15:29:44   

hallo all,
this is a nice book for beginners: Build Your Own Web Site The Right Way Using HTML & CSS The free sample chapters get you a long way customization wise.

;)

cruz / 2009-03-22 14:32:06   

Ok, now that you got the basics of HTML/CSS, maybe your asking yourself about the modus operandi? How do you really do it?

There are many ways, they usually depend on which tools you use and your working process, this is one:

Which document?

For starters, as stated above, a document called style.css styles almost everything in your website, there are a few of them in several folders, you'll need to edit/change the one your website is actually using.

You can tell which one to edit by looking in your Exhibits > Settings section - what is the template set? Eatock? Sample? Something else? If you are in Advanced Mode you can even switch. These represent theme folders found in /ndxz-studio/site/$theme.

If you're going to seriously style your site using css, first you'll need to choose the sample template from settings, then the documents you'll need to address/change/deal with will be located in the sample folder. There are two css documents there, one is Internet Explorer specific and is called ie.css, the other one is the style.css, there is also what is usually called your website template, the index.php.

With which tools?

To actually edit/change the documents and upload them to your server you'll need to use a couple of apps. Among many good ones, there are some nice freeware ones that I'll recommend (please note that I'm a Mac user and don't forget to donate a few bucks if you use them extensively). To edit the documents: TextEdit, TextWrangler, NotePad (win), Smultron, Taco etc. For ftp (upload/dowload) purposes you can use Cyberduck or Filezilla (win). Before using Coda (the killer app for web development 99$) I used to feel comfortable with the TextWrangler / Cyberduck combo.

Backing up

So, now you got your apps, a nice thing to do first is to have an exact copy of the website you got sitting in your server copied to your computer, do that (drag and drop with Cyberduck), those will be your local files (and backups, be sure to backup regularly, including the database).

Editing and seeing the difference

Now as for the editing process, our method will be to edit the local files and upload them to the server:
open your local style.css (sample/style.css) with your favorite editor, make changes, save, upload via your favorite ftp app to the same place where the remote style.css is in your server (i.e. if you're editing locally on sample/style.css you should upload to the remote sample/style.css), a window will prompt asking you if you want to replace the existing file, click replace. Go to your site, reload and see the alterations (you may need to shift reload once an while to clear cache). Repeat while… ;)

More utilities

Once you begin styling your website through editing your style.ccs you'll find very useful to know which things to change and which is which between your website and your css document. As mentioned above the Firebug plug in for Firefox is an excellent way to inspect your website elements and make virtual changes to see how things look. If you use Safari 4 there's a Develop section in the menu bar that does a similar job (you have to activate it in preferences>advanced). This way you'll know what everything is and does. Slowly the mysteries of web design will unravel before your eyes ;)

Now learn some css basics and have fun!

max / 2009-03-24 00:26:28   

Mastering CSS Coding: Getting Started from Smashing magazine....

Covers:
Padding vs. margin
Floats
Center alignment
Ordered vs. unordered lists
Styling headings
Overflow
Position
Background images
Image enhancement
PSD to XHTML

posted by ArsonDPI

max / 2009-03-24 00:27:00   

Css differences in IE 6 7 and 8 from smashing magazine...
It's got bug fixes and some workarounds...

Also you might want to check out the IE7 Script which is a javascript that fixes explorers nasty behaviours...

Update: You might want to check out these references for IE bugs and fixes

posted by ArsonDPI

This thread has been closed, thank you.