basic html and css tricks n tweaps

8/13/2019 Basic HTML and CSS Tricks n Tweaps

1/18

yet another insignificant programming notes... | HOME

HTML & CSS

Tips, Tricks & TweaksHow to include an HTML file into another HTML file?Why? So that you don't have to repeat certain HTML codes (such as header, footer) in every file.

There are a number of methods, BUT I can't find the best method (each method has its own merits

and drawbacks). The methods can be classified into server-side and client-side techniques.

Server-Side Techniques

1.Server-side Include:Most of the HTTP servers (such as Apache HTTP server) support a

so-called Server-side Include (SSI) technology, where the server can be asked to insert

another HTML file into the current HTML file at runtime via a special directive " #include",e.g.,

2.

3.

4. ......

5.

6.

7. ......

8.

9. ......

10.

The #include directive is often enclosed inside an HTML comment, meant for those

servers/clients not supporting SSI.

This is clean and simple, but although most servers support SSI, they might not allow allusers (especially you) to executeSSI.

Client-Side Techniques

1.JavaScript: Use JavaScript to print out the HTML codes to be embedded. For example,

create the following script and saved as "footer.js":

2. // Footer.js
http://www.ntu.edu.sg/home/ehchua/programming/index.htmlhttp://www.ntu.edu.sg/home/ehchua/programming/index.html


2/18

3. document.write('')

4. document.write('

Sent your comment to xxxx
')
document.write('')

You can then include it via:

Drawback?

a. Not all browsers support JavaScript(?!) Even the browser supports JavaScript, the

user might not enable it!

b. Search engine may not be able to search the JavaScript contents (and therefore NOT

for a professional web designer)

5.HTML Inline Frame:For example,

6.

7. Your browser does not support inline frame.

8. Click here to see the included contents.

Drawback?

. Again, not all browsers support Frame(?!)a. Search engine may not be able to search the inline frame's contents.

b. How much space to be allocated for the inline frame?

How to Format Tables via CSS

Formatting table using CSS is messy?!

How to Centralize a Table (or Block Elements such as Division)?

The old way of centralizing element via align="center|left|right|justify" attribute,

e.g.,, ..., has been deprecated in HTML 4.

There is no such property called "align" in CSS.

There is only one(?) alignment property in CSS - a text property called text-

align="center|left|right|justify". But "text-align:center" does not center the

, but center the texts inside the table..

To center a table (or a block element such as , ), you need to set the left and right

margins to "auto" (In IE, you may need to set text-align="center"too) as follows:


3/18

table {

margin-left: auto;

margin-right: auto;

text-align: center; /* IE only */

}

As discussed before, browser divides the remaining widthequally between left and right margins, so

as to center the block element.

How to Set the Width of the Table and Individual Columns?

You can use to set the width of the table, where nis measurement

such as 300pxor 80%. The percentage is relative to the containing element such as or .

Take note that width, margin, border and padding properties are NOT inherited by its descendants

(, , , and etc.)

To set the width of a columns or a set of columns, first declare appropriate or ,

then use . Take note that you can

only apply background, borderand widthproperties to and . To make life easier,

use only with possibly span, and ignore .

You can also set the width of .This is not recommended, as there are many 's.

Since each table has its own width, it may not be feasible to set the width globally in CSS. I typically

set it in the tag. For example, this table has the width of 80% across the screen (or the

parent), with 4 columns of width 50%, 10%, 10%, 30% (totaling 100%).

......

......

How to Format Tables via CSS?

1.Define a classfor each sub-class of tables, e.g.,

table.table-data{ .... }

2.Use the contextual descendant selector for the subordinates , and , e.g.,


4/18

3. table.table-data tr { .... }

4. table.table-data th { .... } /* descendant, not necessarily child */

5. table.table-data td { .... }

6.

7. .center-block { /* center a block element */

8. margin-left: auto;

9. margin-right: auto;

}

10. In the HTML documents, assign the to the appropriate table's sub-class, e.g.,

11.

12.

13. ...

14. ......

15.

16.

17. ...

18. ......

19.

20. ......

21. Recall that classattribute can take multiple values. For example, if you need to center the

table, you could define a class-selector says ".center-block", and apply this class to the

desired HTML element as an additional class value.

22. How about using ID-selector for table? This works only if there is only one such table in

each HTML document, because idmust be unique within an HTML document. Not really

practical!

How to Set Different Background for Different Columns?

Specify the background-color in or . Sad to find out that and

only support attributes background, width and border. You cannot set the font-family, text-

align, or even the foreground color.


5/18

How to Set Different Font and Alignment for Different Columns

For example, column 1 shows the program code (to be displayed in monospace font), column 2

keeps the explanation in normal font, etc.

You can't apply font, text-alignto . So you probably have to set at individual level?!

How to Set Different Background for the Header Row, the Odd and Even

Data Rows?

Specify the background-colorin the .

table.table-data tr th { /* for the header row */

background-color: #66ffff;

}

table.table-data tr td { /* default for all the data rows */

background-color: #ccffff;

}

table.table-data tr.tr-alt { /* for alternate rows, need */

background-color: #eeffff;

}

...

...

...

...

...

...


6/18


7/18

How About 's Deprecated Attribute cellspacing?

Use table's property border-collapse:collapse|separate and border-spacing:n (for separate

border). Look at the following codes:

th, td {

border: 0;

margin: 0;

padding: 0;

background-color: #ffffdd;

}

The browser still leave a small gap (default cellspacing) between the cell! Instead of using , try this:

table { border-collapse: collapse;}

The value "collapse" causes the cells to share common borders. It overrides the default

cellspacing="1".

You can use CSS property border-spacingto replace the cellspacing, e.g.,

table.class-1 {

border-collapse: separate;

border-spacing: 10px;

}

table.class-2 {

border-collapse: separate;

border-spacing: 10px 5px;

}

[It works on Firefox, but does not seen to work on IE! So, use cellspacing , which still works!]

Color

Color theme is the most important factor affecting the appearance of your web pages. I am NOT an

expert on colors, but these are what I understood.

216 Browser-Safe Colors

Not too long ago, the computer monitors can display only 256 colors (aka palettes). Hence, web

designers created the so-called 216 browser-safe colors, which can be shown correctly and quite


8/18

consistently on all the computer displays. Today, most of the computer monitor can display 24-bit

true colors, is it still relevant?

The 216 browser-safe colors are obtained mathematically (and not artistically or psychologically, and

hence really really ugly), by putting values of #00, #33 (51), #66 (102), #99 (153), #CC (204), #FF

(255)on each of the RGB triplets (666=216).

Most computer monitors today are at least capable of display 16K (or 16384) colors. You could put

values of #00, #08, #10, #18,..., #F0, #F8, #FFon each of the RGB triplets.

Default Color Names

Again, the HTML/CSS provides default color names, such as red, green, blue, grey, and etc. Again,

the color value for these color names are obtained numerically. As a result, these colors are really

really ugly. Don't use them!

Munsell's Color Wheel

[TODO]

Color Themes

[TODO] more

Fonts & Typography

The choice font faces are probably the one of the most important factor affecting the appearance of

your web pages. These are the main categories of fonts:

1.Serif:Serif fonts come with little horizontal tails, to guide you in reading a long (horizontal)

line of texts. Serif fonts are used in printed materials such as newspaper for easy reading.

For example,Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa

qui officia deserunt mollit anim id est laborum.

2.San-serif:without the little tails, used for computer display and short heading in printed

materials. [I don't know why? Probably you are not suppose to read long lines from the

computer screen.]

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt

ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in

reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint

occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est

laborum.

3.Monospace (Fixed-width Font):the old typewriter fonts, used for displaying program

code, where spacing and alignment is crucial.


9/18

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiatnulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.

4.Cursive:

5.Artistic:

Fonts look good in prints may not look good on screen. You are recommended to use san-serif fonts

for the web pages, which are displayed on computer screen.

This table shows you some of the common fonts.

SerifSan-serif

(Body)

San-serif

(Heading)Monospace

Times New

Roman Segoe UI (Segoe)TREBUCHET MS (UC) Lucida

Console

Georgia Tahoma Trebuchet MS (lc) Courier New

Palatino Helvetica Segoe UI Consolas

Arial Verdana Courier

Arial Narrow Arial Black

Lucida Sans

Unicode

Century Gothic

Calibri Impact

In CSS, fonts are specified in property font-family. You can use generic family names such as

"serif", "san-serif", "monospace", and "cursive". The actual font used depends on the individual

browser's settings.

Which Font Should I Use?

This is a million-dollar question. Some san-serif font is nice when use in body text (normal weight,

small font size, may need italics), others are suitable for use in heading (bold, bigger font size,

uppercase). Some fonts are nice in lowercase, but not too nice in uppercase. Some nice fonts are not

available in all the browsers (Windows 2000/XP/Vista/7, Mac, Linux?). For web publishing, you need

to select one that most of your readers can enjoy.

You probably want to use different fonts for body texts and headings:

1.Headings:use bigger font-size (and most probably in bold face) to draw readers' attention,

and help to organize the ideas. There are usually a few levels of headings. Set the letter-

spacing for headings.

2.Body Texts:comprises the main bulk of your writing. Use smaller but legible font-size. Use

italics or bold to emphasize certain terms or phrases.

These are my choices of fonts for web publishing (i.e., screen fonts, NOT printing fonts).


10/18


11/18

Lucida Sans Unicode Lucida Sans (Windows): although not specially designed for screen,but it look on screen.

A quick brown fox jumps over a lazy dog 1234567890



Calibri(Windows): it is a new font in Windows Vista which looks good on screen and print, but may not be

available in most of the non-vista browsers.




For Headings

Use san-serif fonts which look good in bold, bigger-size, and uppercase.

Trebuchet MS(Windows & Mac): created for the screen, especially nice looking in UPPERCASE 'M''&' 'W'. Good for larger-font size, but not smaller-font size for body texts.




Verdana(Window & Mac): the most commonly used font for web publishing. However,the bold fact is too broad.




Serif Fonts

If you need one...Georgia(Windows & Mac): specially created for screen. Nice looking but I seldom use serif font for

web pages.




Times New Roman(Windows) and Times(Mac): The most commonly used serif font.




Palatino Linotype(Windows) and Palatino(Mac): another good choice for serif font.




Others (Cursive, Artistic)


12/18

Century Gothic(Window, Mac(?)): This is quite a very interesting and artistic font. The font

width of each letter varies tremendously. The bold face seems to be more regular. How are

the italics?. unusual question mark?!




Comic Sans MS(Window, Mac(?)): Over-used nowadays.




Typographic Terminologies

Font Style: bold, italic, underline, strike through, double-strike through, double-underline.

Kerning: Space between characters

Leading: Space between lines

emboss, engrave, outline, shadow

em-space: a space equals to the width of letter 'm'

em-dash: a dash equals to two hyphens, for indicating break in a sentence

Font Testing Paragraph

This is the famous standard "Lorem Ipsum" passage, used since the 1500s, for testing the typesetting:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa

qui officia deserunt mollit anim id est laborum.

How to Use em-unit for Font Size?

"1em" is the current font-size (the width of letter 'm'). Try the followings:

body{

font-size:1.5em; /* try 0.8, 1, 1.5, 2 */

}

.new-font-size{

font-size:0.8em; /* try changing */

}


13/18

This is Heading 1, default size

This is Heading 2, default size

This is a paragraph, default size

This Heading 1 has em-font-size whose parent is body

This Heading 2 has em-font-size whose parent is body

This paragraph has em-font-size whose parent is body

The emunit is a relative measurement and is a multiple to the current font-size. The exception is

