A Techno Blog, mainly about Java

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

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: