This series is a crash course in CSS and XHTML for all the newbies. I was once a newbie as well, until I read two very-easy-to-read books on the subject, CSS Mastery and Bulletproof Web Design (review), available together at Amazon.
HTML/XHTML
In order to get a full understanding of how CSS styles HTML, we’ll need to get a basic understanding of HTML and XHTML (Extensible Hypertext Markup Language). The biggest difference between HTML and XHTML is that XHTML is more strict and less forgiving than HTML. For example, in HTML it is okay to write <BODY></body>, while in XHTML, it will return an error. Therefore, it is always in best practice to create your HTML in all lowercase tags. Also in XHTML, all tags must be closed. For example, <p></p>, <br />, <hr />, <img src="#" />. It is always in best practice to write in XHTML.
There are 2 different types of tags: inline and block-level. Inline tags allow multiple instances of that tag to be placed on the same line (a, em, span, strong, img). Block-level elements allow only one instance per line, placing the next tag below the one before it (table, p, h1, div, ul, li, ol).
A doctype is also important as it can effect the rendering of the CSS. That's a whole other world.
CSS Syntax/Overview
CSS (Cascading Style Sheets) styles the HTML. The syntax for CSS is as follows:
The selector is the HTML tag, id (#), or class (.) being styled. The styles are stated within curly braces. The property is what is being styled (margin, padding, font-size, etc) and the value is the value of the property (10px, 100%, #000000). It is always best to end a property: value;" declaration with a semicolon. This can make or break your styles.
An id (#) refers to the identity of the element being styled. It can only be used once per page, therefore, it is best to use it to describe an area of the page (#wrapper, #header, #footer, #bodyContent). A class (.) refers to any HTML tag that is receiving special treatment. For example: p.quote, a.externalLink, li.highlighted. While HTML tags can receive more than one class separated by a space, it can only receive one id.
Inline, Embedded and External Styles
CSS cascades, meaning that an elements' style inherits any style previously called for that element. For example, if there is a style of p { color: #FF0000; } at the top of a CSS file, any call for a styled p after that will inherit the #FF0000 color.
An external style sheet is located in an external file, "filename.css." An embedded style is located in the head of the HTML file, between <style></style> tags, overwriting any specific style declared in the external style sheet. An inline style is located on the tag itself, declared as style="margin: 0; color: #000000;".
Coming up next is Learning CSS Part 2: Classitis/Divitis and Font Control... stay tuned.
No comments:
Post a Comment