More CSS

Dr. Greg Bernstein

Updated February 8th, 2019

More CSS!

Readings

  1. Pseudo-classes and pseudo-elements. Go over a few of these like hover.

  2. Attribute Selectors. Just a bit.

  3. CSS values and units. Important.

  4. Styling Lists. Just a bit.

  5. Styling Links. The section on links as buttons.

Pseudo Classes & Elements

Pseudo Classes

From MDN:

A CSS pseudo-class is a keyword preceded by a colon (:) that is added on to the end of selectors to specify that you want to style the selected elements only when they are in certain state.

There are a lot of these we'll just look at a few...

User Feedback

:focus is applied when an element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse

:hover matches when the user designates an element with a pointing device, but does not necessarily activate it.

:active matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser.

Hover Example

HTML & CSS

<style>.MyHover:hover {background-color: aqua}</style>
<p class="MyHover">Here is a paragraph with a class
added to it. Hopefully something will happen when we hover
</p>

Hover Live

Here is a paragraph with a class added to it. Hopefully something will happen when we hover

Example :valid

<style>
    #MyMail {font-size: 40pt;}
    #MyMail:valid {background-color: lightgreen;}
    #MyMail:invalid {background-color: red}
</style>
<input id="MyMail" type="email">

Example :valid

Special Relations

  • :first-child, :last-child, :nth-child()

  • The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n.

Example Tiger Stripes

<style>
    #Tiger p:nth-child(2n+1) {background-color: gray;}
    #Tiger p:nth-child(2n) {background-color: lightblue;}</style>
<div id="Tiger">
    <p>One</p>
    <p>Two</p>
    <p>Three</p>
    <p>Four</p>
</div>

Example Tiger Stripes

One

Two

Three

Four

Pseudo-elements

Pseudo-elements

From MDN:

Pseudo-elements are very much like pseudo-classes, but they have differences. They are keywords — this time preceded by two colons (::) — that can be added to the end of selectors to select a certain part of an element.

Pseudo-elements

  • ::after, ::before: Great for adding special content after the fact

  • ::first-letter, ::first-line: Good for special decorations and such

  • ::selection, ::backdrop: Have not used these

::before and ::after Example

<div id="BeforeAfter">
    <style>
        span.Sly {color:#adadad;}
        span.Sly::before {content: "[[";}
        span.Sly::after {content: "]]";}</style>
<p>A paragraph <span class="Sly">yes, it is a paragraph</span>
to demonstrate
<span class="Sly">why else would it be here</span>
the use of before and after.
</p>
</div>

::before and ::after Example

A paragraph yes, it is a paragraph to demonstrate why else would it be here the use of before and after.

first-letter, first-line Example

<div>
    <style>
    #A::first-letter {font-size: 2em; font-style:bold}
    #B::first-line {font-style:italic; font-weight:bold;}
    </style>
    <p id="A">A long, long time ago...</p>
    <p id="B">In a galaxy, <br>
        far, far, away <br>
        there was code!</p>
</div>

first-letter, first-line Live

A long, long time ago...

In a galaxy,
far, far, away
there was code!

Attribute Selectors

What are they?

From MDN:

Attribute selectors will match elements based on their attributes and attribute values. Their generic syntax consists of square brackets ([]) containing an attribute name followed by an optional condition to match against the value of the attribute.

Syntax

  • [attr] : Selects all elements with the attribute attr, whatever its value.
  • [attr=val] : Selects all elements with the attribute attr equal to val.
  • [attr~=val]: Selects all elements with the attribute attr, but only if the value val is one of a space-separated list of values contained in attr's value.

Digression: data attributes

See using data attributes

Any attribute on any element whose attribute name starts with data- is a data attribute. You can make up your own!

<ol id="Choices">
    <li>p</li>
    <li data-answer="true">li</li>
    <li>section</li>
    <li>a</li>
</ol>

Substring attribute selectors

Niffty substring stuff!

  • [attr|=val] : select all elements with the attribute attr for which the value is exactly val or starts with val-
  • [attr^=val] : Selects all elements with the attribute attr for which the value starts with val.
  • [attr$=val] : Selects all elements with the attribute attr for which the value ends with val.
  • And more...

CSS Values and Units

Length and Size

Absolute Units

  • Pixels (px) are referred to as absolute units because they will always be the same size regardless of any other related settings.

  • mm, cm, in: Millimeters, centimeters, or inches.
  • pt, pc: Points (1/72 of an inch) or picas (12 points.)

Length and Size

Relative Units

  • em: 1em is the same as the font-size of the current element
  • rem: The rem (root em) works in exactly the same way as the em, except that it will always equal the size of the default base font-size
  • vw, vh: Respectively these are 1/100th of the width of the viewport, and 1/100th of the height of the viewport.

Percentange

You can also use percentage values to specify most things that can be specified by specific numeric values. This allows us to create, for example, boxes whose width will always shift to be a certain percentage of their parent container's width.

body {
    width: 70%
}

Colors

  • Keywords such as red, green there are a ton
  • Hex codes such as #e0b0ff. Your browser dev tools can help with these.
  • RGB values such as rgb(255,0,0)
  • HSL values such as hsl(0,100%,50%)

Colors with Transparency

  • RGBA codes such as rgba(255,0,0,0.5)
  • HSLA codes such as hsla(240,100%,50%,0.5)
  • via the separate opacity property

Styling Lists

List Specific Properties

  • list-style-type: Sets the type of bullets to use for the list, for example square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list.
  • list-style-position: Sets whether the bullets appear inside the list items, or outside them before the start of each item.
  • list-style-image: Allows use a custom image for the bullet, rather than a simple square or circle.

Can use other properties!

  • line-height is very usefull.
  • Box model properties such as padding, margin, etc...

Controlling List Counting

  • start: Just what you think...
  • reversed: Just what you think...
  • value: Allows you to set specific numbers to <li>s.

For Examples...

See Styling links as buttons