Scribd
Upload
2 views

lecture03

The document outlines a lecture on CSS, covering topics such as CSS terminology, selectors, specificity, and layout techniques. Key concepts include the Document Object Model (DOM), the cascade of CSS, and the box model, which are essential for understanding how styles are applied to HTML elements. Additionally, it emphasizes the importance of good code quality and proper resource usage in web development.

Uploaded by

Furkan Tunç
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

lecture03

The document outlines a lecture on CSS, covering topics such as CSS terminology, selectors, specificity, and layout techniques. Key concepts include the Document Object Model (DOM), the cascade of CSS, and the box model, which are essential for understanding how styles are applied to HTML elements. Additionally, it emphasizes the importance of good code quality and proper resource usage in web development.

Uploaded by

Furkan Tunç
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

More CSS, Specificity, and

Layout
Lecture 3
Today’s Agenda

● Admin & Reminders


● (quick) CSS Terminology Review
● More CSS
Admin & Reminders
● Creative Project 1 due next Wednesday
○ You should have a repo in GitHub, and you should be able to access it at https://github.com/CENG3206-
WebProgramming/<your username>
■ (Replace <your username> with Your Username)
Terminology

Content Structure Style

WORDS + IMAGES HTML CSS


Terminology
HTML: the things and their meaning
● Content: Words, images, documents, etc.
● Meaning: Collection of words? Links? Emphasized? Heading?

CSS: The way things look


● How does it look?
● Which things look that way?
● "Cascades" down, applying to multiple things
Anatomy of CSS
CSS Terminology
Selectors designate exactly which element(s) to apply styles to

Properties determine the styles that will be applied to the selected element(s)
(background-color, font-size, etc.)

Each property has a set of values that can be chosen (e.g. 14pt value for font-size
property)

There are currently over 200 possible style properties to choose from - use the Chrome
inspector for useful autocomplete of property values!

Together, a selector and the list of properties that follows is a rule.


Online Resources: Good or Bad?
You may find some resources online helpful to explore different ways to use CSS
properties - there are a ton of things! But some are better than others (make sure you
understand why these examples are poor use of HTML and CSS).

Understanding good code quality can be extremely valuable in navigating an


overwhelming amount of resources on the web today.

A good discussion.
Understanding the Good vs. Bad
We choose resources that best align with our code quality guidelines, while giving just
enough "extra detail" into topics we cover in lecture/section/lab. That said, let us know if
you're looking for recommendations on a specific resource!

Remember that all of your work must be your own, and cite any tutorials/resources you
may be using to explore features you may be exploring.
The DOM

The "Document Object Model" (DOM)

● An internal representation of a website.


● Follows a similar structure as your HTML

For example:

● Every HTML tag (<p>, <em>, <body>, etc.) are part of the DOM, and have a place in a tree
hierarchy.
● They all have a parent (<body>'s is <html>) and almost always have a child (<title> is a child
of <head>).
● You don't build a DOM, but the browser does, which allows you to access it.
CSS Selectors
Used to select specific HTML elements in CSS

Type of Selector Examples

Simple, grouping p {} li, .cheese {} img#mycat {}

Combinators ul li {} div > p {} div > p > a {}

Pseudo-classes a:hover {} ul:nth-child(2) {} div:first-child {}


id and class
id
● Unique identifier for an element
● Each unique id can only appear once per page
● Each element can only have one id
class
● Non-unique grouping attribute to share with many elements
● Many elements (even of different types) can share the same class
● Each element can have many different classes
Using the nth-child pseudo-class

Example (CodePen)
The Document Object Model (DOM)

How the browser represents the hierarchy of a page - very useful when thinking about
selectors!
We'll return to this when we introduce JavaScript, where we can dynamically access/modify
element "nodes" in the DOM tree.
For those of you interested in accessibility on the web, there is also a related concept known as
Accessibility Tree
The “Cascade” of CSS
All styles "cascade" from the top of the sheet to the bottom
● When you add a second file, conflicting rules are overwritten
● Take care not to override styles if possible
● If you have styles specific to a page, use a second sheet (usually linked after the
shared one)

Styles "cascade" together when there are conflicting selectors but different properties.
Top, to bottom, lower rules will overwrite
previous ones
HTML CSS
<p id="text"> p {
Hello World! color: blue;
Given the HTML and CSS to </p> }
the right, what color will the
p {
"Hello World!" paragraph be? color: red;
}

Reference for the following slides is at:


https://developer.mozilla.org/en-
"Conflicting" Rules?
HTML CSS
This is a big part of the "cascade" in CSS: <p id="text"> p {
Like water falling off an edge, it all ends Hello World! color: blue;
up in a pool at the bottom, but some </p> }
drops of water get there before others.
p {
text-decoration: underline;
What will "Hello World!" look like }

now?
But what if the selector is different?
CSS
There are two other important concepts here:
p {
1. Specificity color: blue;
2. Inheritance }

#text {
color: red;
}
CSS Specificity (try saying this 5 times fast)
Given an element, and two (or more) different HTML CSS
selectors that would "select" it, which rules would <p id="text"> #text {
actually apply? Hello World! color: blue;
</p> }

p {
color: red;
What will "Hello World!" look like }

now?
With different selectors, which one is more specific?

As the browser reads through your CSS source, it calculates a score for each selector. You'll rarely, if
ever, see these numbers, but they might look something like 0223 or 1000.

When looking at an HTML element and trying to decide what it should look like, it gathers all the
selectors that might apply, sorts by their specificity score, and applies some style in order!
Specificity Scores (you don't have to memorize these)

Example Selector Thousands Hundreds Tens Ones Total Score

h1 0 0 0 1 0001

h1 + p::first-letter 0 0 0 3 0003

li > input[value="name"] > .form 0 0 2 2 0022

#text 0 1 0 0 0100

style="" attribute 1 0 0 0 1000

Source: https://developer.mozilla.org/en-
US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#specificity_2

Calculator: https://specificity.keegan.st/
CSS Specificity and Cascading
HTML CSS
Note that I've been specifically saying
<p id="text"> #text {
"selector" rather than property.
Hello World! color: blue;
</p> }

p {
color: red;
text-decoration: underline;
}
What will "Hello World!" look like
now?
CSS Inheritance
Some properties, like color or HTML CSS
text-decoration are inheritable. <div> #text {
That is: if there's no conflict, an <p id="text"> color: blue;
element will inherit the value for that Hello World! }
property from its parent. </p>
</div> div {
color: red;
text-decoration: underline;
}
What will "Hello World!" look like
now?
CSS and Layout
Layout Techniques in CSS
● Block vs. Inline and nesting in HTML
● Box Model (margin/padding/border)
● Flex
● Positioning
● Float (less common today, but still good to know)

These are what we expect you to focus on, roughly in order of prioritization
Default Dimensions of Block and Inline Elements
Height:
● Block and inline elements normally have the height of their content
Width:
● Inline elements have the width of their content
● Block elements have a width that spans the width of their parent

<p id="css"> #css { background-color: lightblue; }


CSS is <strong>really</strong> great!
</p> #html { background-color: lightgreen; }

<p id="html">HTML is pretty cool too.<p> strong { background-color: white; }


Setting width and height (block only)
#css {
width: 80%;
<p id="css">
height: 60px;
CSS is <strong>really</strong> great!
}
</p>
strong {
<p id="html">HTML is pretty cool too.<p>
width: 120px; /* doesn't work */
height: 50px; /* doesn't work */
}
Inline-Block elements
Inline elements have width/height that is defined based on their content. Cannot set width/height (or vertical
margin) of inline elements, but can change them to inline-block elements using the display property

#css {
width: 80%;
<p id="css"> height: 60px;
CSS is <strong>really</strong> great! }
</p>
strong {
/* We still get the inline display, but with
<p id="html">HTML is pretty cool too.<p> width/height */
display: inline-block;
width: 120px; /* works! */
height: 50px; /* works! */
}
More about width and height
Both can be set using length units (px, % are most common - when doing page layout,
generally want to do % unless you know you have elements that are a fixed width)

Can specify the min-width, max-width, min-height, or max-height properties,


which are particularly useful for responsive design (more examples).
The Box Model!
Box model properties
Margin: (outside) space between different
elements

Border: (optionally visible) line that


separates elements

Padding: (inside) space between element


content and border

You might also like