An Introduction to Cascading Style Sheets (CSS3)

Cascading Style Sheets (CSS3)
IT 107
Mr. Ardee Aram
Lecturer
Treston International College

What is CSS?
Cascading Style Sheets (CSS) form the
presentation layer of the user interface.
Structure (HTML5)
Behavior (Javascript)
Presentation (CSS)
Tells the browser agent how the element is to
be presented to the user.

Why CSS?
● CSS removes the presentation attributes
from the structure allowing reusability, ease
of maintainability, and an interchangeable
presentation layer.

Why CSS?
● HTML was never meant to be a
presentation language. Proprietary
vendors have created tags to add
presentation to structure.
<font>
<b>
<i>
<center>

Why CSS?
● CSS allows us to make global and
instantaneous changes easily.

The Cascade
● The process of combining several style
sheets and resolving conflicts between
them

The Cascade
● The power of CSS is found
in the “cascade” which is the
combination of the browser’s
default styles, external style
sheets, embedded, inline,
and even user-defined
styles.
● The cascade sets priorities
on the individual styles which
effects inheritance.

CSS Inheritance
● Unless a more specific style is set on a
child element, the element looks to the
parent element for its styles.
<div id=“make_me_green“>
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
</div>
If I make this green...
This becomes green
as well!
(Unless another rule specifically
targets the "li")

CSS Inheritance
● Helpful in reducing the amount of CSS to
set styles for child elements.

Using stylesheets
External Style Sheet
<link href=“stylesheet” type=“text/css”
href=“location.css” />
Preferred method. In our class, the ONLY method.
You will get this better if you are creating large web
applications of several hundred thousand lines of code,
and styles are everywhere.
DISCIPLINE!

Using stylesheets
Embedded Styles
<style type=“text/css”>
body {}
</style>
Inline Styles
<p style=“font-size: 12px”>Lorem ipsum</p>

Syntax
selector {
property1: value1;
property2: value2;
}
The selector selects which part of the
hypertext document a style applies to.
The selector can either be an HTML element
tag, an identifier, a class, or a combination of
these three.

Syntax
selector {
property1: value1;
property2: value2;
}
A declaration is combination of CSS
property and its corresponding value. These
properties affect how a part of the HTML
document looks like.

Syntax
selector {
property1: value1;
property2: value2;
}
A set of declarations associated to a single
selector is called the declaration block

Syntax
selector {
property1: value1;
property2: value2;
}
The combination of the selector and the
declaration block is called a rule.

Type (Element) Selector
Specify the style(s) for a single HTML
element.
p {
margin: 0;
padding: 0;
border-top: 1px solid #ff0;
}

The Class Selector
<p class=“intro”>
This is my introduction text
</p>
.intro {
font-size: 12px;
font-family: verdana, sans-serif;
margin: 10px;
}

The Identifier Selector
<p id=“intro”> This is my
introduction text</p>
#intro {
border-bottom: 2px dashed
#fff;
}

Identifier vs. Class
Identifier or class? What’s the difference?
An identifier is specified only once on a page
and has a higher inheritance specificity
(“priority”) than a class.
A class is reusable as many times as needed
in a page.

Combination of selectors
● An element, identifier, and class selector
can be combined to select a more specific
element
p#intro {
color: red;
}
<p>
Hello, world.
</p>
<p id="intro”>
Hello, world.
</p>

Combination of selectors
● An element, identifier, and class selector
can be combined to select a more specific
element
p#intro.impt {
color: red;
}
<p id="intro">
Hello, world.
</p>
<p id="intro”
class="impt">
Hello, world.
</p>
<p>
Hello, world.
</p>

Multiple Selectors
● Several selectors can have the same
declarations by combining them with a
comma.
p#intro.impt,
h1.header
{
color: red;
}
<p id="intro"
class="impt">
Hello, world.
</p>
<h1 class="header">
Hello, world.
</h1>

Multiple Selectors
h1,h2,h3,div.important
{
color: red;
}

Tag Relationships
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<header>
</header>
<div id="content">
<h1>Hey there</h1>
</div>
<footer>
</footer>
</body>
</html>

Tag Relationships
html
head body
title
header div footer
h1
node

Tag Relationships
html
head body
title
header div footer
h1
parent
child

Tag Relationships
html
head body
title
header div footer
h1
descendants
parent

Tag Relationships
html
head body
title
header div footer
h1
ancestors
node

