Experiment 1: External, Internal, and Inline Styles

External Stylesheets

This is from an external stylesheet saved with a .css extension. You link this in the head section of your HTML document in the link tag, usually below the title tag. Be sure to add the rel attribute with the value of stylesheet, and href attribute with the value of the file's location. This will save on download speeds since it only needs to be downloaded one time.

Imported Stylesheets

An extended functionality of the external stylesheet is importing more stylesheets. These can be added in the head section under the HTML style tag with the @import 'css/importedstylesheet.css' syntax. But better practice is putting them actually within the CSS stylesheet itself. The drawback to this approach is that each @import statement is a new request to the server.

Internal Styles

This is an example of internal styles, where a script tag is embedded in the head section of this HTML document. This may good for a landing page, or a single-paged website. However, this is a poor choice for sites with multiple pages because these styles will have to be redownloaded each time the page loads.

Inline Styling

This paragraph is styled inline. They're at the lowest level, and therefore will override everything else. Thare not considered good practice because they make maintainance difficult and impractical. Howver, they are good for temporary changes and mockups.

Experiment 2: General Selectors

The Universal Selector

This is with the asterisk (*) character, and it targets ALL elements on a page. The following will reset any user agent styles from your browser on all elements.

WARNING - The Universal Selector bypasses any other selector and deems inheritance functionless.

* {
    padding: 0;
    margin: 0;
}

Type Selector / Element Selector

Any HTML or HTML5 tag is a selector. Just take the tag out of it's angle brackets "<>'s".

body {
    background: #000000;
}

h1 {
    padding-left: 10em;
}

Descendent Selector

This selects an element that is a descendent of an element nested inside another element. This will only target the element inside another element.

The following targets only the spans in headlines

h3 span {
    font-weight: lighter;
    color: navy;
}
                    
p span {
    font-weight: bolder;
    color: maroon;
}

This is a heading with a span element.

This is a paragraph with a span element.

Experiment 3: Class and ID Selectors

Class Selectors .

These are used to classify more than one element. To set a class, inside the HTML tag, add the class="class_name". Multiple classes can be separated by spaces: "class="class_name1 class_name2"

Then in the CSS, us a dot or period to target that element ".class_name".

.content {
    color: forestgreen;
}

.base {
    background-color: white;
}

ID Selectors #

ID selectors are for single HTML elements. Inside the HTML tag, use the id attribute and set it to the specified name: id="id_name".

In the CSS, target ID's with a hash or pound symbol "#". One page can only have one element with a specific ID name.

Note - ID's can be used with the HTML anchor tag to create anchor points in a page. Just click on the home or chevron icon at the bottom of each of htese podules as an aexample

WARNING - ID's carry more specificity than classes do, therefore will trump or dominate class CSS values.

#main_heading {
    color: hotpink;
}

Here is the header

This is the first paragraph.

This is the second paragraph.

This is the third paragraph.

Experiment 4: Grouping and Modifying Selectors

DRY Stylesheets

DRY, or Don't Repeat Yourself, is the concept adopted in CSS to keep your code concise. It's best to just to state properties once in your stylesheet.

The following example looks like good code with properties grouped together.

WARNING - a comma after the last selector will render the code useless and won't be rendered by the browser!

.square,
.circle,
.ellipse {
    display: inline-block;
    margin: 0 1em;
    width: 3em;
    height: 3em;
    background-color: orange;
}

.circle,
.ellipse {
    border-radius: 50%;
}

.ellipse {
    width: 2em;
}

CSS Modules

Even better is to package the code into reusable bits.

.base_shape {
    display: inline-block;
    margin: 0 1em;
    height: 3em;
    background-color: orange;
}

.radius {
    border-radius: 50%;
}

.ellipse {
    width: 2em;
}

Experiment 5: Combinators

The Child Combinator <

These target elements that are direct children of other elements. Target direct children by using the greater than < sign. If you remove this <, then it becomes a Descendent Selector, selecting ALL children and grandchildren.

div#direct_child > a {
    color: crimson;
}
This is the direct child and therefore targeted.

This is a paragraph with a nested link that isn't styled.

This lacks any links and therefore is not styled.

But here's another styled link because it's a direct child of the invisible parent div element.

The Adjacent Sibling Combinator +

These target an element's next sibling on a page, or the element that immediately follows the targeted element. Notice elements can be of different types.

h3 + p {
    background-color: orchid;
    color: white;
}

This paragraph is not targeted.

But this H3 element is targeted.

And this paragraph is it's adjacent sibling.

But this paragraph is not an adjacent sibling, and therefore left alone.

The General Sibling Combinator ~

Use a tilda ~ to select all sibling regardless of type of a parent element. In the example below, different elements are targeted regardless of type.

h3 ~ p {
    color: gold;
}

This heading is targeted

This paragraph is styled

This anchor link just in the way, but doesn't break the code.

Again, this paragraph is styled too, despite the above anchor link being in the way.

This other heading 3 is also targeted

And, of course, this sibling is styled.

Experiment 6: Attribute Selectors

Basic Attribute Selectors

These will target an element no matter its value. The example below has different kinds of elements, but only elements with a class will be styled.

WARNING! - Attribute selectors use square brackets [ ] instead of curly brackets { } or parentheses ( ).

[class] {
    background-color: tomato;
    color: white;
    font-weight: 800;
}

a[class] {
    background-color: saddlebrown;   
}
                    
a[class="high-maintenance"] {
    background-color: fuchsia;
    color: floralwhite;
}
                    
.modest {
    background-color: white;
    color: black;
}

This heading has no class.

But this is a classy paragraph.

No one clicks me because I'm an impoverished link.

And a really classy heading 2

But again, an embarassment of a paragraph.

And I'm a specifically targeted a link with more class!
BUT... I'm super specifically targeted and require the browser to work harder than needed

I don't like that snobby link above me. Just use a simple class selector instead.

Styling Form Inputs

Finally, we can get rid of default browser styling of form elements and make attractive designs!

input[type="email"] {
    width: 200px;
    height: 25px;
    border: 2px groove yellowgreen;
    background-color: indigo;
    color: lemonchiffon;
}

input[type="submit"] {
    margin-left: 5px;
    width: 100px;
    height: 30px;
    border: none;
    background-color: seagreen;
    color: lightgreen;
}

Opening New Tabs

This part shows how to both code in for opening in new tabs, and using attribute selectors to target these specific elements.

a[target="_blank"] {
    text-decoration: none;
    color: mediumaquamarine;
}

Experiment 7: Pseudo-classes

These are not defined in the source code and don't appear in the HTML markup.

Link Pseudo-classes

We can style links according to if they were visited or not.

The Link pseudo-class is a link not yet clicked on, which is first in the code.

The Visited Link pseudo-class styles visited links.

a:link {
    text-decoration: none;
    font-size: 0.9m;
    padding: 0.5em;
    background-color: orangered;
    color: yellow;
}

a:visited {
    font-size: 0.8em;
    background-color: salmon;
    color: lightgray;
}
                    

User Action Pseudo-classes

These are activated through mouse hovers over links and the moment when a link is clicked.

The Hover pseudo-class at the time of this article's creation, does not show on mobile or tablet versions, but only on computer browsers.

The Focus pseudo-class is intended for impaired users or those who cycle through a page by use of hte TAB key. Focus is also for forms and is activated when that element receives focus.

The Active pseudo-class becomes engaged at moment of clicking or tapping on a link.

a:hover, a:focus {
    color: white;
}

a:active {
    background-color: springgreen;
    color: sienna;
}
                    

NOTE - these hover and focus states can be applied to other HTML elements!

p:hover,
p:focus,
h2:hover,
h2: focus {
    background-color: slateblue; 
    color: snow;
}
                    

Hovering Over Elements!

Drag your mouse over us, and we'll our CSS styles!

So often, websites are boring without any soul. Here is a quick way to change that!

More on Focus

This state is especially useful for form elements. Once an element receives focus, CSS can be used to visually queue the user to focus on that element.

input:focus {
    background-color: seashell;
}

Selecting All Elements

We can do this by just getting rid of the element tag and using the pseudo-class state by itself.

:hover {
    background-color: navy;
    color: whitesmoke;
}

