CSS by pptfiles

VIEWS: 65 PAGES: 12

									INFSCI 1052

INFSCI 1052


Contextual Selectors

From Stylin with CSS by Charles Wyke -Smith

 Regular selector such as p targets all paragraphs on

the page  Using the document hierarchy we can choose specific tags in the ancestry chain of parent child relationship  Two new tags
○ Div – defines a section of the HTML document ○ Used to group a set of HTML elements and then apply

a style to all of them <div>
<h2> This is a header </h2> <p> This is a paragraph </p>

</div>

INFSCI 1052


Contextual Selectors
 Span Tag ○ A tag used to define a section of text in which a style will be applied.
 This is an <span>example</span> of using the span

tag.

 The div and span tags are used to section or

divide a document into related areas. For example divs can define areas such as header, navigation, content and footer. And span tags typically are used to define smaller textual areas like part of a paragraph.

INFSCI 1052
Contextual Select <h1>This is some sample code </h1> <p> This is a paragraph. It has two sentences <em>and </em> one emphasis.</p> <p> This is another paragraph. It also has two sentences. This sentence <span> has a span tag in it <em> along</em> with an emphasis tag</span></p>


INFSCI 1052
Contextual Selectors  Document Hierarchy of Example

 Level 1 – body  Level 2 – h1 – p –p

 Level 3 – em – em - span
 Level 4 -----------------em

INFSCI 1052
  

Contextual Selectors If you applied the following style: em {color:green;} all the text within the em tags would turn green If you only want the em text within the p tags to be green:
 p em {color:green;}  Note: there is a space between p and em not a comma. If

there was a comma then all p and em text would be green.  Now only em tags within a p tag will be green  Keep in mind that this is any em that has a p in its ancestry – not just an immediate parent – p->div>ul->em would work too.  p span em {color:green;} – applies only to an em preceded by a span and a p

INFSCI 1052


Class attribute
 A technique for identifying specific areas of a

document without regard to the document hierarchy  Can be overused – if contextual selectors work use them first  Class attributes can be applied to existing tags in the document  A class selector is written with a period
○ .specialclass {font-size:12px;}

INFSCI 1052


Class Attribute
<div> <h1 class=“special”> This is a header within a div. It has two sentences </h1> <p> This paragraph has no tags inside of it. </p> <p class=“special”> This is a paragraph. It has information for the user to read. It may <span> have other tags</span> too.</p> </div> CSS Rules: p { font-size:12px;} .special {font-weight:bold;}



Notice classes can be used multiple times

INFSCI 1052


Class Attribute
 Contextual Class Selectors ○ You can combine tag name and a class
p {font-size:12px;} .special {font-weight:bold;} p.special {color:red;}
○ Here the class must be assigned to a paragraph

for the rule to be applied ○ p.special span – a span tag nested in a paragraph with the special class applied to it ○ .special span – a span tag nested within any tag using the class attribute special
 You can apply multiple classes to a tag ○ <div class=“special highlight”> ….

INFSCI 1052


ID selector
 Similar to classes except a # sign is used

and can only be used ONCE per page.  Ex:
<p id=“unique”> This is a sentence</p> #special {font-weight:bold;}
 ID’s are often used to demarcate special

sections of a page such as header, navigation, content and footer since they usually only occur once

INFSCI 1052


ID selector
 ID’s are used with Javascript to target a

particular tag  We will be using ID’s in class for both web design and for Javascript so become familiar with its usage.  Avoid over usage of ID’s and classes – it’s better to use contextual selectors along with ID’s and classes  Avoid classitis:
○ http://www.ehow.com/how_2284990_classitis-

html-css-descendant-selectors.html ○ http://www.cssnewbie.com/combating-classitis/

INFSCI 1052


Tutorials on CSS
 http://www.w3schools.com/Css/default.asp
 http://htmldog.com/guides/cssbeginner/  http://www.html.net/tutorials/CSS/



An interesting site to review and appreciate – Zen Garden
 http://www.csszengarden.com/


								
To top