Rainbow Quill

Inline XHTML Styles

yuuzai — Wed, 20 Aug 2008 02:51:41 +0000

As I stated in Stylesheet Basics ⇒, another way to add styles is by using the style attribute of most XHTML tags or by adding a style tag on the XHTML’s head tag.

These approaches invalidate one of the goals of XHTML and CSS; which is to separate the data from the design that is why I discourage to use these methods. But sometimes, when handling complicated layouts and doing advanced javascripting on your XHTML page, you might need to use the style attribute to override the styles defined in your CSS or the style tag.

As you can see in the following example, I’ve added a style tag inside the head tag. And for some tags inside the body tag, I’ve added the style attribute that gives them a specified style.

Inline XHTML Styles

This example illustrates how to use inline XHTML styles.

Lorem ipsum dolor

Sample Paragraphs

Sed nisi felis, tincidunt et

Vestibulum ante ipsum primis

Duis felis justo, rutrum in,

Note the CDATA comment-like text that encloses the style data. This is required for style and script tags so that the XML Parser (used to validate XHTML pages) won’t be confused if it sees XHTML tags inside the style and script tags. Again, if you look at the style data, it is similar to the CSS syntax described here ⇒.

If you want to see how the page looks like, you can view it here.

For the inline style attribute, The syntax is the same as the code inside the CSS selectors (see Stylesheet Basics ⇒). To describe what these styles do, I would be teaching them in the next CSS tutorial. But if you inspect the code, I’m sure you can guess what the float property is for. Well it is a way to create sidebars without using tables in XHTML.

The first h1 tag got a border-bottom property set and that explains why it has a line beneath it. The span tag is used for inline text formatting. I used it to change the color of a part of the first h1 tag to ff0000 . The "Lorem Ipsum Dolor"-paragraph, I’ve set three style properties. I’ve set it to float on the left side, to have a width of 200 pixels (200px) and a margin of 50 pixels (50px) on its right side (margin-right).

Then save the file as my_second_page.htm and then view it in a browser. And by the way, isn’t it fun to see that all of your hardwork yields pages that are fully compliant to the XHTML 1.1 and CSS 2.1 standard? Well for me, it is.

Stylesheet Basics

yuuzai — Sun, 10 Aug 2008 04:58:59 +0000

One of the goals of XHTML is to improve on the structure of HTML documents. And one of these improvements was to separate the data from the layout & design. That is why XHTML has deprecated tags like font, b, i and u. This gave way to the XHTML attribute style where you can use special syntax to provide styles. The format used by the style attribute is actually the one used by Cascading Stylesheets (CSS). Another way of adding styles is by adding a style tag with CSS code inside within the head tag of the XHTML document. But the recommended way is by linking the XHTML document to an external CSS document.

This is the modified XHTML document from Starting an XHTML Page ⇒:

Basic XHTML 1.1 Structure

This is just a sample XHTML 1.1 document.

Another paragraph goes here.

As you can see, I added a link tag inside the head tag. Which states that we are going to link/relate (rel) a stylesheet to the current XHTML page. The href attribute defines the absolute/relative (relative in this case) path to the CSS file. The type attribute defines the MIME type of the CSS document which is text/css. The media attribute is used for different rendering modes. screen means that this stylesheet will be used when the page is viewed on a screen. Other values for the media attribute are print or all. I’ve also added 2 more p tags and set some id and class attributes.

CSS is composed of selector blocks. And within a selector block, different properties can be set. This is an example of a CSS file:

body {
   background: #123e5d;
   color: #ffffff;
   font-family: "Tahoma", sans-serif;
}

h1 {
   font-family: "Garamond", "Times New Roman", serif;
   color: #d6ff74;
   border-bottom: 1px solid #1f79b8;
}

p {
   margin-bottom: 20px;
}

p.notice {
   background: #a1d0f1;
   color: #333333;
   margin: 0 30px 0 30px;
   border-left: 5px solid #1f79b8;
   padding: 5px 10px 5px 10px;
}

#footer {
   border-top: 1px solid #1f79b8;
   text-align: right;
}

body, h1, p, p.notice and #footer are called selectors. The body selector selects all XHTML tags named body. The h1 selector selects all XHTML tags named h1. p.notice selects all XHTML tags with the class attribute set to notice. #footer selects the XHTML tag with the id attribute set to footer.

XHTML id attributes must be unique. Meaning you cannot have 2 tags with the same id. Even if they are two different tags (e.g. h1 and p).

Let’s dig down on the body selector. This selector has 3 properties set. The background is set to a color 123e5d . CSS uses the hex format for colors. This means that the background color of the page is to be changed to 123e5d . The color property sets the default text color of the body tag and children tags to ffffff . Another property set is the font-family. This states that the body tag and all children tags will use the font Tahoma. If Tahoma doesn’t exist on the system, it will use the system’s default sans-serif font.

Still ok? For the h1 selector, we have 3 properties. Since h1 is a child tag of body, it would inherit the color and font-family attributes. But we have overriden the values with this selector. We have set the font-family attribute so that all h1 tags will use the Garamond font. If Garamond doesn’t exist, it will try to use Times New Roman. If it still doesn’t exist, It will use the system’s default serif font. We have also overriden the color attribute so that all h1 tags will use the color d6ff74 . We also added a solid-line (solid) border on the bottom with thickness of 1 pixel (1px) of color 1f79b8 .

Let’s move to the p.notice selector. This selects all p tags with it’s class attribute set to notice. I’m sure now you understand how the background and color properties affect the tags. The border-left tag acts like the border-bottom property. We have set the margin of the selected p tags to 0px (top), 30px (right), 0px (bottom) and 30px (left). The padding property defines how thick is the padding inside the tag so that the inner contents won’t touch the boundaries of the tag.

