Intro to CSS & the DOM
CSCI 185, Fall 2023�Intro to Computer Programming for the Web
1
Announcements
2
Outline
3
Outline
4
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. Declarative languages like CSS are used to style it, and programming languages like Javascript allow us to change it.
Convert this Simple HTML Page to a DOM Diagram
<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 Tree Diagram
<html>
<title>
<head>
<body>
<link>
<main>
<h1>
<p>
Hello!
Welcome to this webpage.
<meta>
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>
The DOM (Document Object Model)
A way to manipulate elements and styles on a web page using CSS and JavaScript
Open your console and type:
> document
Outline
10
But how do you make stuff look nice?
11
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
14
Anatomy of a Ruleset
body {
color: black;
padding: 1em;
}
15
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
18
Selectors: Most Important Ones
19
Selector | Example | Description |
.class | .intro | Selects all elements with class=”intro” |
#id | #firstname | Selects the element with id=”firstname” |
* | * | Selects all elements |
element | p | Selects all <p> elements |
MEMORIZE THIS SLIDE
Selectors: Also Useful
20
Selector | Example | Description |
element, element | div, p | Selects all <div> elements and all <p> elements |
element element | div p | Selects all <p> elements inside <div> elements |
element > element | div > p | Selects all <p> elements where the parent is a <div> element |
...
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…
https://csci-185.github.io/fall2023/css-reference/selectors/
1. Which are the selectors?
h1 {
color: blue;
margin-top: 1em;
}�
.title-bar {
padding: 5px;
font-weight: bold;
}�
#profile {
background-color: #ddd;
}
3. Name three properties
h1 {
color: blue;
margin-top: 1em;
}�
.title-bar {
padding: 5px;
font-weight: bold;
}�
#profile {
background-color: #ddd;
}
4. 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>
...
5. 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
33
The Box Model
34
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
38
Specificity and the Cascade
Specificity and the Cascade
Outline
41
Common CSS Properties and Techniques
Activity
43