CSS for Dummies

It has been a long time since my last post. Recently, I am helping my ex-boss K.P develop a website for his company, it turns out to occupy most of my spare time. Fortunately, it benefits my a lot. This is my first time to use Groovy/Grails to develop, I find Groovy/Grails is really cool and friendly. Another thing is CSS, CSS has been my nightmare all the time.So I take this chance to get over it. It still has a long way to go, though.

Here I summarize some basics of CSS - they are so primitive that many people would ignore it, just like me, and I have paid the tuition yet.

CSS Syntax

How to apply CSS Style

1).Apply directly to HTML element.
<p style="color: red; background-color: yellow">This is red text with a yellow background.</p>

2)Embed within the HTML document.
<head><style type="text/css">p{color:red;background-color}</style><head>

3)Use external style sheet.
<head><link href="website.css" rel="stylesheet" type="text/css"></head>

CSS Selector

1). Universal Selector: *
All elements.

2). Type Selector: name
The name of an element(tag name)

3). Class Selector: .class value
The value of an element's class attribute.

4). ID Selector: #id value
The value of an element's ID attribute.

CSS Box Model

The rectangular boxes, which are generated for elements, are described by the CSS Box Model. Boxes are comprised of four areas. The inner most area is called the "content" area. Surrounding the "content" area is the "padding" area. Surrounding the "padding" area is the "border" area. Surrounding the "border" area is the "margin" area. See the box model diagram below.

1."content" area: This area is where the element's content is placed. Content is text, images, etc.

2."padding" area: This area separates the "content" from the "border." The size of this area can be set to zero.

3."border" area: This area is where a box border is located. Different border styles (e.g., solid, dashed, dotted, etc.) can be specified. The "border" is optional.

4."margin" area: This area separates the "border" from the outside of the box. The size of this area can be set to zero.

Last but not least, I would like to recommend a terrific CSS tutorial: Kick Here

comments powered by Disqus