Categories
CSS

CSS: applying style sheets to children tags / using regular expressions with CSS / targeting attributes

ul li a { ..style here applies to a tags inside li which are also inside ul tags…}
p.intro a {…style here applies to all a tags that are inside p tags that are of the class intro…}
div > h1Only h1s that are children of a div tag
h2 + pApplies style to paragraphs that are brothers (share a common parent) with the h2 tag
img[title]Applies style to img tags with the attribute title on it
input[type=”text”]Applies to input text boxes only
a[href=”http://www.cosmofarmer.com”]{ color:red; font-weight:bold; }Applies to the cosmofarmer.com particular link
img[src*=”headshot”]Like a regular expression, for all images that contain headshot somewhere in the src

 

img[alt^=”film”] Same as above, but this time all images where the attribute alt starts with  “film” gets targeted

img[alt$=”film”] Now we are targeting the end of the attribute string

Categories
CSS

CSS styling groups of tags

You can do that by:

Styling groups of tags (separate them by commas): 
 h1, p,.copyright, #banner { color: #F1CD33; }
      
 Universal selector (apply to all tags): 
  * { font-weight: bold; }  
Categories
CSS HTML

HTML tags id vs. class

class can be used anywhere (on other elements in the page)

id should be associated to one tag only (although HTML won’t complain if it is not unique). id can also be used as anchors in the HTML to link in the page.

Categories
CSS

Ways to attach CSS stylesheets to a page

<style>
@import url(css/global.css);
</style>  

 @import can attach external stylesheets to an already external style sheet, but it is slower, and slows down the rendering of pages

<link rel=”stylesheet” type=”text/css” href=”css/global.css”>

Categories
Compatibility issues HTML HTML5

Making IE6+ browser render as other browser engines

In quirks mode, it acts like IE 5.

Implements most of CSS 2.1 goodness.

To turn off compatibility mode and revert it back to IE 7 behavior, put the following tag in the head:

<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

Now, if you want a really good HTML5 ready engine to run on your old IE browsers, put the following tag:

<meta http-equiv="X-UA-Compatible" content="chrome=1" />
That will render pages as in chrome, even as you hit them with IE.
Categories
HTML

Recommended doctype to use

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.
w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
Categories
HTML

Browser Quirks mode

When no correct doctype available, browsers fail into quirks mode by default thinking this is an old page written in the times where there were no doctypes available.

It is limited and hard to format (needless to say) avoid it like the plague.

Keyword: best practices

Keyword: doctype

Categories
HTML

h1 tag

Use one per page (ideally), this is your main title.

Categories
HTML

table tag

Use it for tabular data (spreadsheets and reports)

Categories
HTML

span tag

Shows inline (with no breaks) with other content around.

Used when you want to apply styling to just one element within a div or an area.