12. Intro to CSS
MSER 521�Fall 2025
1
Guiding Question: How to you style your work?
2
Outline
3
Document Object Model (DOM)
(n.) a way of representing a document, like a web page, in a way that can be understood by a human and by a computer. Typically, a DOM is created using HTML. That said:
DOM Schema
HTML
<html lang="en">�<head>� <title>DOM Example</title>� <meta name="author" content="EECS 130">� <link rel="stylesheet" href="main.css">�</head>��<body>� <main>� <h1>Hello!</h1>� <p>Welcome to this webpage.</p>� </main>�</body>�</html>
<html>
<title>
<head>
<body>
<link>
<main>
<h1>
<p>
Hello!
Welcome to this webpage.
<meta>
Outline
6
CSS Files: Style & Layout
How to include a stylesheet in your HTML
External stylesheets are stored in a separate *.css
Anatomy of a Stylesheet
body {
color: black;
padding: 1em;
}
.title-bar {
padding: 5px;
font-weight: bold;
}
#profile {
background-color: #ddd;
}
Stylesheets are comprised �of rulesets
9
Anatomy of a Ruleset
body {
color: black;
padding: 1em;
}
10
selector
property
value
declaration
Relationships
Parent & Child
Siblings
1 <html>
2 <head><title>Hello!</title></head>
3 <body>
4 <div>
5 <h1>Left</h1>
6 <p>hi!</p>
7 <p><em>hello</em></p>
8 <hr
9 </div>
10 <div>Right
11 <ul>
12 <li>list item 1</li>
13 <li>list item 2</li>
14 <li>list item 3</li>
15 </ul>
16 </div>
17 </body>�18 </html>
Relationships
Descendants
Ancestors
1 <html>
2 <head><title>Hello!</title></head>
3 <body>
4 <div>
5 <h1>Left</h1>
6 <p>hi!</p>
7 <p><em>hello</em></p>
8 <hr
9 </div>
10 <div>Right
11 <ul>
12 <li>list item 1</li>
13 <li>list item 2</li>
14 <li>list item 3</li>
15 </ul>
16 </div>
17 </body>�18 </html>
Outline
13
Selectors: Most Important Ones
14
Selector | Example | Description |
element | p | Selects all <p> elements |
.class | .card | Selects all elements with class of ”card” |
#id | #firstname | Selects the element with id of ”firstname” |
selector, selector | div, .card | Grouping selector: ‘Select all <div> elements and all elements with class of ”card”’ |
selector selector | div p | Descendant selector: “Select all <p> elements that are descendants of the <div> element.” |
selector > selector | div > p | Direct children selector: “Select all <p> elems that are direct children of <div> elems” |
MEMORIZE
...
1 <body>
2 <div class=”title-bar”>
3 <h1>Welcome, Malik</h1>
4 <img id=”profile” src=”images/pic.png” />
5 <hr>
6 </div>
7 <div>Right
8 <ul>
9 <li>list item 1</li>
10 <li>list item 2</li>
11 <li>list item 3</li>
12 </ul>
13 </div>
14 </body>
...
body {
color: grey;
}
h1, li {
text-transform: uppercase;
display: inline-block;
color: #999999;
}
.title-bar {
padding: 5px;
background-color: #EEEEEE;
}
#profile {
width: 100px;
float: left;
margin-right: 20px;
}
...
1 <body>
2 <div class=”title-bar”>
3 <h1>Welcome, Malik</h1>
4 <section>
5 <p>text text text</p>
6 </section>
7 <p>123 456 789</p>
8 </div>
9 <p>blah blah blah</p>
10 <div>Right
11 <p>abc def ghi jkl</p>
12 </div>
13 </body>
...
div p {
color: red;
}
div > p {
color: red;
}
.title-bar p {
color: red;
}
...
1 <body>
2 <div class=”title-bar”>
3 <h1>Welcome, Malik</h1>
4 <section>
5 <p>text text text</p>
6 </section>
7 <p>123 456 789</p>
8 </div>
9 <p>blah blah blah</p>
10 <div>Right
11 <p>abc def ghi jkl</p>
12 </div>
13 </body>
...
div p {
color: red;
}
div > p {
color: red;
}
.title-bar p {
color: red;
}
...
1 <body>
2 <div class=”title-bar”>
3 <h1>Welcome, Malik</h1>
4 <section>
5 <p>text text text</p>
6 </section>
7 <p>123 456 789</p>
8 </div>
9 <p>blah blah blah</p>
10 <div>Right
11 <p>abc def ghi jkl</p>
12 </div>
13 </body>
...
div p {
color: red;
}
div > p {
color: red;
}
.title-bar p {
color: red;
}
More On Selectors Here…
1. Which are the selectors?
h1 {
color: blue;
margin-top: 1em;
}�
.title-bar {
padding: 5px;
font-weight: bold;
}�
#profile {
background-color: #ddd;
}
2. Name three properties
h1 {
color: blue;
margin-top: 1em;
}�
.title-bar {
padding: 5px;
font-weight: bold;
}�
#profile {
background-color: #ddd;
}
3. What will this rule set do to the HTML?
img {
width: 200px;
}
...
1 <body>
2 <div class=”nav-bar”>
3 <h1>Welcome, Malik</h1>
4 <section>
5 <p>text text text</p>
6 </section>
7 <img src=”pic1.png” />
8 <span>123 456 789</span>
9 </div>
10 <img src=”pic2.png” />
11 <p>blah blah blah</p>
12 <div>
13 <p>abc def ghi jkl</p>
14 </div>
...
4. What will these rule sets do to the HTML?
body {
text-transform: uppercase;
}
div img {
border: solid 2px #F00;
}
...
1 <body>
2 <div class=”nav-bar”>
3 <h1>Welcome, Malik</h1>
4 <section>
5 <p>text text text</p>
6 </section>
7 <img src=”pic1.png” />
8 <span>123 456 789</span>
9 </div>
10 <img src=”pic2.png” />
11 <p>blah blah blah</p>
12 <div>
13 <p>abc def ghi jkl</p>
14 </div>
...
5. What will these rule sets do to the HTML?
...
1 <body>
2 <div class=”nav-bar”>
3 <h1>Welcome, Malik</h1>
4 <section>
5 <p>text text text</p>
6 </section>
7 <img src=”pic1.png” />
8 <span>123 456 789</span>
9 </div>
10 <img src=”pic2.png” />
11 <p>blah blah blah</p>
12 <div>
13 <p>abc def ghi jkl</p>
14 </div>
...
body {
text-transform: uppercase;
}
div img {
border: solid 2px #F00;
}
6. What will this rule set do to the HTML?
* {
color: red;
text-transform: uppercase;
}
...
1 <body>
2 <div class=”nav-bar”>
3 <h1>Welcome, Malik</h1>
4 <section>
5 <p>text text text</p>
6 </section>
7 <img src=”pic1.png” />
8 <span>123 456 789</span>
9 </div>
10 <img src=”pic2.png” />
11 <p>blah blah blah</p>
12 <div>
13 <p>abc def ghi jkl</p>
14 </div>
...
7. What will this rule set do to the HTML?
h1, span {
color: red;
text-transform: uppercase;
}
...
1 <body>
2 <div class=”nav-bar”>
3 <h1>Welcome, Malik</h1>
4 <section>
5 <p>text text text</p>
6 </section>
7 <img src=”pic1.png” />
8 <span>123 456 789</span>
9 </div>
10 <img src=”pic2.png” />
11 <p>blah blah blah</p>
12 <div>
13 <p>abc def ghi jkl</p>
14 </div>
...
Outline
27
The Box Model
28
References:
The Box Model
Block-Level Elements
HTML tags that have a default display of: display: block;
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>
Inline Elements
HTML tags that have a default display of: display: inline;
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
Outline
32
Specificity and the Cascade
Specificity and the Cascade
Outline
35
Common CSS Properties and Techniques
Activity
37