Classes and IDs

In order to make your HTML elements more specific, you can either group them in a class, or name it with a unique id.

Classes:

A class is a grouping of elements with the same class name. Multiple elements can belong in the same class. In the following example, the first <p> and the <div> element is in the same class named important.

<p class="important">
   Oh so important.
</p>

<p>
   Not so important
</p>

<div class="important"> 
   Also important
</div>

In order to specify a class in CSS, use a "." (period), then with no intervening space type the name of the class. You can use the class selectors alone or together with another selector.

Sample file [06_classes_and_id.html]

/* CSS selector for all members of the class "important" */
.important {
  font-weight: bold;
}


/* CSS selector for any <p> element in the group "important" */
p.important {
   color: red;
}



IDs:

An ID must be unique within the HTML page. In CSS use a # (hash sign) then with no intervening space, the name of the ID. You can combine the ID selector with another selector.

Sample file [06_classes_and_id.html]

<div id="newest">
   newest blog entry 
</div>
<div>
   blog entry from yesterday
</div>
<div>
   blog entry from 3 days ago
</div>


And in CSS:
#newest {
  font-weight: bold;
}
div#newest {
   color: red;
}



Note that you can use IDs and classes as part of a selector using comma separated list or contextual selectors.


/* both div#newest, p.important assigned backgroud color yellow */
div#newest, p.important {
  background-color: yellow;
}


/* em inside p.important assigned background color red */
p.important em {
  background-color: red;
}


/* what is this saying? */
p.important em, div#newest em {
  font-size: 20px;
}

Notes

Advanced CSS Selection

There are more sophisticated CSS selector methods


Combinator selectors describe the relationship between selectors

  • descendant (space)
  • child (>)
  • adjacent (+)
  • general sibling (~)



/* selects any and all p element inside a div element */
div p {
   font-size: 110%;
}


/* selects a p tag that is a direct children of div  */
div > p {
   font-size: 90%;
}

/* selects a p tag that is an adjacent (immediately folloing) sibling of div */
div + p {
   font-size: 80%;
}

/* selects any and all p tag that is sibling of div */
div ~ p {
   font-size: 12pt;
}






See more at w3schools



Pseudo-class allows you to narrow down the selected elements based on some state you specify (eg. Not just any anchor tag but an anchor tag that has been visited).

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: blue;
}

/* selected link */
a:active {
  color: yellow;
}




See more at w3schools


Pseudo-element allows you to select only parts of the element using some criteria

p::first-line {
  text-decoration: underline;
}

p::first-letter {
  font-size: 200%;
}

See more at w3schools
Notes

Media Specific Style Sheets

<link rel="stylesheet" href="basic.css"  type="text/css" media="all">
<link rel="stylesheet" href="screen.css"  type="text/css" media="screen">
<link rel="stylesheet" href="print.css"  type="text/css" media="print">

or if you want to embed in the style sheet

<style>
@media screen {
  p {
    color: green;
  }
}

@media print {
  p {
    color: black;
  }
}
</style>

Actually you can be a bit more specific through CSS3 Media Queries [example from w3schools]


<style>
body {
  background-color: yellow;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
</style>

Another Example: Use of CSS (and Javascript) for mobile devices using jquery mobile.

Notes

Formatting Text

The tricky thing about selecting a font is that different systems (eg. Mac or Windows) have different set of fonts. That is why you often specify multiple fonts in the order of preference like this:

Sample file [08_font.html]

body {
    font-family: Verdana, Arial, Helvetica, "Avant Garde", sans-serif;
}
h1, h2 {
     font-family: Palatino, Georgia, Times, "Times New Roman", serif;
}

If a font name has multiple words, surround them with quotes (eg. "Avant Garde").

Sans-serif and Serif:

The last entry is a generic font-family that the browser will fall back to if it cannot find any of the specified fonts.


Sans-serif:



Serif:



Other font family:

serif The quick brown fox jumps over the lazy dog
sans-serif The quick brown fox jumps over the lazy dog
cursive The quick brown fox jumps over the lazy dog
fantasy The quick brown fox jumps over the lazy dog
monospace The quick brown fox jumps over the lazy dog
Notes

Web and fonts

Usually, in order to use a certain font, it must be installed on the computer in which the browser is run.

For a list of fonts that are considered safe to use on the web (installed on the majority of systems), check the following web pages:

Alternatively, use fonts that are hosted elsewhere, for example, Google Fonts .

<link href="https://fonts.googleapis.com/css?family=EB+Garamond&display=swap" rel="stylesheet">
<span style="font-family: 'EB Garamond', serif;">A shining crescent far beneath the flying vessel.</span>
A shining crescent far beneath the flying vessel.
Notes

Font-Style/Weight

body {
    font-family: Verdana, Arial, Helvetica, "Avant Garde", sans-serif;
}

div {
     font-style: italic; 
}


p {
     font-style: normal; 
}


h1 {
     font-style: oblique
}

h1.important {
     font-weight: bolder;
}

p.mostimportant  {
     font-weight: bolder
}

p {
     font-weight: normal;
}



Notes

Font-Size


body {
  font-size: 120%;
}

li {
  font-size: .8em;
}

p {
  font-size: 12px;
}

Units of Measure:

Notes

Text-Align

body {
  text-align: right;
}

h1, h2, h3, h4, h5, h6 {
  text-align: center;
}

p {
  text-align: left;
}
Notes

Text Misc


/*
Selecting the First Letter of an Element:
[element]:first-letter
*/
p:first-letter  {
  color: Maroon;
  font-size: 1.2em;
}


body {
  line-height: 1.3; /* multipled by the elements font-size */
}


/*
font: [optional font-style: normal or italic]  [optional font-weight: normal, bold bolder, or lighter]  [font size] [optional /line_height (specified with a "slash")]  [font-famies: comma separated font names and font family name ];
*/
li { 
  font: italic bold small-caps 1.1em /1.5 "Arial Black", Arial, sans-serif;
}



CSS selector reference@W3Schools
Notes

Links

Sample file [08_font.html]

/* links that are not activated */
a:link { 
  color: navy;
}

/* links already visited */
a:visited {
  color:darkolivegreen;
}

/* links selected via the keyboard */
a:focus {
  color: firebrick;
}

/* links with mouse hovering over */
a:hover {
  color: firebrick;
}

/* links activated */
a:active {
  color: red;
}
Notes

Color names

https://www.w3schools.com/colors/colors_names.asp
Notes

Numeric specification of color

Additive color model: where you have three primary colors (red, green, and blue). If you add all three primary colors at their maximum strength, you get white. If you add no colors, you get black.


Using RGB:

     color: rgb(100%, 0%, 0%); /* red */
     color: rgb(50%, 50%, 50%); /* neutral gray. You always get neutral gray if you mix equal amounts of r,g,b) */

/* It is also common to use numbers from 0-255 to specify the amount of each color. */
     color: rgb(255, 255, 0); /* yellow */
     color: rgb(0, 255, 255); /* cyan */


Hexadecimal numbers:

Hexadecimal means you are using base 16. It uses sixteen distinct symbols, most often the symbols 0-9 to represent values zero to nine, and A,B,C,D,E,F (or alternatively a-f) to represent values ten to fifteen. When specifying colors in hexadecimal numbers, you use the form #rrggbb.

     
     color: #000000;  /* black */
     color: #FF0000; /* red */
     color: #FFFF00; /* yellow */
     color: #080808;  /* what can you say about this color? */
Notes