:focus {
    background-color: navy;
    color: whitesmoke;

Hover this heading

Hover this paragraph

Hover this link.

Experiment 8: Structural Pseudo-classes

We will be working with this unorderd list. Some basic default styling has been added.

  • First child
  • Second child
  • Third child
  • Fourth child
  • Last child

:first-child Pseud-class

The :first-child will select the first child nested within an element.

li:first-child {
  background-color: cornflowerblue;
  color: azure;
}
  • First child
  • Second child
  • Third child
  • Fourth child
  • Last child

:last-child Pseudo-class

The :last-child will select the last child nested within an element.

li:last-child {
  background-color: burlywood;
  color: dimgray;
  border: none;
}
  • First child
  • Second child
  • Third child
  • Fourth child
  • Last child

:only-child Pseudo-class

The :only-child will select the only child nested within an element.

:only-child {
    background-color: lightcoral;
}

The parent item here is the unordered list, and the list items are its child elements

Also notice the only child in this experiment is the unordered list itself.

  • First child
  • Second child
  • Third child
  • Fourth child
  • Last child

All together

The below experiment shows all of the previous styling for :first-child, :last-child, and :only-child together.

  • First child
  • Second child
  • Third child
  • Fourth child
  • Last child

Experiment 9: Substring Matching Attribute Selectors

These allow us to target pieces of HTML attribute strings. We can target specific parts of words or letters in HTML attributes.

Begins With Attribute Selector

This targets the beginning characters of an attribute.

WARNING! - Remember to use the carrot ^ and square brackets [ ].

a[href^="http://"] {
    color: firebrick;
}
                    
a[href^="mailto:"] {
    color: deeppink;
}

Only the outside link was selected because it is the only anchor link with an href attribute with an http:// substring.

Ends With Attribute Selector

These may be usedful to target different file types life for documents or images.

Notice the dollar sign $ is used to locate a substring that ends with the specified value.

a[href$=".pdf"] {
  background: url('img/pdficon.png') no-repeat 0 0px;
  padding-left: 30px;
}

a[href$=".docx"] {
  background: url('img/docxicon.png') no-repeat 0 2px;
  padding-left: 30px;
}

Or an example with images.

  1. The first is a .jpg.
  2. The second is .jpeg.
  3. And the third is .png.
img[src$=".jpg"] {
  box-shadow: 1px 1px 10px 1px darkslategray;
}

img[src$=".jpeg"] {
 box-shadow: 1px 10px 10px 10px darkslategray;
}

img[src$=".png"] {
  box-shadow: 10px 1px 10px 1px darkslategray;
}

The "Contains" Substring Selector

This targets any particular segment of the attribute that contains this substring chunk.

In this experiment, all of the below images contain the word "icon" in their src attribute.

NOTE - Notice the use of an asterisk * before the equals sign.

img[src*="icon"]:hover {
  background-color: palevioletred;
  border-radius: 30px;
}

img[src*="icon"]:active {
  background-color: indianred;
}

Experiment 10: nth-child

:nth-child() Selector

Perhaps the most well-known and flexible pseudo-classes. Any child element or combination of child elements can be selected.

This is a handy way to dynamically target numerous items, regardless of the order.

NOTE - for these experiments, the unordered lists are floated to show how :nth-child works.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-child(even) {
    color: antiquewhite;
    background-color: chocolate;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-child(odd) {
    color: bisque;
    background-color: coral;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-child(3) {
    color: lightcyan;
    background-color: darkcyan;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

The following :nth-child equations look tricky, but you'll get used to them.

The pattern is :nth-child(an + b)

  • a = change to amount you want incremented
  • n = do not change
  • b = the starting position
li:nth-child(2n + 3) {
  color: darkkhaki;
  background-color: darkgreen;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-child(3n + 3) {
  color: darkorange;
  background-color: darkorchid;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-child(3n) {
  color: darkturquoise;
  background-color: darkslateblue
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-child(n + 3) {
  color: deepskyblue;
  background-color: dodgerblue;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-child(-n + 3) {
  color: gold;
  background-color: goldenrod;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-child(-3n + 8) {
  color: ivory;
  background-color: khaki;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

:nth-last-child() Selector

This works like :nth-child(), but just starts from the last child.

li:nth-last-child(3n) {
  color: lightgreen;
  background-color: green;  
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-last-child(2n + 3) {
  color: lime;
  background-color: limegreen;  
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
li:nth-last-child(-n + 3) {
  color: violet;
  background-color: mediumvioletred;  
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Experiment 11: :nth-of-type and :only-of-type

:nth-of-type Selector

This targets an element of a certain type within a parent element

:nth-of-type pseudo-class is good for selecting elements of a certain type regardless of its position in a parent element.

div:nth-of-type(2n):active {
  background-color: olive;
  color: whitesmoke;
}

div:nth-of-type(odd):active {
  background-color: steelblue;
  color: blanchedalmond;
}
I'm the parent DIV element

I'm a paragraph!

I'm a paragraph!

Div!
Div!
Div!
Div!

:nth-last-of-type() Selector

This works the same as :nth-of-type, but it starts counting from the last child.

div:nth-last-of-type(2n):active {
  background-color: olive;
  color: whitesmoke;
}

div:nth-last-of-type(odd):active {
  background-color: steelblue;
  color: blanchedalmond;
}
I'm the parent DIV element

I'm a paragraph!

I'm a paragraph!

Div!
Div!
Div!
Div!

:only-of-type Selector

This will style a child element if it is the only one of its type. In the markup, the second paragraph is commented out.

You can think of this like an "UNO" pseudo-class - it can be used as a warning if there is only one element.

p:only-of-type:active {
  background-color: darkred;
  color: aliceblue;
}
I'm the parent DIV element

I'm a paragraph!

Div!
Div!
Div!
Div!

Experiment 12: :root and :target Pseudo-classes

:root Selector

This selects the root element of the document, most usually the HTML tag.

The :root pseudo-class has mroe specificity than the HTML tag or the * universal selector.

:root {
    font-family: Futura;
}

So all the font you see on this page is or should be Futura!

:target Selector

This allows us to style elements based on the url. The elements id will match the # hash, and thus be stylized.

The # hash targets its matching id identifier on the page.

NOTE - after you click on a link, notice the fragment identifier in the url!

:target {
  color: aquamarine;
  background-color: tomato;
  padding: 1em;
}
  • Go to S1
  • Go to S2
  • Go to S3
  • Section 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur sollicitudin turpis ut pellentesque. Praesent dignissim est gravida libero mattis dignissim. Vivamus egestas mi metus, vitae lobortis augue facilisis non.

    Section 2

    Aenean at risus pellentesque, mollis felis et, rhoncus turpis. Nullam vel iaculis nibh, sed pharetra urna. In a neque posuere, dignissim orci in, dignissim ante. Aliquam erat volutpat. Integer consectetur erat vel libero facilisis consequat.

    Section

    Pellentesque diam erat, hendrerit ac sagittis eget, adipiscing at orci. Vestibulum eget eros venenatis, porttitor orci at, viverra arcu. Curabitur ullamcorper molestie orci sed euismod. Etiam feugiat tristique arcu quis convallis.

Experiment 13: :empty, :not(); Structural Pseudo-classes

:empty Structural Pseudo-class

This is used to target or style elements without any content or child elements.

/* note, you need to give the empty divs and paragraphs dimesions first before it is visible*/
div, p {
  width: 80%;
  height: 2em;
}

:empty {
  background-color: greenyellow;
}
This div has text

:not() Selector

This negation pseudo-class will select everything except the element specified

:not(h1):hover,
:not(h1):active,
:not(h1):focus {
  background-color: forestgreen;
  color: gainsboro;
}

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Experiment:14 UI States Pseudo-classes - Styling Forms 1

These are most commonly used for styling form elements. As seen in my early Forms experiments, it was difficult to figure out how to style forms with the most basic of CSS.

Here is a default unstyled form:

See CSS styles or Inspect Element on Chrome for these properties.

Here is the initially-styled form without UI state elements styled:

:enabled Selector

This selects UI elements in an enabled state. This works for buttons, text, email, password, and other form fields.

input[type="text"]:enabled,
input[type="email"]:enabled {
  background: lightgoldenrodyellow; 
}

Experiment 15: UI States Pseudo-classes - Styling Forms 2

:disabled Selector

All for elements are enabled by default, that's why these showup as this hue of and yellow.

Hence, there is a need for this pseudo-class.

Disabled elements cannot be selected, clicked on, or receive text input.

NOTE - you have to add the "disabled" attribute to one of the HTML form elements.

input[type="email"]:disabled {
  background: silver;
}

:checked Selector

This allows elements that can be checked like text boxes, radio buttons, or selectable options to be styled

input[type="radio"]:checked + label{
    font-size: 18px;
    font-weight: bold;
}

Experiment 16: ::first-line and ::first-letter Pseudo-Elements

There are four types of pseudo-element selectors. This experiment deals with the first two.

NOTE - The difference between pseudo-classes and pseudo elements is: pseudo-classes target actual elements that describe a certain state. Pseudo-elements allow for styling of certain parts of a document that aren't necessarily elements.

NOTE - though you may use a single colon for pseudo-elemenst, it is best practices to use two colons.

::first-line

This targets the first line of text.

.intro::first-line {
  color: mediumblue;
  font-weight: bold;
  font-size: 22px;
}

Proin tristique imperdiet dolor, nec iaculis tellus. Nunc non ipsum eleifend, auctor lectus quis, porttitor tortor. Praesent egestas tortor vitae tempor suscipit. Vivamus interdum turpis eget ultrices consectetur. Vestibulum a metus varius, vulputate orci ut, ultricies turpis.

::first-letter

This targets the very first character of an element or in a sentence.

This is for typographical effects like dropcaps where the first letter of a paragraph is styled

#page16_sfirst-letter .intro::first-letter {
  float: left;
  margin: 10px 10px;
  padding: 5px 10px;
  background: linen;
  font-size: 60px;
  line-height: 1;
}

Proin tristique imperdiet dolor, nec iaculis tellus. Nunc non ipsum eleifend, auctor lectus quis, porttitor tortor. Praesent egestas tortor vitae tempor suscipit. Vivamus interdum turpis eget ultrices consectetur. Vestibulum a metus varius, vulputate orci ut, ultricies turpis.

Experiment 17: ::before and ::after

::before and ::after pseudo-elements are virtual elements that can be inserted before or after an element's content.

These are used to insert generated content into a page.

::before

This inserts generated content before an element. We must use the content property. The content must contain an empty set of quotes as its value initially.

#phone_number::before {
    content: "\2706";
}

#download::before {
    content: url('img/pdficon.png');
    margin: 0 8px;
}

555-1234

Download File

::after

We can use simple functions to return generated content based the attribute of al element

#download::after {
    content: attr(href);
    padding-left: 10px;
    font-size: .50em;
    color: magenta;
}

555-1234

Download File

Generated Content

We can also add shapes as generated content. This will generate a pseudo-element before the text.

.box::before,
.box::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: royalblue;
  margin: 15px 15px 0 15px;
  border-radius: 50%;
}
Generated Shapes

As Child Content

::before and ::after pseudo-elements is inserted into the page as child elements rather than actually before or after the content.

.box {
    border: 1px solid;
    padding: 10px;
}
Generated Shapes

Therefore the above example shows how the ::before and ::after are inserted within the element, not before or after the div element.

Experiment 18: Absolute and Relative Length Units

Absolute Length Units

These are useful when the exact measurements are known. Though they are not preferrable due to varing screen sizes.

.cm {
    background-color: darkcyan;
    width: 5cm;
}

.mm {
    background-color: darkkhaki;
    width: 50mm;
}

.in {
    background-color: darkblue;
    width: 1.96850393700787in;
}

.pc {
    background-color: darkred;
    width: 11.8110245520492pc;   
}

.pt {
    background-color: darkgreen;
    width: 141.73227453655pt;
}

.px {
    background-color: darkslategray;
    width: 188px;
}

Centimeters, millimeters, and inches are not intended for web use. They vary greatly between output mediums and resolutions.

Pixels are the only units in general use on the web.

Centimeters
Millimeters
Inches
Picas
Points
Pixels

Relative Length Units

Relative length units specify units of length relative to other elements such as font size or the width of the browser viewport.

ex - The "ex" unit is equal to hte current font's ex height (this is usually the height of the font's lowercase letter "x".

p {
    font-size: 3ex;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in porta nisl, ut sodales lectus. Pellentesque vel commodo erat, eu fringilla risus.

Note - ex units do not resize with the window. But they do resize according to defaul font size of the HTML document.

p {
    font-size: 3ex;
}

.html_font_reset {
    font-size: 10px;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in porta nisl, ut sodales lectus. Pellentesque vel commodo erat, eu fringilla risus.

Experiment 19: Relative Units Continued

The em is equal to the computed value of the font size property of the element on which it is used.

One em is equal to the inherited font size, or the default font size without any changes. The browser default is usually 16 pixels. .75em = 12px.

p {
  font-size: .75em;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in porta nisl, ut sodales lectus. Pellentesque vel commodo erat, eu fringilla risus.

This puts the default size at 10, and thus the p font size is then determined in relation to the default font size of 10px.

.page_19_resized {
  font-size: 10px;
}

p {
  font-size: .75em;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in porta nisl, ut sodales lectus. Pellentesque vel commodo erat, eu fringilla risus.

One annoyance is the compounding effect of the em. For example, if multiple font sizes have been specified, then, the em unit will correspondingly compound these values.

#em_boxC {
  font-size: 2em;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in porta nisl, ut sodales lectus. Pellentesque vel commodo erat, eu fringilla risus.

The rem Unit

This unit was introduced in CSS3, and stands for the Root em unit. This always represents the font size of the page's root element.

p {
  font-size: .75rem
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in porta nisl, ut sodales lectus. Pellentesque vel commodo erat, eu fringilla risus.

We can see that this goes back to the default root scale.

Experiment 20: Viewport Relative Units

These units eliminate the dependency on parent units and allow sizing purely based on the viewport size.

Each value is equal to 1% or 1/100 of the viewport.

vw

vw means viewport width.

div {
    width: 5vw;
    height: 1em;
    background-color: navy;
    float: left;
    margin: 2px;
}

vh

vh stands for viewport height. This is equal to 1% or 1/100 of the viewport's height.

Note - these only resize when the height is adjusted and not the width.

div {
    height: 5vh;
}

vmin

The vmin unit is 1% or 1/100 of the minimum value between the height and width of the viewport.

That is to say this will be a percentage of whatever is currently smaller - the height or the width.

div {
  height: 20vmin;
}

Experiment 21: Numeric and Textual Data Types

Textual Data Types: auto, inherit, & initial

auto

This is the default value for certain properties like width, height, z-index, and more. The browser will automatically calculate these values.

inherit

This sets the value of the element to the property of its parent element.

initial

This is designated as the property's initial default value.

div#div_auto_margin {
  margin: auto;
  background-image:  url(http://7428.net/wp-content/uploads/2013/03/Neon-Abstract-Grid-Background.jpg);
} /* this centers div on page and gives it a background */

a#inherited_anchor {
  color: inherit;
  text-align: inherit;
}

p#red_paragraph {
  color: red;
}

p#red_paragraph strong {
    color: initial;
    /* color: -moz-initial; */ /*this is for Firefox*/
}

div#div_auto_margin::after {
    content: "\\\\ A string with \"escaped\" double quotes \\\\";
    font-size: 1.2em;
    color: Chartreuse;
}

This paragraph and the link below are both in a div, and here's just some more text. Here's a meaningless link that's now the color of it's parent paragraph.

Numeric Data Types

These include integers (no decimal point) and real numbers (with a decimal point), either can be positive or negative.

Properties that can accept negative numeric data types: margin, text-indent, top, right, bottom, left.

Decimals may be used in numeric data types.

Common properties that use percentages are width, margin, padding, and font size.

Experiment 22: Color Values

Color Key Words

Throughout this page, I've been using CSS color key words. Here is a list of many of these colors.

Chart of common HTML color names

Hexadecimal Codes

There are 16,777,216 unique combinations of hexidecimal colors. White is #FFFFFF and black is #000000. The first two digits are Red, the second two are Green, and the last two are Blue values.

Note - if the number repeat themselves, this code can be shortened to three digits. Notice the code for the black and white boxes.

#redHex {
  background-color: #FF0000;
}

#greenHex {
  background-color: #00FF00;
}

#blueHex {
  background-color: #0000FF;
}

#whiteHex {
  background-color: #FFF;
}

#blackHex {
  background-color: #000;
}
Red box
Green box
Blue box
White box
Black box

RGB: rgb();

This takes three values, in the specified Red, Green, and Blue order. Values range from 0 to 255.

#rgb1 {
  background: rgb(100, 200, 50);
}

#rgb2 {
  background: rgb(50, 100, 200);
}

#rgb3 {
  background: rgb(255, 255, 50);
}
RGB Green
RGB Blue
RGB Yellow

RGBa

The "a" defines the alpha level or opacity of an element. To do this, add a fourth parameter inside the parentheses. A value of 0 is full transparency and 1 is full opacity.

#rgba1 {
  background: rgba(255, 127, 0, .9);
}
                        
#rgba2 {
  background: rgba(255, 127, 0, .1);
}                        
rgba1
rgba2

HSL: hsl();

h = hue - this is an angle in the Color Wheel measured from 0 to 360 degrees. The six major colors are: Red, Yellow, Green, Cyan, Blue, and Magenta. Each of these are spaced at angles of 60 degrees.

s = saturation - 0 is completely desaturated or gray-scale. 100% is fully saturated or full color.

l = lightness - 0% is black, 50% is normal, and 100% is white.

Here is a converter between hexidecimal codes, RGB, and HSL!

#hsl1 {
  background: hsl(0, 0%, 0%);
}

#hsl2 {
  background: hsl(60, 25%, 25%);
}

#hsl3 {
  background: hsl(120, 50%, 50%);
}

#hsl4 {
  background: hsl(180, 75%, 75%);
}

#hsl5 {
  background: hsl(240, 30%, 70%);
}

#hsl6 {
  background: hsl(300, 40%, 60%);
}

#hsl7 {
  background: hsl(360, 50%, 50%);
}
hsl1
hsl2
hsl3
hsl4
hsl5
hsl6
hsl7

HSLa hsla();

This allows us to specify the alpha or opacity of a color.

#hsla1 {
  background: hsla(0, 0%, 0%, 0);
}

