Week03 01 CSS basics - UX-UI-Design-Lab/DH150-UX-WebCoding GitHub Wiki

Objectives:

css basics (css selectors)
activity: changing html element styles: color, font, layout(basic)
color contrast check
discussion: freedom of expression vs. dress code

css basics (css selectors)

It is so exciting to start our styling with css. CSS refers to "Cascading Style Sheet" -- which means, it is about styling (ex. fashion style, mostly visuals) and it is a kind of (data) sheet (ex. imaging what you see in the excel sheet, google sheet - tabulated data structure).

The remaining term "cascading" is related to the internal rule how to prioritize which style-code will be applied at the end (because, as you know, in terms of fashion, many will want to comment/suggest/force a certain things and vary frequently you need to deal with which one you need to listen and follow). "Cascading" will take the rule that the last come will be served - whatever style code updates found latest/closest to the element will be applied. For example, you can add css code in several ways, 1) by external css file (and <link> to the current file in <head>>; 2) by internal css code in <style>; 3) by in-line css code directly hard-wired into the html tag like <h1 style="color:red">. In this case, in-line css code will be applied; if there is no inline style, then internal css code in <style>; then the external css code. But, the easiest way to understand cascading is, suppose that you paint the wall -- first the constructor painted in white by default (external css); and the previous owner of the house painted in red (internal); but as a current resident, you want the blue wall so painted it blue (in-line). So, blue wins and the last style of the wall is presented as blue. I will show you the example during the class demo.

Though in-line style code is powerful and directly impacts on the element, it has some limitations. It is using the style attribute of html, so the style code is only for that element. If you want to reuse that style, the best way is to copy and paste over again. If you feel that "okay, copy-paste is easy!", but if the changes over again and you need to copy-paste every time such minor changes happen through a thousand lines, it is not "easy". Especially when you cannot remember all the elements you applied a certain style and forgot to apply the changes to some elements, that process feels so inefficient at the end. In sum, for the reusability and maintenance of style, people developed how to separate styling from the html (structure). -- later it was helpful to separate the interactivity from the code. (but in the old version, you can find that all-things-are-mixed-up kind of code: ex. <h1 style="color:red" onclick= "getElementById('demo').innerHTML = Date()>

In this course, we will write "internal" css codes and organize/maintenance css codes inside <style> of the current working .html

basic internal css syntax

CSS is mostly add-on styling to "the" html element. You need to pick the html part/element to apply the style. (cf. you can add some contents to html via css code -- advanced one).

First, you need to have the html, something marked up with html tag in <body>
You will select the tag you want to change its style.
in <style>, you will set up the instructions about what you want to re-style, and how to.

I would like to start with the empty box with <div> because it is clearer to demonstrate the visual styles with.

In the code editor, I will start a new file; write a basic semantics; and save it as .html

 <html>
      <head> </head>
      <style> </style>
      <body>
      
      <script> </script>
      </body>
 </html>

Let's have a box. I will use <div>

 <html>
      <head> </head>
      <style> </style>
      <body>
           <div> </div>
      <script> </script>
      </body>
 </html>

Well, when you test the preview, you won't see anything -- guess the reason why?

Because the empty <div> is actually not a box (which is assumed to have some shape/structure) but a transparent plastic bag (or more like a shrink kitchen wrap). Without content, it doesn't have any presence. To show it, we need to make it as a structure - by assigning a size (width = 100px and height = 100px). And it is still invisible, because it is transparent. So, let's paint it, maybe in red. Now, you need to write something like, "I would like to change the background color of div as red". This time, background is a css property you can change and red is the value you want to assign to that background property. The internal css syntax will be like this.

 background: red;

But, first of all, the background of what? You need to select the element you want to change the style. This time, it is <div> -- so, you will say, select "div" and open its properties, and find "background" and change whatever it has by default with the value "red".

 div {
      background: red;
 }

and you will put this block of code in <style> like this:

 <html>
      <head> </head>
      <style> 
           div {
                background: red;
           }
      </style>
      <body>
           <div> </div>
      <script> </script>
      </body>
 </html>

But, it is not yet visible, because it doesn't have size (too small as almost nothing). Let's make it bigger. I will say 100px per width and height. You will say that, "also when you open div style properties, find width and set as 100px" like width: 100px;

 <html>
      <head> </head>
      <style> 
           div {
                background: red;
                width: 100px;
           }
      </style>
      <body>
           <div> </div>
      <script> </script>
      </body>
 </html>

Disappointingly, it is not shown yet because there is no height (so it is too thin to be visible).

  <html>
       <head> </head>
       <style> 
            div {
                 background: red;
                 width: 100px;
                 height: 100px;    
            }
       </style>
       <body>
            <div> </div>
       <script> </script>
       </body>
  </html>

Now you will see the red box when you preview the code (cmd+i).

css selector (tag, #, class)

I want more red boxes! I guess I can make as many as I want by copy and paste the divs.

  <html>
       <head> </head>
       <style> 
            div {
                 background: red;
                 width: 100px;
                 height: 100px;    
            }
       </style>
       <body>
            <div> </div>
            <div> </div>
            <div> </div>
            <div> </div>
            <div> </div>
       <script> </script>
       </body>
  </html>

It will show many boxes - stacked up. All divs are in red! It means, when I asked to select div, all the divs are selected. (awesome!)

What if I want the last box in black? There can be several solutions - if you remember the specific in-line style code example I provided when I explained cascading, you can do this way:

  <html>
       <head> </head>
       <style> 
            div {
                 background: red;
                 width: 100px;
                 height: 100px;    
            }
       </style>
       <body>
            <div> </div>
            <div> </div>
            <div> </div>
            <div> </div>
            <div style="background:black"> </div>
       <script> </script>
       </body>
  </html>

It works! But the better way to control the style of the specific element is using ID (#). You can use that id for body as you made for <a href="#">. So, let's try, I want to make the third div as pink. I will add the third div with id="pinkBox" like <div id="pinkBox> and have the special style code for it in the <style>. The question is how I can call that "pinkBox"?

If you call the "pinkBox" in <style> as pinkBox like this:

      <style>
           pinkBox {
                background: pink;
           } 
      </style>

It doesn't work. ... guess why? Because CSS understands "pinkBox" as a tag - so it will find <pinkBox> and </pinkBox> in html.

Then, how can I write that I want to select the element with the unique name/id "pinkBox"?

      <style>
           #pinkBox {
                background: pink;
           } 
      </style>

you will use # to select the element that has the id as marked after #. (#pinkBox, = select the html element with the id "pinkBox").

Reference to ID selector -- https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors

Next, what if I want to pick up multiple items and control its style at the same time? For example, I want to make all the odd numbered boxes in red; the even numbered boxes in pink. Then, you will use class.

In html element, you can assign "class" attribute with a certain name. Like for all the odd numbered divs, set the class as "odd"; for all the even numbered divs, set the class as "even".

            <div class="odd"> </div>
            <div class="even"> </div>
            <div class="odd"> </div>
            <div class="even"> </div>
            <div class="odd"> </div>

and when you call those groups of elements in <style> with . (the period) like this:

      <style>
           .odd {
                background: red;
           } 
           .even {
                background: pink;
           }

Reference to class selector -- https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

For more information on how you write the proper css selector, check here:

select all * -- https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors

select the multiples using , -- https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list

(advanced) select when the attribute value matches -- https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

basics of layout (unit)

location: top, left, right, bottom and position

I would like to put the div around in the different locations of the browser. Let's have only the pink box. Now you can expect that there must be css properties that you can change the value for the new position. Let's try x=200px and y=200px. In css, the horizontal axis is either left right, the vertical is top or bottom. The reference point is, by default, the top and left corner. Imagine you pick up the box and put the top-left point on the coordinate (200, 200).

 <style>
      #pinkBox {
           left: 200px;
           top: 200px;
           
           width: 100px;
           height: 100px;

           background-color: pink;
      }
 </style>

Does it work? If not, why?

When you locate something on the browser, it is like a map. When you say a point coordinate (x, y), you need to clearly explain where you think it is as the origin (0, 0). We haven't say that information so the browser didn't do anything yet.

CSS property position is for that purpose. https://developer.mozilla.org/en-US/docs/Web/CSS/position By default, position: static; which means, it will show the element by the order in the document and simply ignore any reposition efforts (like setting left: 200px > ignored). But if you set position: absolute; the browser understand the origin (0, 0) as top-left corner of its container (= or closest positioned ancestor, or a parent), which means in this simple demo case, <body> contains <div id="pinkBox"> so, absolute position of pinkBox will refer to its parent body's (0, 0).

 <style>
      #pinkBox {
           position: absolute;

           left: 200px;
           top: 200px;
           
           width: 100px;
           height: 100px;

           background-color: pink;
      }
 </style>

Test the code and check the changes in the location of the pink box.

relative units (% and viewport width, height like vw, vh) and responsive layout

When we talk about coordination (of the map), the most important thing to check is the unit - if we don't know that 1 means 1 meter or 1 feet, it gets really confusing to find the right position (and size). On screen, especially LCD screens, we have lots of tiny lamps - and in the old days, each lamp was considered as one unit (= pixel). Nowadays, the unit pixel (px) may not be exactly matching the physical LCDs but conceptually you may understand it is more like physical lamps. (-> so, sometimes they are not square, and that specific ratio is how the screen's physical dimension is). Therefore let's simply say px is a unit that is absolute, not changing by context (=whichever size the browser would be).

On the contrary, you can think of the size in a relative unit. Like, 50% of the width. So, you can use % when you want to say the proportion. But you need to be careful that the percentage always refers to the parent's size.

If you want to make something "responsive" - which means you want to dynamically change by referring to the current window size, for example, putting the box exactly centered in the window, you will use a viewport unit. it starts with v - then add w for width or h for height.

 <style>
      #pinkBox {
           position: absolute;

           left: 50vw;
           top: 50vh;
           
           width: 100px;
           height: 100px;

           background-color: pink;
      }
 </style>

When you check, first you may notice that the box is not exactly centered (because the left-top corner of the box is centered) - if you feel it really uncomfortable, try this code with a detailed adjustment.

 <style>
      #pinkBox {
           position: absolute;

           left: calc(50vw - 50px);
           top: calc(50vh - 50px;
           
           width: 100px;
           height: 100px;

           background-color: pink;
      }
 </style>

I pushed the box with half of its width toward the left-side, by calc(50vw - 50px) and the same to the height. What you can see here is, the top-corner of the browser (body) is (0,0) -- and when you decrease the coordinate on x, the object moves to the left. The interesting thing is about the y-axis, when you decrease, the object moves up. (increasing, going down) - which may not be familiar to you, especially if you had imagined the normal cartesian coordinate system on the browser.

here are some more information about calc() css function:

https://developer.mozilla.org/en-US/docs/Web/CSS/calc()

more of css function (some we will play with next week, like rotation and filter):

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages

Test the code and resize the window size, you can see the box is located itself centered by adjusting the window size = or responsive.

The basics of a responsive system is using the relative units. (And there will be some more next week as an advanced topic.)

space: margin and padding, understand the box model*

In css, basically you will put the content in a box - so you can apply styles.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

That box, whichever html element you use, has some specifications about the inner (padding) or outer (margin) spacing. By default, the border is transparent and 0. So, the outcome from your background-color is purely the content area. But when you make the border visible (of which code will be covered in the later weeks when we work on buttons in detail), you can see that the referencing point of the box is actually the top-left position of the outside border.

 <style>
      #pinkBox {
           position: absolute;

           left: calc(50vw - 50px);
           top: calc(50vh - 50px;
           
           width: 100px;
           height: 100px;

           background-color: pink;
           border: 10px solid red;
      }
 </style>

