Scribd
Upload
4 views

UECS2094_2194_-_Topic_3_-_CSS_-_Jan_2025

This document provides an introduction to CSS (Cascading Style Sheets) for web application development, covering its basic syntax, properties, and how to apply styles to HTML elements. It discusses various methods for including CSS, such as inline styles, the <style> tag, and external stylesheets using the <link> tag. Additionally, it outlines common CSS properties, units of measurement, and background properties, along with examples for better understanding.

Uploaded by

fooweichang2003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

UECS2094_2194_-_Topic_3_-_CSS_-_Jan_2025

This document provides an introduction to CSS (Cascading Style Sheets) for web application development, covering its basic syntax, properties, and how to apply styles to HTML elements. It discusses various methods for including CSS, such as inline styles, the <style> tag, and external stylesheets using the <link> tag. Additionally, it outlines common CSS properties, units of measurement, and background properties, along with examples for better understanding.

Uploaded by

fooweichang2003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 83

1

TOPIC 3: CSS
UECS 2094/ UECS 2194 Web Application Development
Jan 2024
2

THE BIG THREE


• HTML
• CSS
• JavaScript
3

OUTLINE
• CSS basic syntax
• CSS properties
• Lists
• Tables
• Selectors
4

INTRODUCTION TO CSS
• CSS, or Cascading Style Sheets, is used to style each HTML.

• It's how we determine the colour, text size, and spacing, as well as other
visual aspects of your Web page.

• CSS can also be used to change the layout of your Web page.
5

EXAMPLE
<p>She looked over the top of her book and
whispered <q>I'm hungry.</q> My heart stopped.</p>
6

THE <style>TAG
• The best practice when working with CSS is to keep it in an external file using
the <link> tag. However, when starting, it is simpler to merely place it
directly into the document under edit.

• To place CSS directly into an HTML document, we use the <style> tag. This
tag can appear anywhere in an HTML document, however, the most
common practice is to place it in the <head> section.
7

THE <style>TAG
8

THE <link>TAG
• While <style> is convenient, the better practice is to put the CSS into a
separate file. One of the key advantages of using a separate file is that the
CSS styles can easily be re-used between your different .html pages. Many
authors further divide their CSS up into different files (for example: one for
text styles and another one for layout).
• Simply put your CSS into a separate file. This file does not need any HTML
markup (i.e., no <style> tag required). Use the .css file extension and use
a <link> tag to bind it in. The <link> tag must appear in
the <head> section. By convention, css files are kept in a directory named
css.
9

THE <link>TAG
10

INLINE CSS
• to apply a unique style for a single element.
• To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>


11

SELECTORS AND DECLARATIONS


• Based in the example on the left, the selector is
p. When a selector appears unprefixed by any
punctuation, then it is assumed to match to an
HTML tag. Thus, the p selector will apply the CSS
rule to all <p> tags in the document.

• The declaration part of a CSS rule opens and


closes with curly braces: { }
• And between them, you can put any number
of property value pairs.
12

SELECTORS AND DECLARATIONS


• There are hundreds of different visual properties
that may be set via CSS. And each property
has a range of possible values that it can be set
to.
• Syntactically, property value pairs are simple.
Each pair consists of a property, followed by a
colon : followed by a value and terminated by
a semi-colon ;
13

SELECTORS AND DECLARATIONS


• In the previous example, the entire CSS rule is written on one line. This is not
uncommon when the declaration of the CSS rule only has one property.
• If a CSS rule has several properties, then it should be written to use one line
per property value pair. For example:
14

COMMENTS
• CSS can include "comments" as well, by which you, the developer today,
can leave notes and reminders to you, a different developer tomorrow. Or
to others who might read your CSS.
• Comments begin with /* and must end with */ and they can span several
lines. But they cannot be nested.
15

COMMON CSS PROPERTIES


• There are hundreds of CSS properties for you to use. The complete list is
available on the W3C Web site: https://www.w3.org/Style/CSS/all-
properties.en.html
• Here we will study some of the most useful and common CSS properties.
16

font-size
• font-size can be used to size the text of a tag. The value for the font-size has
two parts: a number and a unit. Some of the most common units
are: px, em, %, vh. For example:

p { font-size: 18px; }
q { font-size: .8em; }
blockquote { font-size: 10vh; }

• Additionally, font-size supports a more readable set of values that many authors
prefer: xx-small, x-small, small, medium, large, x-large, xx-large
and relative sizing (relative to the text of the parent): larger, smaller. For example:

