← Return to chapter

Three Ways of Style

• inline - style within the tag using the style attribute.
  <span style="color:red"> This Text is RED! </span>
• embedded - style defined in style block within file
  <style>
  label {
  color:blue;
  font-size:larger;
  }
  </style>
  <label> This text should be blue and large </label>
• external - an external file that provides styles for document.
  <link href="styles/cssBasics.css" rel="stylesheet">

Best idea is to keep bulk of style in external style sheet and only use internal formats for special cases

Blocks, Spans, and Selectors

Different CSS elements have different properties. You have block elements (with <p> being a special case of a block elements) and inline elements. Blocks take up entire areas of the block they are in while inline elements cover just the area of content they represent. You can use div tags to have a generic block and span tags to have a generic inline block.

The format of a style is:
selector {
   attribute: value;
}

The selector is the element that you wish to apply the styling to. You can have more than one selector by having space between them. * is used to select all elements and shouldn't be used unless resetting things. You can create a class to apply a set of styles to any tag with that class as follows:
.red {
   color: red;
}
To use this class in the html file you would simply use:
<b class="red">Bold red text!</b> You could even apply to text in the middle of a paragraph using <span class="red">red text here!</span>

Some selectors can have multiple states such as anchors. Different states are distinguished using colon, so a:link, a:visited, a:hover, a:active.

Values are the property specific values for that property. Sizes are common, with a variety of size units supported:

• px - pixels the dots that make up your display
• pt - point, typesetting standard, 1/72 of an inch
• % - percentage of the block item is in
• rem - Root Element M, relative to how wide an M is on the root element
• em - Elements M, relative to width of M on current element
• cm - metric centimeter (10 millimeters)
• mm - metric millimeter
• in - imperial Inch

note that pt, cm, mm, inch are based on display settings, so may not be accurate, and some devices treat pixels as 1/96 inch but some devices will use multiple pixels to represent a pixel unit.

Colors

Colors can use named values, with https://www.w3.org/wiki/CSS/Properties/color/keywords being a good source for color names. This is only a small subset of colors, you can have the full spectrum of colors by using RGB(r g b) with ranges being between 0 (none) and 255 (full) for each of Red, Green, and Blue. Alpha (transparency) components can be added to the color using rgb(r g b / a) though the a parameter is between 0 and 1. You can use hex codes to access any of the 16 million available colors using #RRGGBB with hexadecimal numbers being used for the red, green, and blue components. A shorthand format #RGB can be used, in which case the hex value is the digit used twice, so 1 would be 11 and b would be bb.

The parameters used for controlling the color of a block are:

• color: the color of the text being displayed
• background: the color of the text being displayed
• border-color: the color of the border around the block (see box model)

Fonts

The font attribute is shorthand for the individual properties, with skipped attributes using the existing value.
font: style variant weight size line-height family

• font-style is how italic a font is, with options being none (whatever it was), normal, italic or oblique.
  
• font-variant is how text is displayed: none, normal, or small-caps
  
• font-weight is a number indicating how bold a number is, with 400 being normal, 700 bold, 900 extra bold, 100 thin, etc.
• font-size required font size, with units (example 24pt)
• line-height how big the gap between lines is in lines.
• font-family list of fonts, with first on list that is also on users system used. All browsers support:
• serif - The quick brown fox jumps over the lazy dog.
• sans-serif - 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.
• cursive - The quick brown fox jumps over the lazy dog.

Another useful shortcut is text-decoration:
text-decoration line style color thickness

• text-decoration-line: none, underline overline line-through blink (depreciated)
• text-decoration-style: style of line : solid, double, dotted, wavy, none
• text-decoration-color: The color of the line
• text-decoration-thickness: The thickness of the line

You can also control the spacing between words and lines using the following properties:

• line-height: spacing between lines. Can be number (1.5 for half line) or in units
• letter-spacing: adjusts space between characters
• word-spacing: gap between words
• text-align: controls how text aligned using left, center, right, justify
• text-transform:Changes the text to desired format: none, uppercase, lowercase, capitalize

Box Model

margin is gap between elements attribute combines 4:
margin: sides
margin: top/bottom left/right
margin: top left/right bottom
margin: top right bottom left
with margin-top, margin-right, margin-left, and margin-bottom being available. Using auto for the margin will have it set margins to empty space, effectively centering if width specified.

Padding distance between border and contents. Same as margin but using padding.

Borders are a bit more complicated. If all sides same can use: border: width style color

• border-width border-top-width, border-right-width, border-bottom-width border-left-width
• border-style border-top-style, border-right-style, border-bottom-style border-left-style
  (styles: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset)
• border-color border-top-color, border-right-color, border-bottom-color border-left-color

Borders can be rounded by using border-radius top right bottom left

Styling links

Different states are distinguished using colon, so a:link, a:visited, a:hover, a:active.

• a:link An unvisited link
• a:visited A link whose page is in your history
• a:hover A link that has the mouse over top of it
• a:active A link that is actively being clicked or touched

By taking advantage of the box model and link types, can style a link to act like a button. To top

List styles

Lists can be styled using the list-style shorthand: list-style image position type

• list-style-image: an image to display for the bullet with none being the marker type specified, url("image") use to specify an image
• list-style-position: where the bullet will be displayed for multi-line list items. Choices are inside or outside
• list-style-type: controls the marker
  unordered types are none, disc, circle, square, or string (ie "&#x1f44d;"
  ordered types include decimal, decimal-leading-zero, lower-roman, upper-roman, upper-alpha, lower-alpha (and other languages)

:nth-child() can be used to change style of every nth row expressed using algebraic notation.
:nth-child(odd) is shorthand for :nth-child(2n+1)
:nth-child(even) is shorthand for :nth-child(2n)
Here we are setting odd children of the ul class "oddDemo" to blue with square markers using the style:
.oddDemo li:nth-child(odd) {
  color:darkblue;
  list-style-type: square;
}

• one
• two
• three
• four

Table styles

To have a grid in table, need to use borders with common way of doing this being:
table, td, th {
  border: 1px solid;
}
border-collapse: collapsed can be used to collapse element borders into a single border to make table more table like.

As with lists, can control nth elements by applying this to <tr> for rows. Columns can be nthed by applying nth-child to <td& and <th& elements.
tr:nth-child(2n) {
  background-color: lightblue;
}
td:nth-child(3n), th:nth-child(3n) {
  background: lightgreen;
}

first col	second col	third col	fourth col
R2C1	R2C2	R2C3	R2C4
R3C1	R3C2	R3C3	R3C4
R4C1	R4C2	R4C3	R4C4

There is a lot more to CSS, with page arrangement and animation being separate cheat sheets.