CSS #2

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.

/* 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>

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

/* 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;
}

• Combinator selectors
• Psuedo-class selectors
• Psuedo-elements selectors
• Attribute selectors

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

/* 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;
}

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

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

<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.

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").

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:

• Safe web fonts
  

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>

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;
}

body {
  font-size: 120%;
}

li {
  font-size: .8em;
}

p {
  font-size: 12px;
}

Units of Measure:

• em: relative: to the font-size of the current font. 2em means 2 times the size of the current font.
• px: absolute: pixels
• in: absolute: inches
• cm: absolute: centimeters
• pt: absolute: points (1pt = 1/72nd of 1inch)

body {
  text-align: right;
}

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

p {
  text-align: left;
}

/*
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;
}

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;
}

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? */