Descendant Selectors
header p{
color: red;
}
<p>
Hello, world.
</p>
<header>
<p>
Hello, world.
</p>
</header>

header p{
color: red;
}
● Note: only p is color red. header (the
parent) is not affected.
<header>
<p>
Hello, world.
</p>
</header>

● Not only direct descendants, but also
indirect descendants
header p{
color: red;
}
<header>
<div>
<p>
Hello, world.
</p>
</div>
</header>

header p.impt{
color: red;
}
<header>
<p>
Hello, world.
</p>
</header>
<header>
<p class="impt">
Hello, world.
</p>
</header>

Adjacent Sibling Selectors
h2+p {
color: red;
}
<h2>Heading</h2>
<p>The selector above
matches this
paragraph.</p>
<p>The selector above
does not match this
paragraph.</p>
Note: it does NOT match the
second <p> because it is
NOT adjacent to h2 (although
it is a sibling

Child selector
header > p{
color: red;
}
<header>
<p>
Hello, world.
</p>
</header>

Child selector
header > p{
color: red;
}
<header>
<div>
<p>
Hello, world.
</p>
</div>
</header>

Universal selector
* {
color: red;
}
Makes any tag
red
● Matches any one (and only one) selector

Universal selector
div * em {
color: red;
}
<div>
<h1>
The <em>Universal</em> Selector
</h1>
<p>We must <em>emphasize</em> the
following:</p>
<ul>
<li>It's <em>not</em> a
wildcard.</li>
<li>It matches elements regardless
of <em>type</em>.</li>
</ul>
This is an <em>immediate</em> child
of the division.
</div>
div * em {
color: red;
}
div h1 em
div p em
div ul em
div li em
Nope :(

Attribute selector
input[type="password"]
{
color: red;
}
<input type="text"
name="username" />
<input
type="password"
name="password" />
<input type="submit"
value="Log-in" />

Attribute selector
● *= attribute contains certain value
somewhere
div[id*="at"]
{
color: red;
}
<div id="great"></div>
<div id="cattle"></div>
<div id="attack"></div>
<div id="feet"></div>

Attribute selector
● ^= attribute begins with certain value
div[id^="at"]
{
color: red;
}

Attribute selector
● $= attribute ends with certain value
div[id$="at"]
{
color: red;
}

Attribute selector
● ~= attribute is within space separated list
div[rel~="red"]
{
color: red;
}
<div rel="blue red green"></div>
<div rel="violet infrared"></div>
<div rel="ultraviolet red"></div>
<div rel="reddish"></div>

Attribute selector
● |= attribute is within dash separated list
div[rel|="red"]
{
color: red;
}
<div rel="blue red green"></div>
<div rel="blue-red-green"></div>
<div rel="violet-infrared"></div>
<div rel="ultraviolet-red"></div>
<div rel="reddish"></div>

Multiple attribute selector
a[href*="google"][rel="outside"]
{
color: red;
}
<a href="http://yahoo.com" rel="outside">Click here</a>
<a href="http://google.com" rel="outside">Click here</a>
<a href="http://google.com">Click here</a>

Pseudo-class selector
a:link
{
color: black;
text-decoration:none;
}
a:hover
{
color: red;
text-decoration:underline;
}
a:active
{
color: blue;
text-decoration:underline;
}
a:visited
{
color: green;
text-decoration:none;
}
LOVE-HATE

The Cascade
● How do you know which rules take effect if
multiple rules target the same element?
● Rule #1:
element < .class < #id

The Cascade
● Rule #2:
Count the number of elements, class, and
identifier in the selector.
The most number of identifier wins.
If tie, the most number of classes wins.
If tie again, the most number of elements wins.
If it is still a tie, the rule that has been declared
last wins.

The Cascade
<div id="kangkong" class="talong">
<div class="pechay">
<p class="upo">Hello</p>
</div>
</div>
div > div p
{
color: red;
}
div.talong .pechay p.upo
{
color: blue;
}
#kangkong .upo
{
color: green;
}
div#kangkong div p
{
color: pink;
}
?

The Cascade
<div id="kangkong" class="talong">
<div class="pechay">
<p class="upo">Hello</p>
</div>
</div>
div > div p
{
color: red;
}
div.talong .pechay p.upo
{
color: blue;
}
#kangkong .upo
{
color: green;
}
div#kangkong div p
{
color: pink;
}
id – 0
class – 0
element - 3
id – 0
class – 3
element - 2
id – 1
class – 1
element - 0
id – 1
class – 0
element - 3

CSS Text
● color: red/green/#ff0000/...
● text-decoration: overline/line-through/underline/...
● text-transform: uppercase/lowercase/capitalize
● text-align: left/right/center

CSS Fonts
● font-family: arial, tahoma, sans-serif;
● font-weight: bold;
● font-style: italic;
● font-size: 18px;

CSS Display
● display: inline;
Display as inline-level element
Does not cause elements to be pushed
downward to a new line.
Width is as wide as the containing elements.

CSS Display
This is a paragraph that
contains <span
class="impt">something
very important,</span>
and must be
emphasized.
● display: inline;
This is a paragraph that contains something
very important, and must be emphasized.
span.impt
{
font-weight: bold;
color: red;
display: inline;
}

CSS Display
● display: block;
Display as block-level element
Causes elements to be pushed downward
to a new line.
Width gets 100% of the parent element.

CSS Display
This is a paragraph that
contains <span
class="impt">something
very important,</span>
and must be
emphasized.
● display: block;
span.impt
{
font-weight: bold;
color: red;
display: block;
}
This is a paragraph that contains
something very important,
and must be emphasized.

Box Model
Every element in the DOM (Document Object
Model) has a conceptual “box” for presentation.
The box consists of margin, padding, border,
content (width, height), and offset (top, left)

Box Model: Border
● border-width: 1px;
● border-style: solid/dashed/...
● border-color: #ffaeae;
● border-right-width: 3px;
Shorthand:
● border: border-width border-style border-
color;
border: 1px solid green;

Box Model: Margin
● margin-top: 2px;
● margin-right: 2px;
● margin-bottom: 2px;
● margin-left: 2px;
Shorthand:
● margin: margin-top margin-right margin-bottom
margin-left;

Box Model: Margin
● How to center a block element
.the_block
{
margin-left: auto;
margin-right: auto;
}

Box Model: Padding
● padding-top: 2px;
● padding-right: 2px;
● padding-bottom: 2px;
● padding-left: 2px;
Shorthand:
● padding: padding-top padding-right padding-
bottom padding-left;

Box Model
● width: 1024px;
● height: 40px;
● min-width: 300px;
● min-height: 300px;

CSS Background
● background-color: #aeaeae;
● background-image: url('picture.png');
● background-position:;
● background-repeat: repeat-x/repeat-y/no-repeat;

Positioning
● position: static;
– Default positioning
– always positioned according to the normal
flow of the page.
– NOT affected by the top, bottom, left, and
right properties.

Positioning
● position: relative;
Moves the element relative to its original
position
● left: 20px;
● top: 20px;
Can also be
● right: 20px;
● bottom: 20px;

Positioning
position: relative;
top:20px;
left:20px;
top: 20px
left: 20px

Positioning
● position: absolute;
● positioned relative to the first parent
element that has a position other than
static. (whut? Again)
● positioned relative to the first parent
element that has a position other than
static (e.g. relative or absolute).

Positioning
position: relative;
position: absolute;
left: 0px;
bottom: 0px;
For absolute to work, there should be a relative, absolute, or fixed
positioned element in the nodes ancestor. Coordinates are relative to that ancestor

Positioning
● position: fixed;
● An element with fixed position is positioned
relative to the browser window.
● It will not move even if the window is
scrolled.

Columns via Floats
float: left;
width: 250px;
float: left;
width: 250px;
float: left;
width: 250px;
clear: both;

References
● Chris Poteet, 2007 ,Cascading Style Sheets (CSS),
An Introduction,
http://www.slideshare.net/cpoteet/introduction-to-cascading-s
● http://people.opera.com/howcome/2006/phd/#h-357
● http://www.w3.org/TR/CSS21/syndata.html#q10
● http://reference.sitepoint.com/css/adjacentsiblingselector
● http://reference.sitepoint.com/css/universalselector
● http://css-tricks.com/attribute-selectors/
● http://css-tricks.com/pseudo-class-selectors/

References
● http://www.w3schools.com/css/css_positio
ning.asp

An Introduction to Cascading Style Sheets (CSS3)

More Related Content

What's hot

Viewers also liked

Similar to An Introduction to Cascading Style Sheets (CSS3)

Recently uploaded

An Introduction to Cascading Style Sheets (CSS3)

Editor's Notes