If you want to add a border on all sides, you can use the border property instead of specifying the border-top, border-right, border-bottom and border-left properties.

The margin property acts like border, and is a shortcut for setting margin-top, margin-right, margin-bottom and margin-left properties. If you give 4 values, it will set the margin in the following order: top, right, bottom and left. If you provide a single value, it will set it for all 4 sides.

The padding property acts like margin and also has the selective properties padding-top, padding-right, padding-bottom and padding-left.

For the #footer selector, this selects the last p tag because its id attribute is set to footer. We have added a border on top and set the text alignment (text-align) to be right aligned (right).

And by saving the XHTML file as styled_my_first_page.htm and the CSS as my_first_page.css, you can now view it in a browser. You may need to change the path of the CSS based on your folder structure. If you placed them in the same folder, you don’t need to put the ../css/. If you want to see how the page looks like, you can view it here.

Starting an XHTML Page

yuuzai — Fri, 08 Aug 2008 06:56:43 +0000

So this is my first XHTML tutorial. The tutorials here will be strict to XHTML 1.1 W3C Standard and tested using Mozilla Firefox 3.0.1 (as of this writing) and Internet Explorer 6.0 (since I don’t want to upgrade to version 7.0). So let’s start it simple.

XHTML or Extensible Hypertext Markup Language is a markup language similar to HTML. It is also used for web pages but is also compatible with Mobile XHTML browsers. These small browsers have problems rendering non-XML standard webpages like HTML. XHTML is the XML-standard version of HTML. New tag constructs and rules are added. While redundant tags are also removed.

To give an introduction to a few terms that I would use. Let’s look at the following example:



tag3 contents
tag4 contents

All 5 examples are called tags. tag1 is a normal tag paired with a closing tag. tag2 is also a tag but is short-closed. tag3 is like tag1 but it has an inner content of tag3 contents. tag4 is like tag3 with tag4 contents as its inner content and has 2 attributes, attrib1 and attrib2, with values value_1 and value_2 respectively. tag5 is a short-closed tag with an attribute attrib1 with value value_1. XHTML pages are composed of tags like these. Some tags require to be fully-closed while some require to be short-closed.

So to start, you need to specify the document type, also known as the DOCTYPE. This is the source of every web developer’s problem. Most new (and some experienced) web developers encounter the “IE” problem. Yes I do agree with them that the rendering engine of FF is different from IE thus resulting to many design and layout differences. All (known) web browsers render pages in 2 modes:

Standards Mode - This is the mode that the browser uses when it encounters a valid DOCTYPE declaration on the (X)HTML document. It follows a strict way of layouting a page. It follows the specified Document Type Definition (DTD) in the DOCTYPE declaration. DTD defines the rules of the tag structure of the document. Like which tags can be nested with a specific tag. Or like what attributes can a tag have.

Quirks Mode - This is the default mode of browsers when they encounter an invalid DOCTYPE declaration or if they don’t have one. The browser renders the page top-to-bottom based on the tag structure on the file. This results into many of the rendering problems/differences. Of course, we don’t want to let the browser render in this mode that’s why we should be following standards.

This is the normal structure of an XHTML 1.1 document:

Basic XHTML 1.1 Structure

This is just a sample XHTML 1.1 document.

The first line is always the DOCTYPE declaration. This specifies that we are going to use XHTML 1.1 and use the DTD associated with it. Following that is the html tag defining that we are going to use the XHTML namespace (from the xmlns attribute). Namespaces areused by XML documents to define the scope of tag rules. The html tag also specifies the language we are going to use via the xml:lang tag.

Inside the html tag are two tags, namely head and body. The head tag contains the headers and metadata of the XHTML document. The meta tag with http-equiv attribute set to Content-Type specifies the content type of the document and how it is going to be delivered to the browser. We set the MIME type to application/xhtml+xml and the character set to UTF-8.

The title tag must be inside the head tag. This contains the page title of the XHTML document. The content of this tag is what is displayed on the browser’s title bar.

Following the head tag (after closing it) is the body tag. The content of this tag is what is displayed on the browser content pane. In this example I’ve added two tags inside the body tag. A header 1 (h1) tag and a paragraph (p) tag with some text inside them.

And by saving this file into my_first_page.htm, you can now view it in a browser. If you want to see how the page looks like, you can view it here.

Website Live!

yuuzai — Sun, 03 Aug 2008 04:00:36 +0000

Welcome! Today, Rainbow Quill goes live. This website will be an online reference for XHTML, CSS, JavaScript, AJAX and PHP tutorials. Hopefully, this attracts web developers (freelancers, personal developers, bloggers —ranging from beginner to professional). I would start posting basic tutorials as a request from some of my colleagues. And these tutorials will go more advanced as time goes by.

To introduce myself, I’m Jasper Castillo, known as Yuuzai in online communities. I used to be a freelance web developer for 4 years with around 7 years experience. Created a lot of websites for startup companies, school organizations, small projects and blog designs. I was part of different web teams in our school. My first experience with web development was in highschool. I also contributed plugins and themes to the WordPress community. Anyway, these are my preferences in web development:

Server-side scripting: PHP
RDBMS: MySQL
Front-end scripting: XHTML1.0-transitional or XHTML1.1
Stylesheet: CSS2.1
JavaScript library: Prototype-JS
CMS: WordPress
Graphics Design: Adobe Photoshop CS3 Extended
Animation: Adobe Flash CS3 Professional

I stopped freelancing when I entered the corporate setting. I didn’t have time to continue and work on those types of projects. But I still do designs for myself and some basic requests (usually takes a few minutes of my time) from my friends.

Hopefully, you’ll enjoy and learn a lot from this project of mine.