︎
︎Back DMD 2
Spring 2023 ︎︎︎Purchase College, SUNY ︎︎︎ (DES2460)DMD2

Knitting Circle:
come on my selector(s)

(CSS/HTML pt.2)

Background 

For today we’ll go back a little and concentrate on selectors a key concept within CSS.

A Note on Comments

Please make sure you are continuing to use comments as you code. Just a reminder on comments
W3Schools Comments in HTML︎
W3Schools Comments in CSS︎

Why so many tags?

We understand the basics of tags. We should be using tags that are part of HTML to help appropriately designate what our content is. If we have a long essay, we should use the <p> tag to separate each paragraph.

Some Common HTML Tags

Below are some common tags for ways to organize text that you may encounter. I encourage you to explore different tags that look or seem interesting. 

Spanner(s and divs) in the works

Inevitably, you will want to organize your page in a proprietary way. You should use the <div> tag with your own ids or classes to do this. A “div” is just a section of the page that you want to separate so that you can style in a particular way.

CSS, a Birds-eye View

By default, websites have a minimal amount of styling, this is why links are blue or purple by default, or an h1 is bigger and bolder than regular text. With CSS we use what are called “selectors” to choose elements of our page, and decide how we want them to appear. We do this by creating declarations containing properties and values. CSS is processed from top to bottom, so if you have different properties/values for a given selector, the bottom most one will display.
A graphic describing selectors, properties and values from https://web.dev/learn/css/selectors/

IDs and Classes 

As you are working on your pages, you may discover you want to do something like:
One paragraph with one typeface and another paragraphic with another typeface. 
Links should look one way in a block of text and another way in a menu

That is say you may want to have more dynamic ways to style your content. One way to do this is with ids and classes. You should use ids to designate particular elements you want to style (for example a div that encompasses the whole page), and classes should be used to designate an element you want to reuse (for example a paragraph that you want to have pink text, might have a “pink” class associated with it). That being said your page will not break if you do this incorrectly. 

Here’s one way you would do the first example I mentioned in the list above: 

If you want to get more advanced you can:

Web Exercise #3 

Please create a series of HTML pages that do the following: 

  • Page 1 (index):
    One h1 heading with some welcoming message, h2 above a paragraph of text. h2 above another paragraph of text. Paragraph 1 is a color approximating “red” and paragraph 2 is a color approximating “blue.” It has a link to page 2.
  • Page 2: 
    Find a recipe online and use an ordered list to display the steps of the recipe. Link to page 3. 
  • Page 3:
    Find or create some grouping of data (everyone’s Oscar winning movies from 1923 to 1984) and use a table to display it. The borders of the table must be visible and styled by you.

All pages should: 
  • Attend to margins and padding of elements to make them styled in some way.
  • Use a font or variety of webfonts linked from somewhere like Google Fonts.
  • Have links that are styled. 

This is due for next class ︎︎︎03/02/2023

︎Back DMD 2