Research, Udacity Class

Udacity Classes 3: Intro to HTML and CSS (Part 2 of 2, CSS)

Last time I went through the HTML content of Udacity‘s Intro to HTML and CSS class, this time I’m moving on to CSS! WOO!

I really destroyed that last section of the class! Now time to take on my next competitor: CSS

CSS controls things like colors, spacing, fonts, and layouts for a website. It gives the developer the ability to change elements on the page, and separates the text, images, and content from how we want the page to look.

CSS is applied ONLY to the furthest right sample webpage

All CSS is composed of two elements: a selector (the specific element you want to style) and a declaration block (the code you want to apply to the selector). For example, the following CSS code will select all the “p” tags (<p> on the page) and declares that the color property will be changed to blue.

<!-- example of CSS, which is put inside the <style> tag -->
<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>

The next useful part of this lesson specified how to comment out CSS. HTML uses <!– HTML comment here –>, but CSS uses /* CSS comment here */. A very important distinction, and useful information to know!

Exactly, David, sometimes the code WILL work, but only if we remember to comment it correctly!

Since selectors apply to every instance, we can utilize the class attribute to only select certain instances of a tag. Not only will the class attribute help us explain the purpose of the content, but it will also help us specify properties for only that type of content.

The ID explains the purpose of HTML code, and the specific ID can ONLY be used once on the webpage and only one ID can be used in an HTML element. The class attribute will not only describe the section, but you can also add multiple class attributes to the same HTML element! For this reason, most web developers prefer the class attribute over id attribute.

Git outta here ID, nobody liked you none anyway!

The example below shows both an id attribute AND the class attribute to apply CSS to a section. Each requires a slightly different method in the <style> section of the HTML code than the standard elements. It is also important to note, in place of spaces use hyphens (-) to join together multiple words. For id attributes, this will register as an error because only one id can be applied to an HTML element. In class attributes, this will signal the use of multiple different classes to apply to the element.

<!-- Example of using an ID  -->
<title id="website-title">My Book Website</title>