#hsla2 {
  background: hsla(60, 25%, 25%, .25);
}

#hsla3 {
  background: hsla(120, 50%, 50%, .5);
}

#hsla4 {
  background: hsla(180, 75%, 75%, .75);
}

#hsla5 {
  background: hsla(240, 30%, 70%, .1);
}

#hsla6 {
  background: hsla(300, 40%, 60%, .9);
}

#hsla7 {
  background: hsla(360, 50%, 50%, 1);
}
hsla1
hsla2
hsla3
hsla4
hsla5
hsla6
hsla7

Experiment 23: Font Properties

font-family

This allows us to specify a type-face. The family names are: Courier, Georgia, Helvetica, Times New Roman, Verdana. The generic family types are sarif, sans-sarif, cursive, fantasy, and monospace.

font-family values include: cursive, fantasy, inherit, monospace, sans-serif, serif, and !important

Here is a list of web-safe cross-browser and cross-OS fonts

Serif fonts have decorative tails or hooks on certain characters. Times and Georgia are common Serif fonts.

Sans-serif tend to be the easiest fonts to read for usability purposes. Verdana and Helvetica are common Sans-serif fonts.

Monospace fonts take up the same amount of space per character (i's and m's take the same width or horizontal space. Courier and 'Lucida Console'

/* All font CSS here is done in-line to save on space */

Default Fonts: The quick brown fox jumps over the lazy dog.

This is a serif font. The quick brown fox jumps over the lazy dog.

This is a sans-serif font. The quick brown fox jumps over the lazy dog.

This is a cursive font. The quick brown fox jumps over the lazy dog.

This is a fantasy font. The quick brown fox jumps over the lazy dog.

Font Stacks: Windows fonts, Mac fonts, Font family

Font stacks are the sequence of fonts your browser will search for, displaing the first one found. Notice for the syntax, use single or double quotes to link fonts that consist of more than one word in the name.

Arial, Arial, Helvetica, sans-serif

'Arial Black', 'Arial Black', Gadget, sans-serif

'Comic Sans MS', 'Comic Sans MS', cursive

'Courier New', 'Courier New', monospace

Georgia1, Georgia, serif

Impact, Impact5, Charcoal6, sans-serif

'Lucida Console', Monaco5, monospace

'Lucida Sans Unicode', 'Lucida Grande', sans-serif

'Palatino Linotype', 'Book Antiqua3', Palatino, serif

Tahoma, Geneva, sans-serif

'Times New Roman', 'Times New Roman', Times, serif

'Trebuchet MS1', 'Trebuchet MS', sans-serif

Verdana, Verdana, Geneva, sans-serif

Symbol, Symbol (Symbol2, Symbol2)

Webdings, Webdings (Webdings2, Webdings2)

Wingdings, 'Zapf Dingbats' (Wingdings2, Zapf Dingbats2)

'MS Sans Serif4', Geneva, sans-serif

'MS Serif4', 'New York6', serif

font-size

font-sizes include: inherit, large, larger, medium, small, smaller, xx-large, xx-small, x-large, x-small, and !important

font size can also be specified with pixels, ems, pems, and percentages. Default font sizes will be 100% = 16px = 1em.

/* All font CSS here is done in-line to save on space */

inherit

!important

xx-small

x-small

smaller

small

medium

large

larger

x-large

xx-large

font-size-adjust

font-size-adjust values include: none and numeric values.

/* All font CSS here is done in-line to save on space */

font-size-adjust: none

font-size:adjust: 10

font-size:adjust: 20

font-stretch

font-stretch values include: condensed, expanded, extra-condensed, extra-expanded, narrower, semi-condensed, semi-expanded, ultra-condensed, ultra-expanded, and wider.

/* All font CSS here is done in-line to save on space */

semi-condensed

condensed

extra-condensed

ultra-condensed

semi-expanded

expanded

extra-expanded

ultra-expanded

narrower

wider

font-style

font-style values include: inherit, italic, normal, oblique, and !important.

/* All font CSS here is done in-line to save on space */

inherit

italic

oblique

!important

font-variant

font-variant values include: inherit, normal, small-caps, and !important.

/* All font CSS here is done in-line to save on space */

inherit

normal

small-caps

!important

font-weight

font-weight values include: 100, 200, 300, 400, 500, 600, 700, 800, 900, bold, bolder, inherit, lighter, normal, and !important.

/* All font CSS here is done in-line to save on space */

inherit

100 the quick brown fox jumps

200 the quick brown fox jumps

300 the quick brown fox jumps

400 = normal font weight value

500 the quick brown fox jumps

600 the quick brown fox jumps

700 = bold font weight value

800 the quick brown fox jumps

900 the quick brown fox jumps

bold

bolder

lighter

normal

!important

font

All of the above attributes can be used in the shorthand. You must specify the font-size and font-family.

The order should be: font-style, font-variant, font-weight, font-size, font-family

font: italic small-caps bold 1.25em Baskerville, 'Times New Roman', Times, serif
The quick brown fox jumps over the lazy dog.

Experiment 24: Text Properties

line-height

This is the vertical spacing between lines of text.

Values for line-height include: inherit, !important, normal, px, em, %. Default is normal, or 1.2

#page24_line-height {
  line-height: 1.5;
}

