CSS Properties - Color, Font-family, Size Units and Position

slides

See the Pen 5.5 CSS Properties - Color, Font-family, Size Units and Position by LSU DDEM (@lsuddem) on CodePen.

CSS Properties

  • In this lesson, we will learn various CSS properties, in order to gain a basic understanding of how to style a webpage.

  • There are many very useful CSS properties, and we will not have time to look at all of them, but there are some great explanations available here: https://www.w3schools.com/cssref/

Color

  • We have learned that there are many colors that you can write out, for example blue, darkblue, magenta etc.

  • We can get any color we want by using Hex color codes. These are 6 digit codes that begin with a # sign.

  • Here is a link to a color picker, where you can choose any shade that you want:

https://htmlcolorcodes.com/

  • At the top of the page, you will see HEX, RGB, and HSL. These are all methods that we can use to specify colors, but we will use hex codes. Once you pick a color that you like, you can simply copy the hex code at the top, and paste it into CSS, for example:

See the Pen 5.5 Example by LSU DDEM (@lsuddem) on CodePen.

  • Notice that like with color names, we do not put quotes around our hex code.

  • Practice

See the Pen 5.5 Practice by LSU DDEM (@lsuddem) on CodePen.

Changing color in JavaScript with Hex Codes

  • In JavaScript, you can change the color of something using hex color codes, using the document object. The pen below shows an example of this:

See the Pen 5.5 Example_1 by LSU DDEM (@lsuddem) on CodePen.

  • Practice

See the Pen 5.5 Practice_1 by LSU DDEM (@lsuddem) on CodePen.

Font Family

  • We will look at a couple of different ways to change the font of our text.

  • The font-family property is responsible for changing our text in CSS.

  • Some fonts are already programmed into CSS. Learn more here: https://www.w3schools.com/css/css_font.asp

  • The basic types of fonts are:

  1. Serif: serif fonts have a small stroke at the edges of each letter.
  2. Sans-serif: sans serif fonts have clean lines (no small strokes attached).
  3. Monospace fonts - here all the letters have the same fixed width.
  4. Cursive fonts: they imitate human handwriting.
  5. Fantasy fonts: decorative/playful fonts.

  • When we speficy a font using the font-family property, we should specify the name of the font, a backup font from the same family, and then the family itself. We do this because not all browsers display fonts the same way. By giving the font-family property options, it will ensure that the font is as close to what you want as possible.

  • Look at the w3schools link for some font names: https://www.w3schools.com/css/css_font.asp

  • Example:

  • The following code will change the font of our pargraph to a monospace font, Courier New. The backup font will be a very similar monospace font, Courier. Finally, the font family, monospace, will be added.

#para {
  font-family: "Courier New", Courier, monospace
}

  • If the browser doesn’t recognize the first font (the preferred one) it will default to the second, then third.

  • Example in Codepen:

See the Pen 5.5 Example_2 by LSU DDEM (@lsuddem) on CodePen.

  • Practice

See the Pen 5.5 Practice_2 by LSU DDEM (@lsuddem) on CodePen.

Google Fonts

  • Another way to specify font is to get a font from google fonts, and load it into the HTML of your webpage.

  • First, go to the google fonts website, to find a font that you like: https://fonts.google.com/

  • Choose a font, and click on it. You will see a button on the example of the font that says “select this style”. Click on that, and information about the font will appear in the right-hand panel.

  • In the panel, you will see a section that says “Use on the web.” Here, you can choose either or @import. Choose the @import option.

  • Select everything in the