4. The Cascade
The “cascade” part of CSS is a set of rules for
resolving conflicts with multiple CSS rules
applied to the same elements.
For example, if there are two rules defining
the color or your h1 elements, the rule that
comes last in the cascade order will “trump”
the other.
6. Inheritance & Specificity
As a designer, your goal is to set an overall
global consistent style, then add in more specific
styles as needed.
You can control how and where your styles are
applied to your HTML by managing their
inheritance and specificity.
7. Inheritance
Most elements will inherit many style properties
from their parent elements by default. A parent
is a containing element of a child.
HTML!
<body>
<div>
<ul>
<li></li>
</ul>
</div>
</body>
relationship!
parent of site!
parent of ul and li, child of body!
parent of li, child of div and body!
child of ul, div, and body!
!
8. Inheritance
body
make the paragraph 16px, Verdana, red
p
make the paragraph blue
16px, Verdana, blue
19. Images can be integrated into your site
as html <img> elements or pulled in
from your css.
Images on the Web
How are images being
used in the following sites?
20. Images can be integrated into your site
as html <img> elements or pulled in
from your css.
How are images being
used in the following sites?
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31. Beyond the technical considerations,
how do images create or influence the
experience?
!
What are the considerations you take
into account before using an image in
your designs?
41. 1 Save images in the right format
2 Save images at the right size
3 Measure images in pixels
42. What is the “right size”?
With the growing use of responsive design
techniques and faster connections, it is
becoming less crucial for designers to have their
images perfectly sized to their box.
The basic guideline is to have (just) enough
pixels for your images to look great, however
you are using them.
45. jpg
jpgs are for images, like photographs, that have a lot of colors and
gradations. It uses “lossy” compression, meaning that you can
reduce the size of the image by reducing the quality of the image
detail.
colors transparency?
24-bit:
millions no
46. What is image detail?
Image quality is detail; the quality of the original capture can be
accessed by how much actual live detail was recorded, pixel-by-pixel.
The more you compress your jpgs, the more of these pixel-by-
pixel details you making the same (blowing out). The result of
too much compression is jpg artifacts and posterization.
51. png-24
There are two kinds of png images: 24-bit (png-24) and 8-bit
(png-8). png-24 is a great format because it supports alpha
transparency, which allows you to have images with transparent
shadows, anti-aliasing, etc, and color underneath will show through.
There is no support for png-24 in ie6 (there is a workaround).
colors transparency?
24-bit:
millions
yes
(alpha transparency)
53. png-8
png-8 is an 8-bit image format, meaning that it supports up to 256
colors. It supports binary transparency, meaning that pixels are
either on or off – they have no transparency. This translates to jaggy
edges (which you have to then plan for and work around).
You can reduce the color index (aka color table) to contain only the
colors you need, resulting in very small image sizes. gif files are
saved in “index” color mode.
colors transparency?
8-bit:
256 colors
yes
(binary transparency)
54.
55. Should I use png or jpg?
For photos, you almost always go with jpg,
because pngs will usually be much larger.
For icons, backgrounds, tiles, etc, that need
transparency, use png-24.
58. gif
gif if the workhorse for icons and vector graphics (like logos) that
don’t need alpha transparency. Like png-8, it uses binary
transparency. You can reduce the color index (aka color table) to
contain only the colors you need, resulting in very small image sizes.
gif files are saved in “index” color mode.
colors transparency?
8-bit:
256 colors
yes
(binary transparency)