CSE 154

Lecture 3: Terminology Review & More CSS

Today's Agenda

Admin & Reminders

Terminology Review

CSS

Reminders & Notes

CP1 out and due next week -- Ask for help as needed.

Office Hours with Rob after lecture.

WPL hours with TAs

Mentorship circle signup closes soon.

Feedback from last lecture

General project requirements confusion

Class style guidelines

Warmup

Terminology

Content

Words and images

Structure

HTML

Style

CSS

Terminology

HTML: the things and their meaning

• Content: Words, images, documents, etc.
• Meaning (aka Semantics): 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 to save effort

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!

The "Cascade" of CSS

All styles "cascade" from the top of the sheet to the bottom

• When you add a second file, these 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)

The Document Object Model

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

A Powerful Tool: Chrome Developer Tools

Enable by pushing F12 or right-click a web-page and choose 'Inspect'

Does a lot of stuff, most we don't have to know about right now

Can quickly see calculated HTML and CSS styles

CSS Selectors

Used to select specific HTML elements in CSS

• Simple Selectors and Groupings
• Combinator (Hierarchy) Selectors
• Psuedo-Selectors

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

CSS Selectors: Simple selectors

NOTE: * selector by itself is bad style (except when used in combination).

Type Selector

body {
  background-color: #AED581;
}

CSS

Selects an HTML element

To apply a style to the entire body of your page, write a selector for the body (saves you from manually applying a style to each element)

Combinator (Hierarchy) Selectors

Combinators use the HTML document (DOM) hierarchy to select elements

CSS pseudo-classes

        a:link    { color: #FF0000; } /* unvisited link */
a:visited { color: #00FF00; } /* visited link */
a:hover   {  /* mouse over link */
  color: #FF00FF;
  cursor: pointer; /* can set new pointer icon, usually a "hand" */
}

CSS

Example (HTML)

There are many more, but these tend to be most common.

Using the nth-child Psuedo-class

Example (CodePen)

Multiple selectors per rule

You can use a comma to associate multiple selectors with one rule.

          p, div { color: green; } /*greenify my p's and div's */

This will match all paragraphs and all div elements in the page.

Not the same as the combinators.

Which selector wins?

Every CSS selector has a level of specificity.

Specificity determines which conflicting rule wins.

More specific rules override less specific rules.

          
  a           { color: red; }   /* not specific */
  a.some-link { color: white; } /* somewhat specific */
  a#my-link   { color: blue; }  /* very specific */
    

This is true even if the less specific rule comes later.

You don't need to know the full details on specificity calculation.

Questions so far?

CSS and Layout

Source

Layout Techniques in CSS

• Appropriate use of Block vs. Inline elements 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 is <strong>really</strong> great!
</p>

<p id="html">HTML is pretty cool too.<p>

#css { background-color: lightblue; }

#html { background-color: lightgreen; }

strong { background-color: white; }

Setting width and height (block only)

<p id="css">
CSS is <strong>really</strong> great!
</p>
<p id="html">HTML is pretty cool too.<p>

#css {
width: 80%;
height: 60px;
}

strong {
width: 120px; /* this doesn't work */
height: 50px; /* this doesn't work */
}

output

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.

<p>
CSS is <strong>really</strong> great!
</p>
<p>HTML is pretty cool too.<p>

#css {
width: 80%;
height: 60px;
}

strong {
/* We still get the inline display,
 but with width/height */
display: inline-block;
width: 120px; /* works! */
height: 50px; /* works! */
}

output

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: Inspect me!

Wait, what?

margin

(outside) space between different elements

border

(optionally visible) line that separates elements

padding

(inside) space between element content and border

More questions from this lecture?

Especially if you're watching a recording, write your question on PollEverywhere and I'll answer them at the start of next lecture.

Either on your phone or computer, go to PollEv.com/robcse