p { font-size: medium; }
q { font-size: small; }
blockquote { font-size: larger; }
17

line-height
• Whereas font-size may drive the size of the text itself, the line-height property
drives the height of the space it is drawn into. A large line-height will give the text
more spacing. A small line-height will smash the text lines together.
• For example, all of the Middlemarch text below has font-size:16px;
But on the left, we see line-height:0.5; and on the right, line-height:3;

The used value is this unitless <number> multiplied by the element's font size. The computed
value is the same as the specified <number>. In most cases this is the preferred way to set line-
height with no unexpected results in case of inheritance.
18

text-align
• Anyone familiar with a text editor will be familiar with this property. It can be used to align
the text left, center or right. There are additional possible values
like justify and justify-all . It usually defaults to left. However, remember that you
shouldn't use text-align unnecessarily.

• Note that text-align may not work as expected if applied to elements that are the same
width as their text, or whose width is determined by the text within them (i.e., inline
elements). The tags <span>, <a>, <i>, <b>, <q> and others are considered "inline"
because they do not receive their own new line when used. And text-align is often not
useful on these tags.

• But it is useful on block level text tags, such as <p>, <li>, <ul>, <ol>, <div>,
and <blockquote>
p { text-align: left; }
blockquote { text-align: right; }
19

text-align
20

text-decoration (underline)
• How do I underline text? This is a common question. In CSS, this is done via
the text-decoration property. The values for this are: underline,
overline, line-through, and none; They can combined.
p { text-decoration: underline; }
a { text-decoration: none; } /* hyperlinks are underlined by
default, but that can be removed */
span { text-decoration: overline; }
span { text-decoration: underline overline; } /* apply two with
just a space between the values */
span { text-decoration: underline overline line-through; } /*
everything */
21

font-weight (bold)
• Any tag can make the text bolder (or less bold) via the font-weight CSS
property. While common values are normal and bold, text can also be
made bolder (or less bold) than its parent with the values bolder and lighter.
Lastly, the font-weight can be set explicitly as a numeric value. The choices
are: 100, 200, 300, 400, 500, 600, 700, 800 and 900.
• normal maps to 400 and bold to 700. However, the different numeric
choices will only work for fonts that support a full range of font-weights. Many
times the numeric weights will simply be mapped back to bold or normal.
22

font-weight (bold)

p { font-weight: bold; }
blockquote { font-weight: 900; }
23

font-style (italic)
• The <i> and <em> tags could make text italicized. But, just as we saw when
discussing font-weight, this can be changed with CSS, and any tag can
make its text italic or oblique with the font-style property. The choices
of values for this property are normal and italic.
24

font-family
• Want to set the font for an item on the page? The font-family is the correct property
for the task, however
• the various browsers only guarantee a few standard choices: serif, sans-
serif, monospace, cursive, and fantasy.
• To help ameliorate these limitations, the font-family property accepts a list of
possible font choices. The browser will start with trying the first font listed, and if not
available (or not having a needed glyph) it will then proceed to the next font in the
list, and so on. Here is a typical font-family declaration:

p { font-family: "Helvetica", "Verdana", "Arial", sans-serif; }

The rule above says to first try the font named "Helvetica". If it isn't available, try "Verdana",
failing that "Arial", and lastly fall back to the built in sans-serif browser font.
25

MARGIN
• The margin property is the lynch-pin for positioning elements. Whenever you
want to move something a little the margin property should be your
first thought, when having layout problems, it is the first thing you should
check.

p { margin: 10px; } /* a 10 pixel margin will be applied around


all four sides of the item */
p {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px; }
26

