CSS Contextual Selectors
Let's create some basic paragraph styles using CSS; how to style a paragraph is a must learn for even the most basic webpage.
Basic Files Needed
First create 2 files, an .html and a stylesheet file ...
Copy and paste (Bullet point examples 2 and 3) each of these into their own notepad file, here's the link:
HTML file and the css style sheet template
Name the first file ( at bullet 2) anything you want with an .html extension. Name the style sheet ( at bullet 3) "style.css".
This will be our basic set up to test CSS examples ie.. learning CSS rules, selectors, declarations ( properties:values) etc...
Overview - Contextual selectors
What if you need to display different styles within a paragraph? What if a portion of the paragraph needs to be bolded out or italicized? Your first impulse may be to create a class that declares the new style but that can easily get out of hand. There's an easier way many times...
Why not achieve the same result with a contextual selector? Lets practice...
Let's first look at how to style the basic <p> tag
Set up your dummy paragraph like so :
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique Lorem ipsum dolor sit amet, </p>
Our basic paragraph style
p { font-size:10px; font:verdana; width:200px; margin:10px auto; }
Create variation within the paragraph...
Say we want to create a block of text within the paragraph that is red.
You'll use the span tag...like this - embed it like in the example below...
<span></span>
<p>Lorem ipsum dolor sit amet, <span>consectetuer adipiscing elit.</span> Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique Lorem ipsum dolor sit amet, </p>
Make it red...
p span{ color:red; font-size:20px; }
So now this rule reads: "any text between span tags decsending from a p tag will be red".
What if we place the span tag outside the p tags like this:
<p>Lorem ipsum dolor sit amet, <span>consectetuer adipiscing elit.</span> Donec id lectus id sem venenatis iaculis. Aenean ac libero sed ligula facilisis tristique Lorem ipsum dolor sit amet, </p><span> ligula facilisis tristique</span>
The answer is - NOTHING - until we declare a style for the span tag by itself...like this:
body {
text-align:center;
font-family:verdana;
font-size:12px;
padding:0 0 0 0;
color:#333;
background:#fff;
}
p {
font-size:10px;
font:verdana;
width:200px;
margin:10px auto;
}
span {
font-family:arial;
font-size:16px;
background:#333;
color:#eee;
}
p span{
color:red;
background:none;
font-size:20px;
}
Why did we add the background:none; declaration to our p span tag? It's because inheritance rules in CSS cause the rules from the original span tag to cascade to all descendant span tags if you don't overide them.
Contextual Selector - Summary
This is a basic example of how to use a contextual selector - notice how the display of the plain span tag is different than the p span . Context is everything. Practice this basic lesson in your browser - look up some other CSS rules to apply to this basic example - you learn by DOING!
Review the web building process: build web site free
Was this helpful? Leave a comment...
Please leave your comment...name or email is not required. If you leave your email we WILL respect your privacy and not spam you. We may update you occasionally with value added info related to web building, web design, CSS, HTML. Thanks!