Cascading Style Sheets (CSS) allow separation of document structure (HTML) from presentation (CSS). CSS controls how HTML elements are displayed on screen, paper, or other media. CSS works by applying styles, such as font, color, and size, to HTML elements. The cascade determines which styles are applied based on specificity and source order. CSS properties modify text, color, background, borders, boxes, positioning, and other attributes of HTML elements.
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
An Introduction to Cascading Style Sheets (CSS3)
1. Cascading Style Sheets (CSS3)
IT 107
Mr. Ardee Aram
Lecturer
Treston International College
2. 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.
3. Why CSS?
● CSS removes the presentation attributes
from the structure allowing reusability, ease
of maintainability, and an interchangeable
presentation layer.
4. 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>
5. Why CSS?
● CSS allows us to make global and
instantaneous changes easily.
6. The Cascade
● The process of combining several style
sheets and resolving conflicts between
them
7. 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.
8. 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")
10. 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!
12. 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.
13. 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.
16. Type (Element) Selector
Specify the style(s) for a single HTML
element.
p {
margin: 0;
padding: 0;
border-top: 1px solid #ff0;
}
17. The Class Selector
<p class=“intro”>
This is my introduction text
</p>
.intro {
font-size: 12px;
font-family: verdana, sans-serif;
margin: 10px;
}
18. The Identifier Selector
<p id=“intro”> This is my
introduction text</p>
#intro {
border-bottom: 2px dashed
#fff;
}
19. 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.
20. 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>
21. 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>
22. 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>
31. Descendant Selectors
header p{
color: red;
}
● Note: only p is color red. header (the
parent) is not affected.
<header>
<p>
Hello, world.
</p>
</header>
32. Descendant Selectors
● Not only direct descendants, but also
indirect descendants
header p{
color: red;
}
<header>
<div>
<p>
Hello, world.
</p>
</div>
</header>
34. 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
38. 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 :(
47. The Cascade
● How do you know which rules take effect if
multiple rules target the same element?
● Rule #1:
element < .class < #id
48. 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.
49. 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;
}
?
50. 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
53. 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.
54. 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;
}
55. 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.
56. 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.
57. 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)
65. 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.
68. 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).
69. 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
70. 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.