TechnoBuzz

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 />

or

@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

Selector
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
Paragraph
Headings
Lists
Divs

Inline – no line breaks
Emphasized text
Anchors

None – Wont display

List-item
Run-in

Box model : Element box around it
Border
Margin
Background

Inner edge
Border
Margin
Outer edge

Unit measures
Pixel
Pts
Pc
Em
Ex
In
Mm
Cm

Color value
% values

 

Advertisements

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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: