CSS
INFO 253A: Frontend Web Architecture
Kay Ashaolu
CSS
Cascading Style Sheets
Style
- color, size, visibility, positioning
- Specified separately from HTML
- Why separate?
CSS
<strong>hello</strong>
strong {
font-weight: bold;
color: magenta;
font-size: 45px;
}
How else could we do it?
Just like the funky ASCII symbols, we could set the style of each element
<!-- Warning: Invalid HTML -->
<strong font-color="magenta" font-size="45px">hello</strong>
CSS File
- Now all main headers are centered and have a light blue look
- What's the trade-off we made?
h1 {
color: #B3D4FC; /* light blue */
text-align: center;
}
ID & Class attributes
- id: Identifier. Unique per page
- class: Grouping. Multiple per page and per element
What's wrong with the above?
<strong id="logo" class="big red">Pinterest</strong>
Compromises
- Truth is, most sophisticated sites make a compromise
- Sharing styles between semantic elements
- Frameworks that are used by different sites
Leaky Abstraction
- When details of the composition or layers merge
- Often must write your HTML with knowledge of how you will style it
- But avoid too much coupling!
- Bootstrap
Element Selectors
- Selectors specify the element to apply a style
- This is selecting all strong elements
strong {
font-weight: bold;
color: red;
font-size: 45px;
}
ID & Class Selectors
#logo {
font-size: 64px;
color: red;
}
.symbol {
font-size: 32px;
color: darkblue;
}
<span id="logo">Pinterest</span>
<span class="symbol">PINTEREST</span>
<span class="symbol">New York Times</span>
Comma = OR
all h1 or h2 or h3 elements
h1, h2, h3 {
color: #B3D4FC; /* light blue */
text-align: center;
}
Descendant
- Think nested tags
- Let's write a table in HTML
- What is an example of a descendant?
Descendant CSS = (space)
table a {
font-weight: bold;
}
Cascading & Inheritance
- Some properties are passed down to descendants, like font-family
- Some elements may be affected by multiple rules, which "cascade"
- Most specific wins
Cascading
table {
font-family: sans-serif;
color: blue
}
.data {
border: 1px solid rgba(0, 0, 0, 0.2);
color: red
}
<table>
<tr><td>Color blue</td></tr>
<tr><td class="data">Color red</td></tr>
</table>
What's the trade-off?
- Now we can specify styles in another file
- Can select groups of tags or tags with IDs
- But how can we style individual tags?
Style Attribute
- Change the style of individual elements in-line in HTML
- Value of the style attribute is the same format as the definition block
- Only for very special cases!
<h1 style="color: brown;
background-color: yellow;">
Individual</h1>
The power of CSS
- CSS Zen Garden: One site, many designs
- Garden
- Under the Sea
Sneak Peak
- JavaScript can manipulate CSS too!
- Composability: they play well together, but don't require each other
Overview
CSS - Frontend Webarch
By kayashaolu