CSS

From Wikicliki
Jump to: navigation, search

if your browser is strictly css compliant you will see the smiley face in the Acid 2 test: http://www.webstandards.org/files/acid2/test.html#top

Class&id.gif

Margin css.png

  1. link your css externally:
    <link rel="stylesheet" TYPE="text/css" href="file.css">
  2. html versions:
    • 4.01 strict - means that things like font and link attributes on body and old markup will be removed. use css as well:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    • 4.01 transitional - means that some things like font will be deprecated but others wont. ie: its like saying you can use it now but in later html versions its totally gonna be depreciated. was created in period when css support was not so consistent for all and so had to accept some less strict html 4.01.
  3. validate your html after that:
  4. hide your code from older browsers by commenting it out cos ancient browsers display it as a html mess
  5. use external whereever possible, inline only for small impt bits
  6. class and ids - class more flexible (for a group of items) id more specific (has to be unique)
    • class attribute - fullstop selector
    • id attribute - hash selector
    • can combine multiple class and id attributes - no spaces between them. eg .thing.stuff will select something with div class thing and p class stuff.
  7. universal selector
    • asterisk is universal for every element not already specifically defined it will be formatted as such (be careful)
  8. selectors can be grouped with commas (eg: h1, h2, h3, h5)
  9. descendant selectors
    • selectors descendants can be selected by grouping with spaces - eg: p cite will retrieve all cites in ps. all descendents apply however deeply nested. does not necessarily have to be immediate child.
  10. pseudo-classes
    •  :active - elements (like a) which ahve been clicked on
    •  :first-child - first child of the element
    •  :focus - things like form fields which have focus (receiving input first)
    •  :lang() - language used (eg: span lang defined as en-uk, or british english)
    •  :hover - things which are mousedover
    •  :link - unfollowed link
    •  :visited - previously visited links
      • you can combine pseudo-classes with real classes, order doesnt really matter, a:link.nav and a.nav:link will be the same thing.
  11. pseudo-elements - used to insert generated content!
    •  :before, after, first-letter, first-line - only certain properties work
    • interesting idea: use first-line with first-child
  12. display - html understands all things as being block or inline. for example, "p" is a block like a flat thing on a plate while inline things like "em" are things on the plate. but you can reset it and change it to the other type. eg if you have a few links as inline, they will just be next to each other on a line but if they are block they will force break after each item.
  13. box display (V. IMPORTANT)
margin

border

padding

CONTENT

padding

border

margin

  1. order of the cascade
    1. inline style attribute (wins over all)
    2. id selector
    3. classes or psuedo classes
    4. elements which are more plentiful
    5. if number of elements is the same then whichever was declared first wins
  2. using !important in css - overrides normal order of cascade. just insert it anywhere in curly brackets
  3. importing css makes those rules more important than your css in your page itself (or linked css file) -just write as @import url("filename.css");
  4. selecting tags with specific value already assigned to them
    • example is hr[noshade] will select all hrs with no shade
    • uses of this: *[title] with some attribute defined will return all titles with that specific attribute (ah thats where the universal tag is useful)
      • element[attribute="value"] - exact match
      • element[attribute~="value"] - match if value of rule is one of several, seperated by spaces
      • element[attribute|="value"] - match if match before hyphen (mostly used for language groups like en-us or en-uk)
      • example of usage: to remove all banners, apply this: img[height="60"][width="468"] {display:none}
  5. family relations
      • blockquote > p - selects only paragraphs which are direct children of blockquote
      • li + li - selects only adjacent siblings of list items
  6. the more fancy text effects - text-decoration (blink, line-through, overline, underline), text-transform (capitalise, lowercase, uppercase), letter-spacing, word-spacing, line-height (can be in px, multiples of, or percentage)
  7. white-space - how html condenses white space and doesn't reflect more spaces as more spaces but just as one if there is more than one
      • nowrap - dont wrap lines
      • pre - like pre tag, wrap lines as in source
      • pre-line - like pre but wrap lines where there are line breaks in source/at end of line
      • pre-wrap - like normal but wrap lines where there are line breaks in source or at end of line

CSS Sprites (hover nav menus or emoticons from sprite sheets)

html:

        <div id="nav">
            <ul>
                <li class="on"><a href="index.html" class="home">home</a></li>
                <li><a href="bands.html" class="bands">band</a></li>
                <li><a href="festivals.html" class="festivals">festivals</a></li>
				<li><a href="gallery.html" class="gallery">gallery</a></li>
                <li><a href="look.html" class="look">look</a></li>
            </ul>
        </div>

css:

#nav ul { 
	list-style: none; list-style-position: outside;
	margin: 0; }
	
	#nav ul li { margin: 0 15px 0 0; float: left; }		
	
	#nav ul li a, #nav ul li a:visited { display: block; float: left; height: 13px; text-indent: -10000px; }
	
		#nav ul li a.home { background: url('../img/nav.gif') 0 0 no-repeat; width: 43px; }
		#nav ul li.on a.home, #nav ul li a.home:hover { background: url('../img/nav.gif') 0 -13px no-repeat; }
		
		#nav ul li a.bands { background: url('../img/nav.gif') -43px 0 no-repeat; width: 67px; }
		#nav ul li.on a.bands, #nav ul li a.bands:hover { background: url('../img/nav.gif') -43px -13px no-repeat; }
		
		#nav ul li a.festivals { background: url('../img/nav.gif') -110px 0 no-repeat; width: 82px; }
		#nav ul li.on a.festivals, #nav ul li a.festivals:hover { background: url('../img/nav.gif') -110px -13px no-repeat; }
		
		#nav ul li a.look { background: url('../img/nav.gif') -192px 0 no-repeat; width: 59px; }
		#nav ul li.on a.look, #nav ul li a.look:hover { background: url('../img/nav.gif') -192px -13px no-repeat; }

		#nav ul li a.gallery { background: url('../img/nav.gif') -255px 0 no-repeat; width: 63px; }
		#nav ul li.on a.gallery, #nav ul li a.gallery:hover { background: url('../img/nav.gif') -255px -13px no-repeat; }			

easy as pie, innit??? then use it, bitches! yahoo and google advocate this. image slicing is dead.

  • yahoo has a secret url which generates perfect sprite-ready PNG graphic of the text in the url:

http://l.yimg.com/img.sports.yahoo.com/static/bir/headline?txt=dynamictext

<style>
a#sprite {
   display: block;
   background: url(http://l.yimg.com/img.sports.yahoo.com/static/bir/headline?txt= dynamictext) no-repeat bottom center;
   width: 490px; height: 34px;
   text-indent: -9999px;
}
a#sprite:hover {
   background-position: top center
</style>
<a href="" id="sprite">txt</a>

CSS Frameworks

Consider the option of using a framework:

I am not interested in most except the 960 grid system, which is quite smart actually:

Conditional CSS

<!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->

uses of this: for alternative style sheets for certain IE browzers

see also: http://www.positioniseverything.net/articles/ie7-dehacker.html

hover vs focus

focus is for the dotted line in firefox/caret browsingness format it like the hover if the dotted thingy bothers you

if text hover affects image hover and you dont want that to happen

	a img { vertical-align: bottom; }
	a:hover img { background-color: transparent; }

vh viewport height

  1. fulltext {

font-size: 100vh;} vw width: device-width;

http://stackoverflow.com/questions/6803016/css-100-font-size-100-of-what

See Also