A Techno Blog, mainly about Java

Closing out Knockoutjs Adventure

I have been involved with a knockout project the past few months. I learned alot over the course of the coding journey. The Knockout simplifies your code and works well in tandem with Jquery. Along the way, I got to use JQuery Tabs, KnockoutJS templates, Knockout observable arrays, and much more

Here are some of the great sites  and links I found along the way.

September 23, 2012 Posted by | Web Design | Leave a comment

CSS Style

The format of a selector is as follows

Selector {property : value}

Type selector – targets selector by element name, can have comma and wild card *

Contextual Selectors – apply style to properties based on context or relation to another element

  • Descendant selector:  descendants of another element, list separated by space starting with the higher level element, can have commas separating multiple entries, and can be specified several levels deep
  • Child selector: like a descendant but specified by a specific parent of an element, indicated as child with greater than sign between elements >
  • Adjacent selector: elements that comes directly after a certain  element with same parent, indicated with plus sign +

Class and Id selectors: specified in regard to specific elements which are a class or a specific ids specified by user.

  • For class you define it in terms of class in regards to a specific type selector with a dot  separator  .
  • To specify class selector to all elements within a class you can leave out the type selector
  • id selector target a single element and work like class selector except indicated with a #

Attribute selectors – targets specific attribute names or values

  • Simple attribute: specified for an attribute for an element, indicated as element[attribute]
  • Exact attribute value : specified as element[attribute=”myvalue”]
  • Partial attribute value: doesnt match whole word but search value within attribute value , specified as element[attribute~=”myvalue”]
  • hyphen separated value : used for case where you look for value of ‘myvalue’ or starting with ‘myvalue-‘ , indictaed with |=

Pseudeoclass selector  :  targets a group of elements such as an anchor.  has a colon : after the anchor followed with the attribute kind (i.e. link, or name)

  • there are others supported other than the anchor tag . i.e. :first-chld, :first-line, :first-letter,:before, :after

How you reference style sheets:

<link rel=style sheet href=file.css type=text/CSS />


@import url();

Document structure and inheritance
– parent child relationships
– sibling relationships
– descendants
Inheritance – styles passed down to desndants
Overriding styles by nodes higher in hierarchy
Can get presentation rules from several sources and conflicts
Passed down until overridden by command with more weight
Resolve rules from competing style sheets
When user agent (ie browser) encounters element looks for all style rules that may apply
Sorts out this out based on
Style sheet origin
Least weight to greatest
1 User agent style sheet 2 reader style sheet 3 authorsyle sheets 4 !Important marked
External file sheets further down document greater precedence
Imported styles sheets override linked ones
Embedded styles sheets override external ones
Inline styles override other references

More specific the selector the more priority it gets
Least to most priority for selectors follow
Individual element to pseudo element selector
Contextual selectors
Class selectors
Id selectors
rule order
Last one wins

Display roles
Block level elements – line breaks before and after it  and fills in width of the parent that contains it

Inline – no line breaks
Emphasized text

None – Wont display


Box model : Element box around it

Inner edge
Outer edge

Unit measures

Color value
% values


September 23, 2012 Posted by | Web Design | Leave a comment