<!-- Example of specifying the CSS to apply to the class id attributes -->
<style>
  #website-title {
      color: red;
  .book-title {
      color: green;
     {
  .book-description {
      color: blue;
     {
</style>
<!-- Examples of using one "class" CSS attribute -->
<h1 class="book-title">Book Title Here</h1>

<!-- Examples of using multiple "class" CSS attributes -->
<p class="book-description another-class">Book description here</p>

Now time for a little quiz…

WOO!

Up to here, we’ve made very simple CSS property changes and attributes, but there are actually A TON! In order to explore more and the properties each alters, there is a great resource called the CSS Reference from Mozilla Developer resource site. But honestly, using Google to identify specific CSS elements is easier than searching through multiple attributes and reviewing their individual properties.

The next section of the course discusses the Developer Tools in Google Chrome, by right-clicking on a webpage and selecting “Inspect”. There are multiple tabs, but the one focused on here is the “Elements” tab, as it shows the HTML for the page currently being viewed. By clicking on an HTML element, the styles applied to it are showed in the bottom window. By unchecking the CSS code attributes, the webpage itself will transform to show what the page would look like without that attribute applied!!!

OMG right, Ted???

Since every browser has its own set of Developer Tools, Udacity went ahead and created guides for each one because they are AWESOME!

  • Google Chrome
    • Use the DevTools to iterate, debug and profile your site
    • Use any of the following options to open
      • right-click on any page element and select Inspect
      • open the Chrome settings and select More Tools > Developer Tools
      • Command + Option + i (Mac)
      • Ctrl + Shift + i (Windows/Linux)
  • Mozilla Firefox
    • use the developer tools to examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile
    • there is also a desktop version called Firefox Developer Edition that contains the latest Firefox features and experimental developer tools
    • open the tools by any of the following methods
      • right-click on any page element and select Inspect Element
      • open the Firefox settings and select Developer
      • Command + Option + i (Mac)
      • Ctrl + Shift + i (Windows/Linux)
  • Internet Explorer
    • you can access F12 developer tools by simply pressing F12
  • Microsoft Edge
    • you can access F12 developer tools by simply pressing F12
  • Safari
    • Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize a website for peak performance and compatibility on both platforms
    • To access Safari’s Web Development Tools, enable the Develop menu in Safari’s Advanced preferences.
    • Once enabled, you can right-click on any page element and select Inspect Element or use the shortcut Command + Option + i
  • Opera
    • Opera comes pre-packed with a fully-featured suite of developer tools. Named Opera Dragonfly
    • To open use any of the following methods
      • right-click on any page element and select Inspect Element
      • Command + Option + i (Mac)
      • Ctrl + Shift + i (Windows/Linux)

In the first part of the class, we learned that using Google Chrome or Mozilla Firefox is a good idea because not only are they robust, but they are also not OS-specific.

Very true, Patrick. If you’re new to my blog, I bet you can see a pattern here with my gifs. Also go watch Schitts Creek.

This next section explained a bit about how units work in CSS. For example width, height, and padding all expect a number relating to an element’s length. The unit of measure is similar to meters, miles, and centimeters, but in this case, it is in pixels or percentages.

These units are further broken own into absolute (fixed) or relative (comparison to another linked property) references. A fixed length would be a road being 7 meters wide, and a relative method would be describing it as 2 car-widths across. The meter is fixed, but the average width of a car may change over time.

Reminds me of Excel absolute (position of a cell is constant and unchanging) and relative references (position of a cell is in relation to the current selected cell)
/* absolute unit example */
.sidebar {
  width: 400px;
}

/* relative unit example */
.sidebar {
  width: 
}
Absolute and Relative unit examples
  • px is the most common absolute reference (mm, cm, in are also available but rarely, if ever, used)
    • px: the quantity of length equal to the pixel in an unscaled HTML <img> or CSS ‘background-image’.
  • % are the most common relative reference but there is also em, viewport width (vw) and height (vh) that are used for Responsive Design
    • %: a percentage which is always relative to another value.
    • em: An em is a CSS unit that measures the size of a font, from the top of a font’s cap height to. the bottom of its lowest descender. Originally, the em was equal to the width of the capital. letter M, which is where its name originated
    • viewport: The CSS viewport refers to the part of the website, which is visible in the browser window. … Mobile phones and other devices with smaller screens display pages in a virtual window or viewport. The main issue is that narrower screens make the virtual viewport shrink to display all areas of a web page.
    • There are four viewport based units in CSS. These are vh , vw , vmin and vmax . Viewport Height (vh) — This unit is based on the height of the viewport. … A value of 1vw is equal to 1% of the viewport width. Viewport Minimum (vmin) — This unit is based on the smaller dimension of the viewport
    • vh:
  • For a full list of units, see these references:
That’s a LOT of info, right Jocelyn? (Are you watching Schitts Creek yet? Seriously, take the Udacity course and then binge watch this series as a reward)

The next part of the lesson describes how to apply specific colors using RGB, Hexadecimal, HSL (hue, saturation, lightess), or CMYK (Cyan, Magenta, Yellow, blacK). This is something I’m not unfamiliar with, both from classes and tinkering with web pages in the past. The easiest way to find the right codes is to the use web browser’s built in color picker found it is Development Tools. Another option is to use an online code generator such as the HTML Color Codes site. In either method, you simply select a color & hue and it will return the code for RGB, Hexadecimal, HSL, and CMYK. For a list of “web-safe” fonts, follow this link.

/* RGB (0-255 RGB), Hexadecimal (00-FF RGB), HSL (0-360, 0-100% HSL), CMYK (0-100%) for magenta colors */
body {
  background-color: rgb(255,0,255);
  background-color:#ff00ff;
  background-color: hsl(300,100,50)
  background-color: cmyk(0,100,0,0);
}

And finally we are on the CSS problem set!!! WOO!

After you’re done with Schitts Creek, watch Archer!
/* Adding border, border-radius, changing cursor, and adding a shadow box to a picture of a kitten */
.kitten-image {
  border: 5px dashed salmon;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 5px 5px 20px #ccc;
}

In the next quiz, we needed to use “font families”, where we specify fonts in order from left to right for a browser to use. If it doesn’t have the font specified, it moves on to the next font in the list until one of them works. We can also specify custom fonts, but it would still be important to set others as backups in case the custom font fails to load.

/* udacity in uppercase in purple color with correct font and font size */
.udacity-text {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 60px;
  text-transform: uppercase;
  text-decoration: underline;
  color: #8001ff;
}

In one of the sections, we learned a new and VALUABLE technique: how to link to a style sheet instead of typing the same CSS for each site page in the <style> section. I was just telling my wife earlier how useful this technique is, and how excited I was to learn it! To do this, I just need to add the reference to the path and name of style sheet in the <head> element of the HTML page.

<head>
  <title>My Page</title>
<!-- path and filename to style sheet -->
  <link href="path-to-stylesheet/stylesheet.css" rel="stylesheet">
</head>

And after that section I’VE COMPLETED THE COURSE!!! YAAAASSS!!!!

Now that I’ve learned about the fundamentals of HTML and CSS, I’m a lot more comfortable using the DevTools on Chrome or Mozilla to start making my own websites! Seriously, this course was insanely helpful to fill in the gaps of my past experience, and I am very grateful that I’ll have these blog posts to come back and freshen up on my notes!

Alright, I’m OUT!

Leave a Reply