COLOR
• The color property can be used to set the text color of an element. There are several possible
formats for the value.
• Named colors
p { color: blue; }
b { color: transparent; } /* transparent */
i { color: lightgrey; }
• rgb/rgba
p { color: rgb(10, 200, 255); }
p { color: rgb(0, 0, 0); } /* 0,0,0 is black */
p { color: rgb(255, 255, 255); } /* 255,255,255 is white */
b { color: rgba(10, 200, 255, 0.5); } /* semi-transparent */
• Hex code
p { color: #3A2BFF; }
27

UNITS

• font-size, line-height, margins and many other CSS properties expect


some sort of dimension value. Dimension values support a wide variety of
units. But the most common and useful ones are: px, em, rem, %, vh and vw.
28

px
• 'px' is short for 'pixel', which is a single dot on the screen. So text with font-
size:20px is 20 pixels tall on-screen. In actuality, due to browser zooming,
retina displays, or other factors, this may or may not match to 20 physical on-
screen pixels.
• px are useful for both horizontal and vertical dimensions.
29

em
• 'em' is a typographic term that has come to the Web. On the Web, em units are
usually used for vertical dimensions. One 'em' maps to the height of one capital
letter in the parent context.

li { font-size: 0.9em; } /* text in a list item is smaller than its parents */


h1 { font-size: 1.2em; } /* but an h1 will be bigger than the parent */
i { font-size: 0.5em; } /* and any italicized text will be half as big. */

• All the text sizes above are relative to the pages base sizes. You'll see radically different
results on the rest of the page from either of these rules applied to the body, but relative to
one another they'll remain sized correctly.
30

rem
• 'rem' is much like 'em', except that 'em' sizes an element relative to its parent, and
'rem' always derives its size relative to the root. In an HTML document with lots of
nested elements, 'rem' will generally prove to be more reliable than 'em'. 'rem' is
supported in all modern day browsers, including mobile, but not older ones.

• Using the CSS rules from the em section, nested list items
(<li>birds<ul><li>hawk</li></ul></li>)would get increasingly smaller. And if
'rem' units were used, they would be the same size.

• Note: to ensure you are setting the root size, use both the html and body selectors.

html, body { font-size: 20px; }


31

• The percentage unit (%) is relative to the parent dimension. This is a useful unit for
both horizontal and vertical dimensions, though often more useful in the horizontal.

p {
margin-left: 10%;
margin-right: 10%; /* 10% of parent width will be spent on the two
side margins */
}
32

vh / vw
• 'vh' stands for viewport height, and 'vw' for viewport width. The vh and vw units
work much like the percentage ( % ) unit. But instead of percentage of the parent, it
is percentage of the screen (aka viewport). Obviously, vh is for vertical dimensions,
and vw for horizontal dimensions.

• vh and vw do not suffer the parent limitation that the % unit does. Most modern
browsers support these units, but there are some exceptions on older mobile
browsers.
p {
margin-left: 10vw;
margin-right: 10vw; /* 10% of screen width will be spent on the two
side margins */
}
33

BACKGROUND
• The background-color CSS property will fill the rectangle of the given element with
a solid background color. In addition to the values of transparent and none, there
are all the values of that we saw applicable to the color property.

HTML CSS Result


<p class="p-blue">This is p { background-color:
the list of critters <a #3E3F67; }
href="#req">requested</a> by p a { background-color:
the owners</p> <ul> #6E7099; }
<li>Wasp</li> <li>Ant</li> ul { background-color:
<li>Moth</li> #FFC592; }
<li>Ostritch</li> </ul> li { background-color:
#CC602D; }
34

BACKGROUND
• The background-image property is used to set an external image file as the
background to a particular HTML element. The path can be a URL, or a
path relative from the file the CSS is in.

HTML CSS Result


<p class="kitten">Women and .kitten {
cats will do as they please, background-image:
and men and dogs should url("kittens.jpg");
relax and get used to the }
idea. <br />- Robert A.
Heinlein</p>
35

BACKGROUND
• By default, if the rectangular area of an element is bigger than the image itself, then the
image will repeat and fill the space, like tiles.
• The background-repeat property can be used to control this. It's more commonly used
values are: repeat, repeat-x, repeat-y, and no-repeat. The no-repeat value is very useful,
and bears repeating.
CSS Result
.tile {
background-image:
url("https://www.w3.org/2008/sit
e/images/logo-w3c-mobile-lg");
/* use padding to keep the
text away from the edges of the
paragraph box */
padding-top: 15px;
padding-right: 50px;
padding-bottom: 30px;
padding-left: 100px;
}
36

BACKGROUND
CSS Result

.tile {
background-image:
url("https://www.w3.org/2008/sit
e/images/logo-w3c-mobile-lg");
/* use padding to keep the
text away from the edges of the
paragraph box */
padding-top: 15px;
padding-right: 50px;
padding-bottom: 30px;
padding-left: 100px;

background-repeat: space
}
37

BACKGROUND
• When not repeating, it is very useful to size a background image to fit its
element. The background-size can be used for this. There are two very
useful values: contain and cover.
• The contain value will put the entire image into the space of the element,
however, the space of the element may not be completely filled if the
aspect ratio of the element and the image do not match. The cover value
is the opposite. It will completely fill the element but the image may be
cropped off two opposite sides. Neither contain or cover will distort or
squish the image. Its aspect ratio is maintained.
38

BACKGROUND
background-size: contain background-size: cover
39

BACKGROUND
• Like background-size, background-position can be used to place or
offset a background image in the element. It takes two values (x and y)
separated by a space when used to exactly specify a position.
• The most useful is the center value. It is position the center of the image in
the center of the element. This is useful even with repeating tiles.
40

BACKGROUND
background-position:center
background-size: contain background-size: cover
41

STYLING LISTS
• list-style-type governs the little list marker that is usually positioned to the
left of any list item.
• For un-ordered lists (<ul>), there are several popular values:
• disc, circle, square, and none.
42

STYLING LISTS
• For ordered lists (<ol>) you can choose different ways of having the numbers
shown: decimal, decimal-leading-zero, lower-roman, upper-
roman, lower-alpha, upper-alpha, as well as several of the worlds
languages: armenian, georgian, simp-chinese-formal, and many others.
43

STYLING LISTS
• Besides choosing the type of marker applied to each list item, you may also
want to govern how closely it is positioned to the list itself. The list-style-
position property handles that. The two values are inside and outside.
• They govern whether the markers are positioned inside the box of the list, or
outside. This is most evident if a border or background or similar is applied to the
list. Below, we have put a blue border on the list.
44

STYLING LISTS
• The little markers on a list can also be customized to be an image of your
choosing using list-style-image. This will require you to have a small image
in a Web compatible format (PNG or JPEG recommended) and to know the
path from the place where the CSS is being defined to the image.
45

DECORATIVE BORDERS AND


SHADOWS
• The border-style property sets the style of a border. Possible values
include none, hidden, solid, dotted, dashed, double, groove, ridge, inse
t, and outset. Here the visible border styles displayed on a gray border:

p { border-style: solid; }
46

DECORATIVE BORDERS AND


SHADOWS
• border-color - Sets the color of the border.
• border-width - Sets the width of the border. Supports a variety of units
(px, em, rem ).
• border abbreviations - All border styles just introduced are actually
abbreviations that can be broken out if needed. For example, here we set
four different styles for a border.

p {
border-left-style: solid;
border-right-style: dotted; This same thing can be done
border-bottom-style: dashed; with border-width and border-
border-left-style: hidden; color ( border-left-
} color, border-top-width, etc.).
47

DECORATIVE BORDERS AND


SHADOWS
• Or, going in the other direction, the CSS property border can help
abbreviate even further. Use the formula border: <width> <style>
<color>; separating the values with spaces:

p { border: 1px solid gray; }


48

DECORATIVE BORDERS AND


SHADOWS
• border-radius – using this we can have round cornered rectangles.
49

DECORATIVE BORDERS AND


SHADOWS
• box-shadow - A shadow effect can be applied to the outlining rectangle of an
element with the box-shadow CSS property. The box-shadow property is typically
controlled with four values separated by spaces:
box-shadow: <x-offset> <y-offset> <blur> <color>;
50

DECORATIVE BORDERS AND


SHADOWS
• text-shadow - This CSS property takes the same values as box-shadow,
however, the shadow is applied directly to the text shapes:

text-shadow: <x-offset> <y-offset> <blur> <color>;


51

THE BOX MODEL

• Content - The content of the box, where


text and images appear
• Padding - Clears an area around the
content. The padding is transparent
• Border - A border that goes around the
padding and content
• Margin - Clears an area outside the
border. The margin is transparent
52

GENERAL GUIDELINE

1. do not make text too small

2. do not make lines of text too tight

3. do not use foreground and background colors that are too close to one
another, in other words, ensure there is good color contrast

4. do not irregularly space text or make it jump around


53

EXERCISE

Continue from the “My favourite recipe” exercise


from Topic 2, design the webpage with CSS.
54

STYLING TABLE
• We now know how to put a basic table together in Topic 2. Here, we will look
at some useful CSS elements to style your table.
• border is best specified in CSS. It is a shorthand property meaning you can
set several CSS properties simultaneously.

table { border: 1px solid black; }

Property Possible values


border-width thin, medium, thick, or number in pixels
border-style none, hidden, dotted, dashed, solid, double,
groove, ridge, inset, outset
border-color color name or color values, transparent
55

STYLING TABLE
• To give a border to <table>, <th> and <td>:

table, th, td { border: 1px solid black; }

• This creates two borders creating a double line. In order to collapse them all
into a single border, we use the border-collapse CSS property:
table { border-collapse: collapse; }

default

With border-collapse
56

STYLING TABLE
• You can also set the table width and height.
• With CSS, you can also explicitly set the dimensions of your cells. Width and
height can be specified in:
• units of length like pixels, percentage (relative to the table width), etc.
• auto: the browser will calculate and select a width for the specified element
(default value)

table.eg3
{
width: 100%;
height: 100%
}
57

STYLING TABLE
• text-align - This property is used to align the text of <th> and <td> cells
left, right or center.
• vertical-align - This property is used to align the text
of <th> and <td> cells: top, bottom or middle.
• padding - We use the padding property on <th> and <td> to provide some
space between border and content in cells. Padding is set in units of length
like px, cm, em and % (relative to parent container's width).
58

STYLING TABLE

th, td { padding: 15px; } /* all four sides same */

th, td { padding-top: 15px; }


th, td { padding-right: 25px; }
th, td { padding-bottom: 35px; }
th, td { padding-left: 45px; }

th, td { padding: 20px 30px 40px 50px; } /* set four sides*/

th, td { padding: 0.1em 0.4em; } /* top and bottom, left and right*/
th, td { padding: 20px 30px 40px; } /* top, left and right, bottom*/
59

STYLING TABLE
• A zebra table has alternating colors for table rows making it easier to differentiate
data between rows. You can specify which rows you want to differentiate using a
different color. Typically, you apply this property to a set of even and/or odd table
rows to created a striped effect.

tr:nth-child(even) { background-color: grey; }


tr:nth-child(odd) { background-color: #ccff99; }

• The 'nth-child' selector matches every element that is the nth child of the table or
any parent element. Below is an example code to make the every third list item
grey.
tr:nth-child(3n) { background-color: grey; }
60

STYLING TABLE: HOVER


• Using the hover property on your <tr>, you can specify that any table row
that your user points at, is highlighted, in the color you specify.

tr:hover {background-color: #ccff99; }


61

STYLING TABLE: OVERFLOW


• Your table can easily grow rather big overflowing out of the <div> you had
planned for your table in your Web page. You can use the
CSS overflow property to resolve this. It has four values:

• visible - Content is not clipped and may be rendered outside the padding
box.
• hidden - Content that has overflowed is hidden. This makes the overflowed
content inaccessible.
• scroll - Content that has overflowed is made accessible via a fixed scroll bar.

• auto - Content that has overflowed is made accessible via a scroll bar, which
appears automatically when required.
62

EXAMPLE USAGE
table { border-collapse: collapse; }
div { height: 200px; width: 200px; border: 1px solid blue; }
table, th, td { padding: 30px; border-bottom: 1px solid black; }

div.overflow-hidden { overflow: hidden; }


div.overflow-scroll { overflow: scroll; }
div.overflow-auto { overflow: auto; }
div.overflow-x-auto { overflow-x: auto; overflow-y:hidden; }
63

OVERALL EXAMPLE
64

POSITION OF AN ELEMENT
• There are four properties which can be used to adjust or set the position of
an element. Those properties are: left, top, right, and bottom.

• The CSS position property governs how an element is positioned on the


page and how it responds to the position adjusting properties
(left, top, right, and bottom). Up to this point, we have not used this
property and so everything we've seen has been the default position, which
is position:static for all elements.
65

position PROPERTY
• static
• A position property of static is the default for all elements. It simply
means that all elements follow the "flowing text"model of layout and the only
properties influencing their position are margins, padding, and the display
property that selects block level layout, inline or inline-block. Static
elements ignore the positioning properties we read about earlier
(left, top, right, and bottom).

position: static; /* the default */


66

position PROPERTY
• fixed
• A fixed positioned element respects the positioning properties (left, top, right,
and bottom). A fixed positioned element is positioned against
the window rectangle (aka the viewport). This means that fixed position
elements will not scroll with the rest of the page. Fixed position elements can
easily "stick" to the side or bottom or top of the browser.

position: fixed;
67

SELECTORS
• tag selector
• We've already seen this one. A CSS selector that consists solely of a single
tag (without punctuation or spacing) will be applied to any matching tag on the
page.

• id selector
• You may remember the id attribute (short for "identifier"). Recall that No two tags
are allowed to have the same id. You may also recall that the id cannot contain
spaces, nor most punctuation, nor begin with numbers.
68

SELECTORS
69

SELECTORS
• class selector
• The class attribute is similar to the id. However, whereas the id must be
unique and singular, the values of the class attribute can be shared by multiple
tags. And, multiple classes can be assigned to a tag by simply separating them
with spaces.
70

SELECTORS
• The class selector is simply a period (.) followed by the class name itself.
71

COMBINING SELECTORS
• Being able to define a CSS selector in terms of a tag, class or id is very powerful. But it's
not practical to place classes on every tag in your document, much less to put unique
ids throughout.

• It's also inconvenient to constantly repeat CSS rules. But by combining composing
selectors, all that can be avoided.
72

COMBINING SELECTORS
• Comma separated selectors
73

COMBINING SELECTORS
• Comma separated selectors

The joined version on the right is much easier to read and maintain.
If the "speech" items need to also be bold, that can simply be added by an additional rule:

blockquote,
q,
.speech {
color: red;
font-style: italic;
}
.speech { font-weight: bold; }
74

COMBINING SELECTORS
• Specialized selectors
• If two selectors of different types (like tag and class) appear next to each
other with no spacing separating them, then they form a
specialized selector. To match, a candidate must match both rules. If a tag
selector is used, it must appear first.

blockquote.speech { font-color: green; }

In the example above, the blockquote.speech selector is a blockquote tag selector


combined with a .speech class selector. So this rule will not necessarily apply to
every blockquote, nor every element with the speech class. Instead, it will only apply to those
blockquotes that also have the speech class.
75

COMBINING SELECTORS
• Specialized selectors
76

COMBINING SELECTORS
• Descendant selectors
• Consider this chunk of code:
<section id="intro">Welcome to <a href="#palaceland">PalaceLand</a>, world renown <q>Land of
endless palaces and <a href="#delight">delights</a></q>. As you make your way about, remember
the words of our founder <blockquote>Shouldn't we have <a href="#chairs">chairs</a>? Never made
much sense wandering room a room looking for a place to sit a spell. Folk that don't sit are
not likely all right in the <a href="#head">head</a></blockquote></section>

<section id="guideline">There are guidelines to follow while


in <a href="#palaceland">PalaceLand</a>. They are outlined on the back of your <q>Daring
Footman <a href="#trademark">(tm)</a></q> card. But the spirit of the guidelines are best
summed up by our founder <blockquote>Don't just <a href="#standthere">stand there</a> with your
mouth hanging open waiting for a pair of nesting birds.</blockquote> (and
no <a href="#camera_policy">flash photography</a> please.)</section>

What if we wanted all the links in the introductory section to be red, but all the link in the guideline
section to be green? That is what descendant selectors are for.
77

COMBINING SELECTORS
• Descendant selectors
• We add this CSS code, merely separate the tag, identifier, or class selectors by a
space.
#intro a { color: red; }
#guideline a { color: #00FF00; }
78

COMBINING SELECTORS
• Direct descendant selectors ( > )
• Sometimes you don't want to apply a style to any _possible_ child, but to only to the
direct children. This can be done with the > symbol. Use it between selectors to limit
the application to the direct children of the parent.
• For example, this rule, if applied to the HTML of the previous selector, would cause
the links in the intro section to be larger, but not the links in any nested quotes or
blockquotes. :

#intro > a { font-size: large; }


79

COMBINING SELECTORS
• Everything selector (*)
• The asterisk (*) can be used to match any tag. By itself, this is only marginally
useful. But combined with other selectors into a descendant selector, it can
be pretty useful.

body > * { margin-left: 10px; } /* all the _direct_ children of


the body receive the margin */
p * { text-decoration: underline; } /* the text of the
paragraph will be normal, but any children anywhere inside it
will be underlined */
80

PRECEDENCE RULES
1. Most specific rule
• A more specific rule takes precedence over a less specific rule. A rule that more
tightly matches a particular element than a general rule will be applied.

span { color: blue; }


ul li span { color: red; }

• In the example above, both rules are attempting to set a span color for a span
inside a list item. However, the second rule will "win" when there is a conflict (like
color in this case).
81

PRECEDENCE RULES
2. id selector is the most specific
• Rules with an id selector (e.g. #someid ) are considered more specific than rules
without.

3. .class selector is more specific than a tag selector


• Rules employing a class selector (e.g. .someclass ) are considered more specific
than rules without (but not as specific as an #id selector, which trumps everything).
82

PRECEDENCE RULES
4. Rules that come later override those that come earlier
• This guideline is for two CSS rulesets with the same selector. Where there are
conflicts, the rules from the later one apply.

.hortense { color: red; text-decoration: underline; }


.hortense { color: blue; }

• In the example above, an element with the .hortense class will be underlined and
its color will be blue, because that rule came later than when it was set red.
83

END OF TOPIC 3

You might also like