when emis used to set the font-sizeproperty itself, in this case, it refers to the font-sizeof the

parent element. In other words, for the first three elements in the above example, the font-sizeare

auto1.5, for the last three elements, they are 0.81.5, which are the same for , , and

.

Which is the Best Font Measurement? em, px?

The px (pixels) unit offers reliable control and consistent scaling across devices and display

resolutions. The emunit scales consistently as well and has the added advantage of allowing the end-

user to adjust the text size through browser's settings. However, to use emunit, you need to figure

out what is the parent element the current element is relative to.

Suggestions

"Don't use too many fonts. It looks ugly. It is distracting. It makes you reader work too hard. Give

them a break!"... I read this paragraph somewhere.

Use a font for the body. Use another font for heading. Use a monospace font for program codes and

listing.

Images

Graphics File Formats

BMP (Windows BitMaP):

Uncompressed, large but fast (no need to decompress).

Small images used for wallpaper, background, and Windows objects.

GIF (Graphic Interchange Format) and PNG (Portable Network Graphic):

GIF has two versions: GIF87a, GIF89a.


14/18

Lossless compressed using LZW (as in PKZip, WinZip), but supports only 256 colors.

Palette-based, limited to 256 color palettes. No good for full-color 24-bit real photo, best

used for line art, logo, cartoon and so on.

Progressive GIFs to get a sense of the image.

Transparent GIFs (with see-thru background): Of the 256 colors palettes, one ofpalette can be chosen as the background. The background palette can be set to

"transparent" for a see-thru effect.

Animated GIFs: Sequence of GIF images shown repeatedly. Much simpler and faster than

server-push or other animation technology.

There was a patent issues on using GIF, resulted in a new PNG (Portable Network Graphic)

format and the burn-all-gif campaign. The original LZW patent already lapsed in 2003-2004,

and the GIF can be used freely now (??).

JPEG (Joint Photographic Expert Group):

Lossy compressed using DCT with quantization.

Support 24-bit true color for real-life photo.

Progressive JPEGs similar to interlaced GIFs, to get a sense of the image.

No transparency support.

No animation.

JPEG2000: using Wavelet for compression, good for low bit rate application, but not popular

at all??

PNG (Portable Network Graphics):

Lossless.

More efficient compression algorithm than GIF (using LZW).

No animation.

Support transparency.

Can be used for computer-generated image, as well as photos (but not as good as JPEG).

How many colors? PNG8 supports 256 color palettes with 1-color transparency (replacement

for GIF); PNG24 supports 24-bit true color; PNG32 supports 24-bit color plus 8-bit alpha

channel (with 256-level of transparency). (JPEG and GIF do not support alpha channel.)

Why Can't JPEG Support Transparency?

The primary reason is that JPEG compression is lossy. That is, a image pixel of a certain RGB value,may not recover its original RGB value exactly (but close) after compression and decompression.

Suppose a certain (Rx,Gx,Bx) triplet of the original uncompressed image is picked to be transparent.

This triplet is compressed into JPEG format for storage and transmission. It has to be decompressed

for display. However, due to the lossy compression algorithm, you may not get back the original

(Rx,Gx,Bx) value (but somewhere very close). Thus, the pixel will not be shown as transparent. On the

other hand, other pixels with triplet of nearby value such as (Ry,Gy,By) must be decompressed into

(Rx,Gx,Bx), and be shown as transparent.


15/18

Rule of thumb

1.Your primary objective shall be having the smallest image size(shortest download time) with

acceptable image qualityon the display console.

2.Use JPEG for 24-bit color photos. Use GIF/PNG for 256-color line arts, cartoons, and drawing

(all the drawings in my website are saved in GIF/PNG).

3.Use GIF for animation.

4.Use GIF/PNG for transparency.

5.72 dpi (or possibly 120 dpi) for web images is sufficient for screen display. This is because a

typical display console supports about 60-96 dpi. Take not that quality printing (e.g.,

printing photos) requires a much higher dpi.

Using Images

1.Make it "light"! Do not embed a 5MB image. You don't need 600-dpi resolution for

displaying image on the computer screen [you need 300dpi for good printing and 600dpi

for high-quality printing]. 72 to 96 dpi, or in extreme case - 120 dpi, is good enough forscreen display. Use a image editing software to scale down the image resolution before

putting on your web page.

2.Don't let the browser resize your image, even worst, ask the browser to reduce the size of

your image (this is a waster of the precious network bandwidth, computer processing

power, and generates more heats). Do it yourself!

3.[This is difficult!] Tune your images' color tone (via the alpha channel), to bend in with the

color theme of your website.

Styling Image using CSS

Making Image Float

[TODO]

Absolute Position

[TODO]

Image Sprite

[TODO]

Image Opacity

[TODO]

The Tag's deprecated attributes

The tag's attributes color (text), bgcolor (background color), background (background

image), link(unvisited link), vlink(visited link), alink(active link) have been deprecated. Use the

following CSS styles instead.

body {


16/18

color: black; /* foreground color for texts */

background-color: white; /* background color */

background-image: bg_logo.jpg; /* URL of the background image */

background-position: top left; /* image starts from top left corner */

background-repeat: repeat-y; /* repeat the image in y-direction */

}

a:link { color: blue } /* unvisited links */

a:visited { color: gray } /* visited links */

a:hover { color: red } /* when you place the mouse over the link */

a:active { color: yellow } /* when you click on the link */

How to ...

How to underline text

The (underline) tag is deprecated in HTML 4, to avoid confusion with hyperlinks which are often

displayed as underlined. [I strong disagree, as I need underline frequently to represent special

meaning such as default selection]. Take note that graphic designers generally hate underline, and

treat it as a legacy of the old typewriter.

Use CSS property "text-decoration:underline ". For example,

.underline { /* use this instead of */

text-decoration: underline; /* underline text */

}

This part is underlined.

How to Center ...

The "align" attribute of most of the HTML tags has been deprecated in HTML 4.01 and XHTML 1.0

Strict DTD. Use CSS instead.

How to center text horizontally?

The presentation attribute align="left|right|center|justify" of the block-level tags (such as

, to ) has been deprecated. Use CSS property "text-align:center" instead. For

example,

p, h1, h2, h3 {

text-align: center; /* center text horizontally for block-level elements */


17/18

}

How to center a block-level element horizontally (e.g., division, table)?

Set the left and right margin to "auto", for example,

#main-content { /* for the main context division */

width: 760px;

margin: 10px auto 10px auto; /* top right bottom left */

}

#header {

width: 800px;

margin-left: auto;

margin-right: auto;

}

...

...

How to center an image horizontally?

The tag's alignattribute (of top, middle, bottom, left, right) specifies how the image alignswith the surrounding text. It is deprecated in HTML 4.01 and XHTML 1.0 Strict DTD, and cannot be

used to centralize an image horizontally.

To centralize an image, you need to make it a block-element and then centralize the block, for

example.

img.center {

display: block; /* render as a block-level element */

margin: 5px auto;

}

How to center text vertically?

Use text-alignto align text horizontally and vertical-align to align text vertically.


18/18

text-align: left|right|center|justifyvertical-align: top|middle|bottom|baselinebaselineworks like top, except that the baseline of all the first lines of each cells are aligned,

#container {

min-height: 200px;

display: table-cell;

vertical-align: middle; /* align text vertically */

}

Some text here ...

REFERENCES & RESOURCES

TODO

Latest version tested: HTML 4.01 / HTML 5, CSS 2.1 / CSS 3, Firefox 7, IE 8

Last modified: November, 2011

Feedback, comments, corrections, and errata can be sent to Chua Hock-Chuan

([email protected]) | HOME
http://www.ntu.edu.sg/home/ehchua/programming/index.htmlhttp://www.ntu.edu.sg/home/ehchua/programming/index.html

basic html and css tricks n tweaps

Documents