CET214
Web Programming
05 - CSS Selectors
Dr. Ahmed Said
Start
Contextual Selectors
Contextual selectors are used to apply styles to elements based on their context within the document.
These are used to apply styles to elements only when they’re nested within other specified elements.
Take a look at this rule:
ol em { color: blue; }
css
The fact that I left out the comma indicates that this rule applies only to em elements that are nested within
ordered lists.
ol, em { color: blue; }
css
Dr. Ahmed Said
| 2 of 24
Contextual Selectors, cont.
Let’s look at two slightly different rules:
p cite { font-style: italic; font-weight: normal; }
li cite { font-style: normal; font-weight: bold; }
css
In this case, <cite> tags that appear within <p> tags will be italicized. If a <cite> tag appears inside a list
item, the contents will be rendered in boldface.
Let’s add in one more rule:
cite { color: green; }
p cite { font-style: italic; font-weight: normal; }
css
li cite { font-style: normal; font-weight: bold; }
Dr. Ahmed Said
| 3 of 24
Contextual Selectors, cont.
Let’s look at these rules:
cite { color: green; }
p cite { font-style: italic; font-weight: normal; color: red; }
li cite { font-style: normal; font-weight: bold; color: blue; }
css
The rule that applies to all <cite> tags is overridden by the rule that applies to <cite> tags within <p>
and <div> tags.
The nested styles override the default style for the <cite> tag because they are a more specific style definition.
The contents of <cite> tags that don’t meet the criteria of the nested rules will appear in green.
The nested rules will override the color specified in the less-specific rule, so for <cite> tags that are inside <p>
tags, the contents will be red. Inside list items, the contents will be blue .
The ability to override property settings by using more specific selectors is what provides the ability to set
styles with the precision of the style attribute from a style sheet. This is called CSS specificity .
Dr. Ahmed Said
| 4 of 24
Classes and IDs
Sometimes selecting by tag (even using contextual selectors) isn’t specific enough for your needs, and
you must create your own classifications for use with CSS.
There are two attributes supported by all HTML tags : class and id.
The class attribute is used to classify elements, and the id attribute is for assigning identifiers to unique
elements.
To apply a selector to a class, use a leading . in the class name in your style sheet.
So, if you have a tag like this
<p class="warning">This is a warning.</p>
html
.warning {
css
color: red;
font-weight: bold;
}
Any element with the class warning will appear in bold red text.
Dr. Ahmed Said
| 5 of 24
Classes and IDs, cont.
IDs are used to apply styles to a single element on a page.
To apply a selector to an ID, use a leading # in the ID name in your style sheet.
So, if you have a tag like this:
<p id="important">This is important.</p>
html
#important {
color: red;
font-weight: bold;
}
css
Whenever you want to specify styles for a single element, assign it an ID. The element must be unique on
the page—the only element with that identifier.
As you’ll learn later, assigning IDs to elements is also very useful when using JavaScript because doing so
lets you write scripts that reference individual items specifically.
Dr. Ahmed Said
| 6 of 24
Classes and IDs, cont.
IDs are required to be unique, so there’s no need to qualify them further.
Finally, there’s nothing to say that you can’t mix up all these selectors in one rule, like so:
h1, #headline, .heading, .warning { font-size: large; color: green; }
css
We can included several types of selectors in one rule. This is perfectly valid if you want to set the same
properties for a number of different selectors.
Classes also work with contextual selectors:
ul li.important { color: red; }
css
Dr. Ahmed Said
| 7 of 24
What Cascading Means
The term cascading refers to the way that styles are applied to elements on a page.
They are so named because styles cascade from parent elements to their children.
To override a style that has been applied via cascading, you just need to set the same property using a more
specific selector.
body { font-size: 200%; }
div { font-size: 80%; }
p { font-size: 80%; }
span.smaller { font-size: 80%; font-weight: bold; }
#smallest { font-size: 80%; font-weight: normal; }
<div>
html
This text is in a div but not in a paragraph.
<p>This test is in a paragraph.</p>
<p><span class="smaller">This is in a span with the class "smaller" inside a paragraph.</span></p>
<p><span class="smaller"><span id="smallest">This text is in a span with the ID "smallest".</span></span></p>
</div>
Dr. Ahmed Said
| 8 of 24
What Cascading Means
body { font-size: 200%; }
<div>
This text is in a div but not in a paragraph.
<p>This test is in a paragraph.</p>
<p><span class="smaller">This is in a span with the class "smaller" inside a paragraph.</span></p>
<p><span class="smaller"><span id="smallest">This text is in a span with the ID "smallest".</span></span></p>
</div>
html
This text is in a div but not in a paragraph.
This test is in a paragraph.
This is in a span with the class "smaller" inside a
paragraph.
This text is in a span with the ID "smallest".
Dr. Ahmed Said
| 9 of 24
What Cascading Means
body { font-size: 200%; }
div { font-size: 80%; }
<div>
This text is in a div but not in a paragraph.
<p>This test is in a paragraph.</p>
<p><span class="smaller">This is in a span with the class "smaller" inside a paragraph.</span></p>
<p><span class="smaller"><span id="smallest">This text is in a span with the ID "smallest".</span></span></p>
</div>
html
This text is in a div but not in a paragraph.
This test is in a paragraph.
This is in a span with the class "smaller" inside a paragraph.
This text is in a span with the ID "smallest".
Dr. Ahmed Said
| 10 of 24
What Cascading Means
body { font-size: 200%; }
div { font-size: 80%; }
p { font-size: 80%; }
<div>
This text is in a div but not in a paragraph.
<p>This test is in a paragraph.</p>
<p><span class="smaller">This is in a span with the class "smaller" inside a paragraph.</span></p>
<p><span class="smaller"><span id="smallest">This text is in a span with the ID "smallest".</span></span></p>
</div>
html
This text is in a div but not in a paragraph.
This test is in a paragraph.
This is in a span with the class "smaller" inside a paragraph.
This text is in a span with the ID "smallest".
Dr. Ahmed Said
| 11 of 24
What Cascading Means
body { font-size: 200%; }
div { font-size: 80%; }
p { font-size: 80%; }
span.smaller { font-size: 80%; font-weight: bold; }
css
<div>
...
<p><span class="smaller">This is in a span with the class "smaller" inside a paragraph.</span></p>
<p><span class="smaller"><span id="smallest">This text is in a span with the ID "smallest".</span></span></p>
</div>
html
This text is in a div but not in a paragraph.
This test is in a paragraph.
This is in a span with the class "smaller" inside a paragraph.
This text is in a span with the ID "smallest".
Dr. Ahmed Said
| 12 of 24
What Cascading Means
body { font: 80%; }
div { font-size: 80%; }
p { font-size: 80%; }
span.smaller { font-size: 80%; font-weight: bold; }
#smallest { font-size: 80%; font-weight: normal; }
css
<div>
...
<p><span class="smaller">This is in a span with the class "smaller" inside a paragraph.</span></p>
<p><span class="smaller"><span id="smallest">This text is in a span with the ID "smallest".</span></span></p>
</div>
html
This text is in a div but not in a paragraph.
This test is in a paragraph.
This is in a span with the class "smaller" inside a paragraph.
This text is in a span with the ID "smallest".
Dr. Ahmed Said
| 13 of 24
<div> : The Generic Container
A block-level element
The <div> tag defines a division or a section in an HTML document
Used to group block-elements to format them with CSS
Easily styled by using the class or id attribute
Often used as a container for other HTML elements
<div>
<img src="./images/leopard.png" alt="An intimidating leopard." />
html
<p>Beware of the leopard</p>
</div>
Beware of the leopard
Dr. Ahmed Said
| 14 of 24
article , section , and div Tags
<article> : Represents a self-contained composition which is intended to be independently distributable or
reusable.
<section> : Represents a thematic grouping of content, typically with a heading.
<div> : Represents a generic container with no additional meaning.
<div> , <section> , <article> is a block-level element that can contain other block-level elements.
<section> and <article> can contain <div> elements.
<article> can contain <section> elements.
<section> can contain <article> elements.
<div> can contain <section> and <article> elements.
Dr. Ahmed Said
| 15 of 24
Units of Measure
One of the most confusing aspects of CSS is the units of measure it provides.
Four types of units can be specified in CSS:
Length units
Percentage units
Color units
URLs
Dr. Ahmed Said
| 16 of 24
Length Units
There are two kinds of length units:
Absolute units theoretically correspond to a unit of measure in the real world.
Relative units are based on some more arbitrary unit of measure.
Unit
Description
cm
Absolute; Centimeters
mm
Absolute; Millimeters
in
Absolute; Inches
pt
Absolute; Points
pc
Absolute; Picas
px
Relative; pixels, which are relative to the viewing device
em
Relative; to the height of the element’s font
rem
Relative; to the height of the root element’s font (new in CSS3)
ex
Relative; to the x-height of the element’s font
vw
Relative; to % of the width of the viewport (new in CSS3)
vh
Relative; to % of the height of the viewport (new in CSS3)
%
Percentage of the parent element
Dr. Ahmed Said
| 17 of 24
Length Units, cont.
The absolute measurements seem great, except that an inch isn’t really an inch when it comes to
measuring things on a screen.
Given the variety of browser sizes and resolutions supported, the browser doesn’t really know how to figure
out what an inch is.
The relative measurements are more useful for web design because they are based on the size of the text in
the document.
The other two new units are vh and vw . These are relative to the viewport window. This is particularly
useful if you are designing pages to look good on mobile and smaller screen
By setting the text size to be relative to the viewport, you can ensure that it will be legible even on small
screens.
Percentage units are also extremely common. The thing to remember with percentages is that they’re
always relative to something.
Dr. Ahmed Said
| 18 of 24
Color Units
Browsers understand some color names.
It’s better to define colors by the specific shade. For reasons related to the way computer displays work, in
CSS and HTML, colors are created by mixing red, green, and blue.
Aside from color names, there are several ways to specify colors using CSS:
Hexadecimal: #RRGGBB A six-character string that comprises three two-digit hexadecimal numbers that represent
the intensity of red, green, and blue on a scale of 00 to FF (255 in decimal).
Short Hexadecimal: #RGB where R , G , and B are the red, green, and blue values respectively.
RGB: rgb(r, g, b) where r , g , and b are the red, green, and blue values respectively.
RGBA: rgba(r, g, b, a) where r , g , and b are the red, green, and blue values respectively, and a is the alpha
value.
HSL: hsl(h, s%, l%) where h is the hue, s is the saturation, and l is the lightness.
HSLA: hsla(h, s%, l%, a) where h is the hue, s is the saturation, l is the lightness, and a is the alpha value.
Add a fourth number to the RGB and HSL colors that ranges from 0 to 1 to specify the opacity
Dr. Ahmed Said
| 19 of 24
Color Units, cont.
black rgb(0,0,0) #000000 hsl(0,0,0)
white rgb(255,255,255) #FFFFFF hsl(0,0,100)
red rgb(255,0,0) #FF0000 hsl(0,100,50)
yellow rgb(255,255,0) #FFFF00 hsl(60,100,50)
coral rgb(255,127,80) #FF7F50 hsl(16,100,66)
Given that there are millions of possible colors, how do you find the colors you want to use?
Color Schemer, available at http://www.colorschemer.com/online.html
Adobe Color CC at https://color.adobe.com/.
Dr. Ahmed Said
| 20 of 24
Using Colors
The following code sets the background color of the body to white and the text color to black:
<p style="color: #ffffff; background-color: #000000;">
This paragraph has white text on a black background.
</p>
html
<body style="color: #ffffff; background-color: #0000ff;">
...
</body>
html
a { color: #ff9933; }
css
What about active links and visited links?
Dr. Ahmed Said
| 21 of 24
Links
CSS provides pseudo-classes that apply to links in particular states, as follows:
a:link applies to links that have not been visited.
a:visited applies to links that have been visited.
a:hover applies to links when the mouse is over them.
a:active applies to links when they are being clicked.
a { color: #ff9933; }
a:visited { color: #bbbbbb; }
a:hover { color: #E58A2E; }
a:active { color: #FFA64D; }
css
Pseudo-classes are most commonly used with links
Dr. Ahmed Said
| 22 of 24
URLs, cont.
Another advantage of CSS is that you can change the color schemes for links on the same page rather than
being forced to use one scheme throughout.
Finally, you can turn off link underlining if you want.
a:link { color: blue; }
a:active { color: red; }
a:visited { color: purple; }
a:hover { color: red; }
a.nav { font-weight: bold; text-decoration: none; }
a.nav:hover, a.nav: active { background-color: yellow; color: red; }
a.nav:link, a.nav:visited { color: green; }
From this style sheet, you can see that for all <a> tags in the class nav, the text-decoration property is set
to none, which turns off underlining, and font-weight is set to bold.
For <a> tags on the rest of the page, the underlining remains on, but we’ve set it up so that when the
mouse is over the links, they turn red. For navigation links, when the mouse is over the links, the background
of the element turns yellow and the text turns red.
Dr. Ahmed Said
| 23 of 24
The Box Model
When working with CSS, it helps to think of every element on a page as being contained within a box.
This is true of inline elements like <a> or block-level elements like <p> .
Each of these boxes is contained within three larger boxes, and the entire set of four is referred to as the CSS
box model.
The innermost box contains the content of the element. Surrounding that is the padding , then the
border , and finally, the outermost layer (the margin ).
In addition to properties that you can use to change how the content is displayed.
Browser developer tools can be used to see the box model for any element on a page.
Dr. Ahmed Said
| 24 of 24