so, to make it centered, again, we need to subtract a bit (border thickness).

 <style>
      #pinkBox {
           position: absolute;

           left: calc(50vw - 50px - 10px);
           top: calc(50vh - 50px - 10px;
           
           width: 100px;
           height: 100px;

           background-color: pink;
           border: 10px solid red;
      }
 </style>

But, around this border, there are invisible spaces. Margin is the space around the box (outside of the border). It influences when you place the neighboring box.

For demonstration, I will go back with the multiple divs without absolute positioning - let's test with margin = 10px and make two divs.

 ....
 <style>

      div {
           background: red;
           width: 100px;
           height: 100px;
           border: 1px solid pink;
           margin: 10px;
      }
      
 </style>
 <body>

    <div> </div>
    <div> </div>
    ....

if you test the code, you can see each box is separated by some space - that is the margin. The exact size of the space between the two divs is in this case, 20px = 10px(from the margin-bottom of the first box) + 10px(from the margin-top of the second-box). This margin will help you to divide the space between the contents by adding some space.

Next, the other type of space is inside of the box (inward from the border to the content). It is like a bubble wrap area when you got the package from Amazon. Let's test with a text - I will put Hs and Ts to see how the font hits the top and left. If you see the left, T or H meets the exact the starting point of the box. It means, there is no padding assigned (by default).

When you apply padding, you can see the text is spaced from the border.

 ....
 <style>

      div {
           ...
           padding: 10px;
      }
      
 </style>
 <body>

    <div> THTHTHTH </div>
    <div> </div>
    ....

Understanding padding is very helpful to make the text block look comfortable.

https://developer.mozilla.org/en-US/docs/Web/CSS/padding

basics of colors

how to use colors in codes

As we used in case of background-color, you can call the color by its name (or color keywords). An interesting fact is only 16 colors were in the old version HTML1, and there was no Orange! But now, we can pick more than 100+ colors by the name (keyword).

https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#color_keywords

We can also use the old color code like hexadecimals (#FFFFFF) or by rgb() (red-green-blue light combination). I should say, however, it is not best intuitive for human (who knows #ef0658 is for which color???). First, we are not familiar with the additive color system (mixing lights, so if you turn all three Red, Green, Blue lamps on, it turns white.

To make this explanation long, which you may skip, all on means 11111111 (8 bits); it will make the number 15 which is F in hexadecimal, but you will use two bits (8 + 8 bits = 16) for 32bits color system, therefore FF, for turn on the Red. Next FF means turn on all Green, then the last two FF means turn on all Blue. It is hexadecimal (so with the special character # to say it is not the normal number but you may have a, b, c, d, f for 10, 11, 12, 13, 14, 15) and #FFFFFF is, therefore, WHITE. In the same way, of you turn off all, 00, #000000 means BLACK.

And when you write this FF in our decimal number, it is 255. So, a bit kindly you can use color with the rgb() function, rgb(255, 255, 255) means WHITE, rgb(0, 0, 0) means BLACK.

So, #FF0000 is turning on only Red lights, which can be said as rgb(255, 0, 0). So to be RED. #00FF00 is turning on only Green lights, which can be said as rgb(0, 255, 0). So to be GREEN. #0000FF is turning on only BLUE lights, which can be said as rgb(0, 0, 255). So to be BLUE.

But, it is not clear how much you mix to make a certain color, let's say orange. What would be RGB for Orange? There is no yellow, as you may simply think, orange = red + yellow, so it is not intuitively convertible to the RGB code.

To improve this situation, many other color codes have been developed. Particularly, web-developers use hue-saturation-lightness model. In this model, you can understand the color as hue (https://www.w3schools.com/colors/colors_wheels.asp). We can make a variation on saturation (how intensively you want to show that hue, ex. 100% highly-saturated red like cardinal vs. 20% less saturated red like murky-cement red) and make it like pink by adjusting brightness (= lightness, luminosity interchangeable in this context).

https://www.w3schools.com/colors/colors_hsl.asp

https://en.wikipedia.org/wiki/HSL_and_HSV

To use hsl(), you just need to remember the color wheel,

HUE: starting from red(hue=0), moving to green (hue=120, one third of 360deg circle), then to blue (hue=240, the second third of 360deg).
Saturation: 100% is the pure intensity of that HUE, 0% means gray.
Lightness: 50% is the original, higher than 50% will turn to pale (pastel tone), lower will make it dark to black.

background-color: hsl(60, 100%, 50%);

alpha (transparency - opacity)

The other factor that influences the perception of color is transparency - how much you want to mix up with the colors from the underneath. you can make the element transparent using css opacity property (0 is for transparent, 1 is for opaque):

 opacity: 0;

Also, you can use "transparent" as a color name

 background-color: transparent;

which, by the way, is not very efficient because by default, the element background is transparent. (the white or gray background comes from the browser window).

You can add "a" to hsl or rgb, like hsla(0, 100%, 50%, 0.05) for semi-transparent pale pink or rgba(255, 0, 0, 0.5).

 background-color: hsla(0, 100%, 50%, 0.05);

By adjusting alpha, you can make the color blended into the background.

basics of font + icon

font colors

By default, the html will show black for the text. If you want to change the font color, use <color> (because in the beginning of html, text/font are the only thing you can change the color.

  h1 {
       color: darkgray;
  }

  p {
       color: hsl(240, 50%, 20%);
  }

For hypertext, use a as the selector.

 a {
       color: hsla(330, 75%, 75%, 0.9);
   }

We will work more on link status next time. https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links

text-decoration (underline)

if you don't like the underline of the hyperlink, you can remove it by text-decoration: none;

 a {
      text-decoration: none;
 }

and do more like adding a wavy line or an overline.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

font family

If you want to have a different font family, find what you link here: https://fonts.google.com/

Supposed that I want to use this font: https://fonts.google.com/specimen/Yanone+Kaffeesatz
select the styles (ex. semi-bold 600, 700)
open "view your selected families" icon (on the right top, an icon with three squares)
copy the code in the first gray box (link) and paste it inside <head>

copy the code in the second gray box (font-family: ...) and paste it inside of your css selector code { ... }

 <head> 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@600;700&display=swap" rel="stylesheet">
  </head>

  <style>
     a {
      font-family: 'Yanone Kaffeesatz', sans-serif;
      text-decoration: none;
      color: hsla(330, 75%, 75%, 0.9);
     }

   </style>

   <body>
       <a href="https://getty.edu" target="_blank"> Getty </a>

.....

font family

You can change the font-size as well.

      font-size: 16px;

when you see em in size, it means the current browser's default font size would be considered as a unit (1em). Most likely your browser has the default font size as 16px, and it would be considered as 1em. That means, if you want to make the font-size twice bigger than the default font-size, you can use font-size: 2em;

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

(extra) icon fonts

You can find some useful icons here: https://fonts.google.com/icons

Especially for the social icon, this site would be helpful: https://fontawesome.com/v5.15/icons?d=gallery&p=2&q=Social (I will demonstrate the way to replace the social icons, in a bit simpler way)

If you are curious what other css properties you can control, check : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference

activity: change html element styles: color, font/typography, layout(basic)

Now, you are ready to change the style of the contents.

I want you to try to change the visual styles of your assignment02. Starting with the rough layout (but you may need to set up the background color with a non-transparent color - so you can see the changes). Here are some of what you may want to try.

Layout (overall)

Have a different background colors in header and footer from the main
Have a different (subtle) changes in background colors in sections/ articles
Have more or less top/bottom margins between the header - main - footer
Have more or less paddings for header, footer, and/or main contents

Typography

Have a different font-family style for heading (h1, h2, ...) vs. plain text (p)
Change the font-size bigger or smaller (or responsive by using a relative unit)
Change the hypertext with different style, different color/background-color, without decoration (underline)
Change the text alignment (left, right, justified)

Colors

Have different font colors in hue, saturation, lightness
Change the opacity of the color (transparent) and see how the overlapped elements in mixed colors
(advanced) Apply a gradual change in colors (=gradient), which may be great only if you use it properly.

Try and share the work (url) of what you made on CCLE forum.

assignment03: color contrast check

You may realize that many visual styles are not actually contributing to a better web-accessibility. But one of a few things that influence a perceivable interface and accessibility is related to color "contrast". Here the importance is on the "contrast" not the color. that means, it doesn't matter if you use red or blue but how to use two colors sufficiently contrasted from each other, mostly in brightness (ex. big (lightness) contrast means one is close to white and the other is close to black). Therefore, whatever color you pick as stand-out (foreground color or focus), you will choose the background color that will make that foreground color more visible and distinguished. The basic tactic is to make the background less attentive, less saturated (= having less pigment).

Based on the design you made in activity, I want you to generate several color variations.

Make a website in dark mode. Which means, your background should be darker (lower in lightness) than your foreground objects like texts. (don't worry too much if you have the images that might have a bright background in it and creates funny looking - we will handle it later).
Make an achromatic (grayscale) or monochromatic version for the extreme color blind situation.
Make a light mode without using a pure white (#FFFFFF) as background.

I want you to test the color-contrast of the original trial (= activity version) and report if it passed WCAG2.1 AA level (4.5:1 for text, 3:1 for large text and icons). You don't need to revise the original design.

Then, as you develop the variations, I want you to check and revise your color-design-variations. You need to report the final version of the dark mode, mono/a-chromatic, and light mode with the evidence that they arae compliant with the WCAG2.1 color contrast requirement.

how to check color-contrast

When you have two colors (bg vs. fg), you can use one of those (and there are so many checkers):

https://webaim.org/resources/contrastchecker/

https://coolors.co/contrast-checker/112a46-acc8e5

https://colourcontrast.cc/

https://contrast-ratio.com/

If you generate color scheme/ palette by simulating/testing the accessibility:

https://color.adobe.com/create/color-accessibility

https://material.io/resources/color/#!/?view.left=0&view.right=0

And also, you can upload your work and publish it to check accessibility and see if there were any warning/errors on color-contrast.

discussion: freedom of expression vs. dress code

Let's share thoughts about "freedom of visual expression" -- if CSS is a fashion statement of the website, can we say that it is a matter of taste so nobody can critique how the website would look like? (why not the rainbow background and star-dust cursor animation?) Or do you think in a certain situation, there should be some levels of regulation (like a dress code in business) that keeps the websites too extreme in terms of visual style?

These videos are helpful (10 years old but still worth watching, if you haven't)

The Art of Web Design | Off Book | PBS Digital Studios: The experts in this video explain very well about the interrelationship/ functions of html, css, and js.

Is CSS and Website Design a Fashion Statement? | Idea Channel | PBS Digital Studios: This video explains well about micro-effect of css as well as macro-effect in design/art.

Week03 01 CSS basics - UX-UI-Design-Lab/DH150-UX-WebCoding GitHub Wiki

css basics (css selectors)

basic internal css syntax

css selector (tag, #, class)

basics of layout (unit)

location: top, left, right, bottom and position

relative units (% and viewport width, height like vw, vh) and responsive layout

space: margin and padding, understand the box model*

basics of colors

how to use colors in codes

alpha (transparency - opacity)

basics of font + icon

font colors

text-decoration (underline)

font family

font family

(extra) icon fonts

activity: change html element styles: color, font/typography, layout(basic)

assignment03: color contrast check

how to check color-contrast

discussion: freedom of expression vs. dress code

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️