Morbi quis sollicitudin magna. Vestibulum mollis nunc lectus, vel pulvinar dui ultrices eget. Quisque turpis elit, feugiat id turpis a, gravida maximus purus. Nulla elementum tellus vitae mauris accumsan pharetra. Etiam ut augue risus. Mauris cursus congue mi quis ornare.

The above example line-height of 1.5 is equal to 1.5em or 150%.

text-align

Values for the text-align are: left, right, center, justify, inherit, and !important

#page24_text-align {
  text-align: justify;
}

Morbi quis sollicitudin magna. Vestibulum mollis nunc lectus, vel pulvinar dui ultrices eget. Quisque turpis elit, feugiat id turpis a, gravida maximus purus. Nulla elementum tellus vitae mauris accumsan pharetra. Etiam ut augue risus. Mauris cursus congue mi quis ornare.

text-decoration

Values for text-decoration are: none, underline, overline, line-through, inherit, or !important

/* in-line CSS */

text-decoration set to: none

text-decoration set to: underline

text-decoration set to: overline

text-decoration set to: line-through

text-indent

This indents the first line of text. Values are length units or percentages.

#page24_text-indent {
  text-align: justify;
  text-indent: 1.5em;
}

Morbi quis sollicitudin magna. Vestibulum mollis nunc lectus, vel pulvinar dui ultrices eget. Quisque turpis elit, feugiat id turpis a, gravida maximus purus. Nulla elementum tellus vitae mauris accumsan pharetra. Etiam ut augue risus. Mauris cursus congue mi quis ornare.

