Web Design Essentials 1

Class 3

AGENDA

  • Class 2 Review
  • Code Editor Setup
  • Intro to CSS (contd)
    • Basic CSS Selectors
    • Basic CSS Properties
  • Class 4 Preview
  • Class Feedback and Q&A

Stretch - "Bio" Break

8:00p EST / 7:00p CST / 5:00p PST

Code Editors

Working with Code Editors

  • Editors have built-in functionality such as auto-completion and auto-formatting highlighting that allow developers to be more productive
  • They come with integrated tools such as a terminal, so developers can work in the same interface

Working with Code Editors

  • They are great for working with large or more complex projects
  • They can be extended with plugins/extensions that add even more functionality!
  • Their visual appearance can be customized as well with themes

Download and Install

Visual Studio Code or a code editor of your choice

Code Editor Demo

Project Folder Setup

VS Code Extensions

Intro to CSS (contd)

CSS Selector

The selector is used to select or find which elements on the HTML page will be given the styles inside the curly braces.


  selector {
    property: value;
    property: value;
  }
p {
  color: yellow;
  background-color: black;
}

The Three Common CSS Selectors

Element or Type selector

Class selector

ID selector

Element or Type Selector

Selects all elements of the same type

This example below selects all p tags or paragraph elements

p {
  color: purple;
}

Class Selector

Class selectors are prefixed with a "." dot, then followed by the class name

.product-text {
  color: purple;
}

Class Selector

On the HTML page, the class name is associated with one or more target element or content

<p class="product-text">This is some product text.</p>

<p>This is another paragraph of text.</p>

<h4 class="product-text">This is headline text.</h4>

When we want multiple elements to share a style, we give them the same class name.

Class Selector

The CSS code below selects all elements with the class of .product-text in the markup and applies the style

.product-text {
  color: purple;
}
<p class="product-text">This is some product text.</p>

<p>This is another paragraph of text.</p>

<h4 class="product-text">This is headline text.</h4>

Class Selector

Elements can have more than one class name or selector applied to them.

.product-text {
  color: purple;
}

.product-container {
  background-color: yellow;
}

<p class="product-text product-container">Some product detail.</p>

Practice

  • Identify elements on your project page that are likely to share the same style
  • Give these elements a shared class name
  • In your style.css, create a CSS rule that adds the color red to that class name

ID Selector

ID selectors are prefixed with a "#" symbol, then followed by a name

#product-name {
  background: tomato;
}

ID Selector

Unlike the class selector, the ID selector is associated with only ONE target element on the HTML page

<h2 id="product-name">First Product Title</h2>

<h2 id="needs-a-new-id">Second Product Title</h2>

IDs cannot be shared among elements

Mixing Selectors

An HTML element can have both a class name and an ID

<h2 class="product-text" id="product-name">First Product Title</h2>

Practice

  • Identify a unique element on your project page and give it an ID
  • In your style.css, create a CSS rule that adds font-size: 24px; to that ID

Working with Class & ID Selectors

Best Practices

  • Give selectors meaningful names
  • Use single word or hyphenated naming
  • Use classes more than IDs
  • Use ID selectors for:
    • Internal bookmarking
    • Elements to be targeted by JavaScript

Naming CSS Selectors

Properly naming selectors is important.

  • Keeps our code readable
  • Keeps our code maintainable
  • Reduces or prevents CSS specificity issues

Semantic vs Non-Semantic CSS

Semantic CSS

Semantic CSS naming conveys meaning.

<h2 class="product-heading">My First Start Up App</h2>

Non-Semantic CSS

Non-semantic CSS tends not to convey meaning; it usually conveys what an element might look like.

<h2 class="large-text">My First Start Up App</h2>

Non-Semantic CSS

Non-semantic CSS naming is common in CSS frameworks such as Bootstrap and Tailwind.

<div class="row mb-10 h-4">My First Start Up App</div>

Semantic or Non-Semantic CSS?

  • Good practice is to default to semantic naming
  • Understand the use cases for non-semantic CSS
    • Working with CSS frameworks
    • Creating your own CSS utilities

There are only two hard problems in Computer Science: cache invalidation and naming things.

— Phil Karlton

Semantic Naming Approaches

A few methodologies to research and explore in your web design or web development journey:

  • BEM
  • SMACSS
  • ITCSS
  • OOCSS
  • SuitCSS

Dev.to Article: CSS Naming conventions

Comments in CSS

Commenting our code also works in CSS.

/* Sample comment */
p {
  color: purple;
}

CSS Properties

CSS Properties

CSS properties allow us to apply visual design, layout and even animation to our HTML code.

CSS Properties

We can apply color, play with text appearance, add fonts, work with images, create unique layouts, and more.

CSS Properties

  • 200? 300? 500?
  • You're not expected to know them all!
  • Focus on the commonly used ones
  • Be comfortable looking things up
  • Note: CSS properties are case-sensitive

Common CSS properties (MDN)

All standard CSS properties (MDN)

Browser Support for HTML & CSS

Although the majority of HTML elements and CSS properties are standard and work across browsers, this is not always the case for a variety of reasons.

caniuse.com is a popular site/tool used to check for browser support for HTML and CSS features.

Let's Go CSS Hunting!

Practice

What CSS rules apply the following styles?

  1. Change the font size of a text element
  2. Add color to the background of an element
  3. Transform text from lower to uppercase
  4. Change text alignment from left to center
  5. Increase the weight of a font, i.e., make it bolder
  6. Change the type of font being used
  7. Create a border around an element
  8. Create an underlined text element

CSS Color Values

Browsers can accept colors in different ways:

Color name: red
Hexadecimal value: #FF0000
RGB value: rgb(255, 0, 0)
HSL value hsl(0, 100%, 50%)

CSS Color Names

W3Schools Color Picker

Size Units

  • Pixels: px
  • Root element font-size: rem
  • Element font-size: em
  • Percentage: %
  • Viewport height: vh
  • Viewport width: vw

CSS length data types (MDN)

Fonts

Web Safe Fonts are font families that all browsers can display by default. We don't have to load font files or link to external font libraries to use them in our projects.

p {
  font-family: "Times New Roman"; /* Specific font name */
  font-family: serif; /* Generic name */
  font-family: "Arial", sans-serif; /* Comma-separated list */
}

Web Safe Fonts (W3 School)

Fonts

To apply custom fonts, we either load font files into our project directory or we link to external font libraries such as Google Fonts.

Google Fonts Demo

Home Practice

  1. Revisit your page layout
    • What might you add or change?
  2. Create class names
  3. Use IDs if you're creating bookmarks
  4. Apply some basic styling to your fan page project
  5. Optional: Share your layout sketch(es) with me if you'd like feedback. Send me an email with:
    • A link to an image of your sketch
    • Your REPL project link

Class 4 - Tentative Agenda

  • CSS Box Model
    • Box-Sizing Property
    • Block vs Inline Elements
    • "CSS Reset"
  • CSS Combinators
  • CSS Pseudo Elements and Pseudo Classes
  • CSS Cascade & Specificity

Q&A

Class Feedback

https://forms.gle/MzMndG5s52a2HiB77

GDI Logo

Thank You!