6. HTML Document Hierarchy: Parents, children and
siblings
HTML elements are described in terms of relationships.
All elements in the document have a parent (up to ‘document’,
which is at the top), and may have children (nested inside) or
siblings (placed alongside).
<parent x>
<child and sibling y> </child and sibling y>
<child and sibling z> </child and sibling z>
</parent x>
8. •A style sheet isaset of rulesdefining how
an html element will be“presented” in
the browser
•Theserules are targeted to specific
elements in the html
document(DOM)
Style Sheet
9. Style sheet linking types
• Author (developer) Styles
• Inline Styles - As inline attribute “style” inside HTML tags
<div style=“font-weight: bold;”>I am bold</div>
• Embedded Styles - As embedded style tag with in HTML document.
<html>
<head>
<title>Welcome to Vendio!</title>
<style>
.footer {
width:90%;
}
</style>
-------
</html>
• Linked Styles - Inside separate files with .css extension
<link rel="stylesheet" href=“external.css" type="text/css" />
10. • User Style sheets
Contains the user created styles
• Browser default style sheet
Contains default styles for all users of a browser
13. CSSRule
selector {property: value;}
Every style is defined by a selector and
a declaration. The declaration contains at least
one property/value pair.Together they are
called a CSS Rule.
declaration
14. CSSDeclaration
You can apply multiple declarations to a
selector(s) by separating the delcarations with
semi-colons.
sans-serif;
p {
font-family: Arial,
font-size: 14px;
color: #666666;
}
17. The essential selector types(elements)
Primary
Structur
e
Body
Element
s
Formatting
Elements
html p em
body br i
h1 – h6 strong
ul b
ol q
a blockquote
img
div
span
20. Attribute selectors
Attribute selectors selects elements based upon the attributes present
in the HTMLTags and their value.
IMG[src="small.gif"] {
border: 1px solid #000;
}
will work for
<img src=“small.gif” />
21. CSS Pseudo-classes
selector:pseudo-class { property: value }
:link
:visited } Link (A tag) related pseudo classes
:hover
:active
:after
:before
:first-child
:focus
:first-letter
:first-line
:lang
26. Categories of CSS Properties
• Positioning and layout handling related.
• Background related properties.
• Font and text related
• Links related.
• Lists related.
• Table related.
27. CSSValues
• Words: text-align:center;.
• Numerical values: Numerical values are usually followed by a unit type.
font-size:12px;
12 is the numerical value and px is the unit type pixels.
• AbsoluteValues – in, pc, px, cm, mm, pt
• RelativeValues – em, ex, %
• Color values: color:#336699 or color#369.
32. Cascade
• It ultimately determines which css
properties will apply to a given element
• cascade is tied to three main concepts
– Importance
– Specificity
– Inheritance
33. Importance
• Style sheets can have a few different sources
User agent(browser styles), User(user’s browser options), Author(inline, embedded or
external)
• “!important” declaration – balance the priority of user and author style
• Ascending order of importance
User agent declarations
User declarations
Author declarations
Author !important declarations
User !important declarations
34. Specificity
• Specificity refers to how specific your selector isin naming anelement
• Every CSS rule has a particular weight
• This weight defines which properties will be applied to an element when
there are conflicting rules.
• If one rule is more specific than another, it overrides others.
• Two rules share the same weight, source and specificity, the later one is
applied.
35.
36.
37. Inheritance
• Inheritance is a way of propagating property values from parent elements to
their children
• When an element inherits a value from its parent, it is inheriting its
computed value
• Not all properties are inherited(e.g – padding, margin, border..etc), but
you can force ones to be by using the ”inherit” value(e.g p {border: inherit})
• No specificity(lowest priority)
38.
39. • Made it possible to define different style rules for different media
types.(computer screens, printers, handheld devices..etc)
• Syntax
@media mediatype and (expressions) {
CSS-Code;
}
• Result of the query is true if the specified media type matches the type of
device the document is being displayed on and all expressions in the media
query are true.
When a media query is true, the corresponding style sheet or style rules are
applied, following the normal cascading rules.
Media Queries
40. • CSS animations allows animation of most HTML elements without using JavaScript
or Flash!
• @keyframes name{
from CSS-Code; to CSS-Code ;
}
When you specify CSS styles inside the keyframes the animation will gradually
change from the current style to the new style at certain times.
• To get an animation to work, you must bind the animation to an element.
• selector {
animation-name: name; animation-duration: time;
}
• http://www.hongkiat.com/blog/creative-css-animations/
Animation
41. Some things you can change with CSS
colors
type
type size
backgrounds
spacing
sizes
borders
positions (layout)
Some things you can’t change with CSS
content
markup
42. Exercise
• Design a responsive online shopping cart by using html and css (no
JavaScript).