text-transform

This allows us to change the case of text.

text-transform values include: capitalize, uppercase, lowercase, none, inherit, and !important

The lazy brown fox jumps over the quick dog.

The lazy brown fox jumps over the quick dog.

The lazy brown fox jumps over the quick dog.

white-space

This sets how the white space in an element is displayed.

white-space values include: normal, nowrap

white-space: normal = this doesn't render normal linebreaks and spaces

white-space: nowrap = ignores linebreaks and doesn't allow elements or text to break naturally to the next line.

white-space: pre = content is rendered exactly how it is written and natural linebreaks are ignored.

white-space: pre-line = ignores multiple spaces in the markup, but does honor the linebreaks.

white-space: pre-wrap = works like the pre value, but doesn't force everything on a single line.

This line is nowrap and too ugly to lengthen.

This is a pre sentence.

This pre - line is spaced but the linebreaks are going to be natural and will not overflow off the page.

This pre-wrap will honor multiple spaces and specific linebreaks. Lines are only broken at new line characters written in the markup.

Experiment 25: More Text Properties

text-shadow

This creates drop shadows for text. Parameters are three united values followed by a color.

text-shadow: (horizontal offset), (vertical offset), (optional amount of blur or blur radius), (color)

#page25_text-shadowA {
  text-shadow: 5px 5px 3px rgba(255, 100, 130, 0.8);
}

