CSS Intro

Sept 1, 2022

Cascading Style Sheets (CSS)

Cascading Style Sheets - a stylesheet language that allows us to specify rules that affect the look and feel of HTML documents

Styling options include width, height, borders, colors, typefaces, font size, positioning, etc

CSS rules are associated with elements.

There are two parts to a CSS rule:

p { font-family: Arial; }
  • selector - indicates which elements to apply the rule to (comma delimited)
  • declaration - the rules used to style the element in the selector (semi-colon delimited); the declarations go inside curly braces

Each rule in the declaration is broken into two parts, separated by a colon:

h1, h2, h3 { font-family: Arial;
             color: yellow; }
  • property - the aspect of the element being changed
  • value - the setting for the chosen property

External CSS

the CSS is separated into its own file and linked into the document via a element in the

section

<link href=“style.css” type=“text/css” rel=“stylesheet”>

Internal CSS

the CSS is included in a style section on the HTML page

<style type=“text/css”>
    body {
        background-color: black;
        color: white; }
</style>

CSS Selectors

There are many ways to represent a selector

Universal selector

* {}

targets all elements on a page

Type selector

h1, h2, h3 {}

targets the specified elements

Class selector

.item {}

targets all elements which have the specified class value

Id Selector

#firstName {}

targets the element with specified id value

Child selector

li>a {}

targets the right side element (a) if they are children of the left side element (li)

Descendent selector

p a {}

targets any <a> element that sit inside <p> even if it is multiple levels deep

Rule Priority

There is a priority system in place to determine which rule applies to an element:

  • User-defined - users can define CSS rules
  • In-line - the non-HTML5 way of using the style attribute on an individual element
  • Importance - Adding !important after a property value
  • Selector specificity - type < class < id
  • Rule order - identical rules will prefer the last rule declared
  • Browser default - the browser’s default styling has the lowest priority

CSS Inheritance

Some CSS properties propagate from parent elements to child elements (mostly color/font styles and not block styles)

We can also force inheritance for non-inheriting properties by using the inherit property value:

.page {
  border: 1px solid gray;
  padding: inherit;
}

CSS Comments

CSS can be commented with the following comment style:

/* header 1 color style */
h1 {
 color: red;
}

CSS Colors

Colors can be specified in CSS in a number of ways:

RGB Values

colors are expressed in how much red, green, and blue are in it

color: rgb(100,100,100);

Hex Codes

six digit code that represents how much red, green, and blue are in the color; preceded by a hash sign

color: #008B8B;

Predefined Color Names

a set of color names that browsers recognize

color: DarkGreen

HSLA (CSS3 only)

specifies the hue, saturation, lightness, and alpha transparency

color: hsla(o, 100%, 100%, 0.5);

CSS treats each HTML element as if it were in a box, whether, it is an inline element or a block-level element

Color properties:

  • color - specifies the color of the text
  • background-color - specifies the background color of the box of the HTML element

CSS Text

Text Properties

  • font-family - specifies the typeface as comma delimited list
  • font-size - specifies the size of the text
  • pixels - exact number of pixels (font-size: 16px)
  • percentages - percent of current browser’s text size (font-size: 75%;
  • ems - and em is equivalent to the width of the letter “m” (font-size 2em;)

  • font-weight - allows text to be bolded
    • font-weight: normal
    • font-weight: bold
  • font-style - italics/oblique
    • font-style: normal
    • font-style: italic
    • font-style: oblique

  • text-decoration - adds lining to text
    • text-decoration: underline
    • text-decoration: overline
    • text-decoration: line-through
  • text-align - controls the alignment of the text
    • text-align: left
    • text-align: right
    • text-align: center
    • text-align: justify