#page25_text-shadowB {
  text-shadow: -5px -5px 3px rgba(255, 100, 130, 0.8);
}

#page25_text-shadowC {
  text-shadow: 1px 1px 5px rgba(300, 40, 180, 0.8), -1px -1px 8px rgba(40, 180, 130, 0.6);
  color: #eef;
}

Shadow A: This is a nice 5:00 shadow.

Shadow B: This is a nice 5:00 shadow.

Shadow C: These text-shadow properties are stacked

text-overflow

We can specify what happens when text overflows its containing element.

The default vault of text-overflow is clip.

.text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

This text orginally would have overflowed its parent element.

word-wrap

This allows long or unbreakable words like links to break and wrap onto the next line.

.word-wrap {
  word-wrap: break-word;
}

Experiment 26: List Styles

list-style-type

Values work with both ordered or unordered lists. The list items are generally styled in the CSS. Entire list

/* all examples styled in-line */
    Unordered List
  • disc (default)
  • circle
  • square
    Ordered List
  1. decimal
  2. decimal-leading-zero
  3. cjk-decimal
  4. lower-roman
  5. upper-roman
  6. lower-greek
  7. lower-alpha
  8. upper-alpha
  9. lower-latin
  10. upper-latin
  11. arabic-indic
  12. armenian
  13. lower-armenian
  14. upper-armenian
  15. bengali
  16. cambodian
  17. cjk-earthly-branch
  18. cjk-heavenly-stem
  19. cjk-ideographic
  20. devanagari
  21. ethiopic-numeric
  22. georgian
  23. gujarati
  24. gurmukhi
  25. hiragana
  26. hiragana-iroha
  27. japanese-formal
  28. japanese-informal
  29. kannada
  30. katakana
  31. katakana-iroha
  32. khmer
  33. korean-hangul-formal
  34. korean-hanja-formal
  35. korean-hanja-informal
  36. lao
  37. mongolian
  38. myanmar
  39. oriya
  40. persian
  41. simp-chinese-formal
  42. simp-chinese-informal
  43. tamil
  44. telugu
  45. thai
  46. tibetan
  47. trad-chinese-formal
  48. trad-chinese-informal
  49. disclosure-open
  50. disclosure-closed

list-style-position

The default value is to place the marker outside a list item. THe markers are to the left of the text are are outside the content flow

Lists are indented to the left as follows: IE uses left margin while Safari, Firefox, and Chrome use left padding.

#page25B li {
  border:  1px solid hsla(10, 10%, 10%, .3);
}

#page25B ol:first-child {
  list-style-position: inside;
}

#page25B ol:nth-child(2) {
  list-style-position: outside;
}
  1. Inside item 1
  2. Inside item 2
  1. Outside item 1
  2. Outside item 2

list-style-image

We can use an image in place of a bullet.

#page25C ul {
    list-style-image: url(http://www.turbineperrelet.com/images/limited-edition/6_bullet.png);
}
                        
  • Bullet one
  • Bullet two

Notice the problem that the images cannot be resized. The position is also off:

The following example is a common fix to this problem:

#page25D ul{
  list-style-type: none;
}

#page25D ul li {
  background: url('http://images.wikia.com/mariokartwii/images/d/d7/Bullet_Bill.png') no-repeat 0 2px;
  background-size: 15px 12px;
  padding-left: 35px;
}
  • Bullet one
  • Bullet two

list-style

This is the shorthand that defines all of above list-style-type, list-style-position, and list-style-image properties.

                            
                        

Experiment 27:


                        

Experiment 28: