WordPress School: HTML and CSS Embedded Styles

In the next part of this mini-series for Lorelle’s WordPress School, we’re moving deeper into understanding how CSS works with HTML. These easy tutorials will give you the basic tools you need to learn to customize your WordPress site and work on WordPress Themes.

We will be working more on the test HTML file and continuing with the experiments you did in the last tutorial and move from inline CSS styles to embedded CSS techniques, moving you closer to the CSS stylesheet techniques found on every WordPress Theme.

In addition to the terminology you learned in the tutorial on HTML and CSS inline styles, here are a few new words.

CSS Rules: The structure of the language of CSS follow a pattern and structure known as the CSS rule. It consists of a selector and the declaration block, which features declarations made up of properties and values.
- Selector: In the language of CSS, a selector is an identifier linked to the HTML. HTML has tags and CSS has selectors, often the same thing. In HTML, a tag would be <body>. In CSS, the selector would be <body> and feature properties to set the styles for that HTML tag.
- CSS Properties and Values: After the selector, the CSS language presents the instructions within curly brackets { } called properties. Each property features a value. A colon not equals is set between the property and the value, and a semi-colon separates each set of properties and values. For example, to set the size of the font, the property would be font-size and the value would be 1em, which would be displayed as h2 { font-size: 1em; }. To set the font-size and the color of the text, it might be h2 { font-size: 1em; color: blue; }.
Identifiers: There are two identifiers in CSS, classifications that name the HTML tags to receive the instructions. While CSS may be applied to an HTML tag such as <p>, to change specific paragraph settings, classes and IDs are used to identify which ones to change.
- Class: In CSS, a class is an identifier, designating the CSS selector. A class identifier may be found multiple times on a single web page. In the CSS language, the class is designed with a period before the word such as .widget. You could create a CSS instruction to style anything with the class “red” to the color red such as .red { color: red; }. Classes are single words or phrases with underlines or hyphens, and must start with an alphabet letter, not number, and may have numbers in it such as sidebar1 or sidebar-1.
- ID: In CSS, the id is the identifier of a specific section on the web page. There may be multiple usage of the same ID across a website but only one on a single web page. Remember, classes maybe used multiple times on a web page, IDs only once. ID names have the same rules as classes. In CSS, the ID features a pound or number sign before the word(s) such as #post-title. Otherwise, it is used much like the CSS class to designate the specific area to be styled.
Stylesheet: A stylesheet or style sheet is the file that holds the CSS instructions. The HTML tags listed within it match the HTML file linked to the stylesheet. There may be multiple HTML files linked to a single stylesheet, thus influencing the design of the entire website. The same instructions for an HTML tag maybe made once in the stylesheet and design all the web pages attached to it.

CSS Basics

CSS styles are linked to the HTML tag and element. Think of CSS as design instructions, the remote control for an element on a web page, styling a paragraph to use a particular font, font size, margins, padding, and spacing before or after the paragraph.

In the previous tutorial, we worked with inline CSS styles. Here is the basic example we played around with:

<div>This is sample text in a div.</div>

An example of the inline CSS styles was:

<div style="color:#6633FF; 
border: 4px solid green;">This is 
sample text in a div.</div>

The HTML tag styled is a div. The style attribute featured CSS styles for the text color and a border.

Separating the presentation from the architecture, we can give the HTML an identifier and link the instructions to that HTML identity.

Add the following to your test HTML file.

<div id="test">This is a round two
sample text in a div.</div>

Look in the text editor at your HTML test file. At the top in the <head> HTML section is a <style> HTML tag. Within it you will see embedded CSS. These are HTML tags awaiting styling instructions.

Copy the following and paste it into the bottom of that list before the closing </style> HTML tag.

#test { 
      color:#6633FF; 
      border: 4px solid green;
      }

Save the file and view it in the browser. Notice that this new “box” looks similar to the first one you created with new words. The inline styles are now removed from the HTML and set in the embedded CSS style instructions, linked by the ID name.

Let’s break this down, item by item.

style: An HTML tag that holds CSS instructions within the <head> of a web page. The attribute “type” is set to be text/css, providing instructions to the browser as to the type of code instructions.
#test: In CSS, the # represents an ID, a unique identifier used once per web page. In HTML, it is an attribute of the HTML tag such as id="test" within the tag. The style instructions will only change the HTML using that identifier. The ID is also used for jump links within a web page or between them, as with the MORE excerpt in WordPress.

Now, change the color of the border in the embedded CSS instructions. An example would be:

#test { 
      color:#6633FF; 
      border: 4px solid blue;
      }

Save the file and reload it in your web browser. Did it change?

You didn’t change the HTML but the CSS instructions. That is the only DIV that changed, right?

Let’s take this one step further and add the following CSS instructions to the embedded CSS styles at the bottom of the list:

div div { 
      background-color: yellow;
      }

The background of every div HTML tag on the test web page should be yellow.

The use of div div takes advantage of the parent-child relationship of CSS, which we will cover in the next tutorial. All of the divs under the parent div, but not the parent div, have a colored background.

You may experiment with this, or delete this before we move on.

CSS Terminology

In the HTML test file, the CSS embedded in the top of the web page includes the following HTML tags with no CSS instructions:.

body { } div { } p { }

Inside of the curly brackets of each HTML tag would be found the declarations, code that changes the look and behavior of the HTML tag. In the test ID div and the div div example, we added declarations that instructed the HTML designs.

You may wish to have a base font, the same font for everything on the web page. You may set the font styles in the body HTML tag and the styles there will influence everything within that HTML tag, like pouring water into a box. Everything in the box gets wet.

Let’s do that now.

In the body CSS instructions between the brackets, add the following information:

body {
     font-family: Verdana, Tahoma, sans-serif; 
     font-size: 1em;
      }

The majority of the fonts on the web page should change from a Times Roman to a sans-serif font. This is the example of how a parent container in HTML influences all of the HTML elements within.

Which font is displayed is based upon which of these web safe fonts you have installed on your computer. Having multiple font-family choices allows the font to degrade nicely to another similar font if the first ones aren’t found on the computer system, with the default sans-serif if all else fails.

Need help with font ideas?

Back to learning about HTML and CSS.

The CSS code line begins with the HTML tag or identifier, the HTML element that identifies which HTML container is being changed or influenced by the design instructions in the CSS.

Inside the curly brackets are the attributes, known as selectors, the design styles. The styles, declarations, consist of a name: value structure closed with a semi-colon within the curly brackets between each declaration rule. Note the colon between the name and value.

In the test file for our example, let’s set the style for the paragraph HTML tag to make the text bold, demonstrating the name: value declaration.

p {color: red;}

The name of the selector is color, and the value is set to red, changing the look of the text in the paragraph HTML tag.

Having all the text within a paragraph in red wouldn’t be pretty or readable. Remove the red and set it to black or another color. Then let’s add some CSS declarations to style the paragraph.

Begin by adding paragraphs. Using the opening <p> and closing </p> wrapped around, write some text. Anything you wish as long as the paragraphs have 2-3 sentences within them.

In the p of the embedded CSS, let’s style the paragraph. You have many choices:

color: Choose an HTML hexadecimal color code to be the value in the color: #colorcode; value.
font-size: Set a font-size with font-size: 98%; as a percentage, point (pt), em, or pixel (px) size. The percentage is based upon the base font size, currently set to 1em.
padding and margins: Remember, padding is the space between the content and the HTML tag borders. Margin is the space between the HTML tag border and the rest of the content outside of it. An example might be margin: 5px; padding: 5px;. Experiment with the sizes to add spacing between and around the paragraphs.

The CSS Box Model

To help you visualize margins and padding, and prepare you to create an HTML element you can position and move around on the web page, we need to learn more about the CSS Box Model.

The CSS Box Model defines the area in and around a block-level element (container). Starting in the center of the element is the content, whatever the container is holding. Around that is the padding, the area between the content and the virtual sides of the container. Then there is the container sides called the border. Around the border is the margin, the space between the container and the other containers on the web page.

Many people like to visualize the CSS Box Model and HTML elements as a nested doll, the Matryoshka doll popular in Russia. One doll sits inside another, and another, and another.

To experiment with this on your test site, add the following to the HTML test file below your other tests and inside the last </div> HTML tag.

<div id="cssboxmodel">
<p>This is sample text in a paragraph.</p>
</div>

It should look like this.

Add the following CSS styles to the bottom of your embedded style codes.

#cssboxmodel {
       background-color: green;
       width: 200px;
       height: 200px;
       }
#cssboxmodel p {
       border: 1px solid red;
       }

Save the file and take a good look at the results. It should look like this small box above. Notice that the green background color of the div extends below the red border around the paragraph. The div container is set to 200px height, and there is no height on the paragraph HTML tag.

Using the Box Model elements of padding and margin, add a 10 pixel margin around the paragraph.

#cssboxmodel p {
       border: 1px solid red;
       margin: 10px;
       }

Save the file and reload it in the web browser.

Ah, now there is some breathing room around the paragraph.

Add padding to the paragraph.

#cssboxmodel p {
       border: 1px solid red;
       margin: 10px;
       padding: 10px;
       }

Even more breathing room.

The red border around the paragraph is the indicator between the inside and the outside of the paragraph HTML container. Change the margin and padding numbers to see which changes and how in your test file. Remember, padding is inside, margins are out.

Let’s make the div wider to give us more room to play around with our paragraph. Set the div width to 400px and the paragraph width to 200px.

#cssboxmodel {
       background-color: green;
       width: 400px;
       height: 200px;
       }
#cssboxmodel p {
       border: 1px solid red;
       margin: 10px;
       padding: 10px;
       width: 200px;
       }

In CSS, a float is a property that instructs its container to shift to the right or left within a parent HTML container. Let’s shift the paragraph to the right.

#cssboxmodel {
       background-color: green;
       width: 400px;
       height: 200px;
       }
#cssboxmodel p {
       border: 1px solid red;
       margin: 10px;
       padding: 10px;
       width: 200px;
       float:right;
       }

Save the file and refresh the browser. Did it move?

Change the float to the left. Save the file and reload. Did it shift sides?

To center the paragraph within the div HTML container, there is no float for center. The trick is to set the margin to auto. This automatically centers the HTML element equally between the left and right margins.

Remove the float CSS and change the margin to auto.

#cssboxmodel {
       background-color: green;
       width: 400px;
       height: 200px;
       }
#cssboxmodel p {
       border: 1px solid red;
       margin: auto;
       padding: 10px;
       width: 200px;
       }

By adding simple instructions to the CSS, we’ve changed the look, feel, and placement of the paragraph within the example.

It’s time to play with your paragraph. Add more margins, padding, change the font, change the border (try dotted, dashed, grove, double, ridge, inset, and outset for the border-style), and just have fun. See what you come up with.

CSS Link Status

In your test HTML file is a paragraph with two links.

HTML Links are HTML tags that wrap around words and images to make them clickable, connecting web pages and sites together in the spider web that is the Internet. There is much to learn about links on web pages but we are going to focus strictly on the links within your content, known as the anchor tag links.

Links have display properties that change based upon the state of the link. For example, if you haven’t clicked on a link, it is in a link state. If you hover over the link, it is in a hover state, recognizing the mouse over the link. If you have clicked on the link, the state would change to visited.

link: A link waiting for a click or activity
hover: A link with the mouse over it
visited: A link that has been visited

To make the following work on your test site, we need to change the link in the second link. This will make it different from the first one.

In the text editor, find the second link
In the anchor HTML tag, in the quote marked href, carefully add test so it looks like #test
Save the file

As we style the links on this test web page, only click the first link on the web page to ensure that the second link remains unvisited to see the changes.

An a anchor HTML tags with their states already listed in the embedded stylesheet. Either replace or add the following:

a:link {
      color: blue;
      }
a:hover {
      color: red;
      }
a:visited {
      color: green;
      }

Save the HTML file and reload it in the web browser. Move over the first link. Did it change colors?
If you haven’t clicked on the first link, do so now. Nothing will happen as the page will reload. See the color shift on the link to visited? Is the color different on the second link? It remains unvisited, so a different color.

Let’s add an underline to the hover. What about a dotted line?

There is a trick to this. By default, links are underlined. For the hover to change to a dotted line, we need to turn off the default underline and add a border. We’ll also make the border under the link colored yellow.

a:link {
      color: blue;
      }
a:hover {
      color: red;
      text-decoration: none;
      border-bottom: 2px yellow dotted;
      }
a:visited {
      color: green;
      }

It would look like this.

Having fun yet? There are so many ways to paint your HTML with CSS. Experiment with the links to create more fun effects. Search the web for tutorials on how to style the various link states. There are some imaginative people out there.

Not every design idea you find on the web is worth using on your own site, but you learn from everything. Experiment freely. Break it. Fix it.

Extract the Inline CSS

The next step in this HTML/CSS experiment is to learn how to extract the inline CSS from your experiment samples and add them to the embedded CSS section of the web page. By the time you are done, none of the HTML elements on the web page will have inline CSS styles, just the HTML.

The key to this process is to be careful and make sure that the extraction of the CSS designs inline to the embedded styles make no changes in the sample HTML. Nothing should change on the web page.

Begin by renaming the test file.

In the Text Editor, choose File > Save As. Add a version number or change the name. Choose a name that will remind you of what this is later.

You will also need to load the new test file into the browser.

Let’s start with a simple example:

<p style="font-family: Impact; color:red; 
font-size:30px;">This is test text.</font></p>

Give the paragraph a unique ID such as “test-paragraph.”

Copy the styles from within the style tag and paste them into the embedded CSS styles at the top of the web page with the others. Set them with the ID of the paragraph.

#test-paragraph {
      font-family: Impact; 
      color:red; 
      font-size:30px
      }

Align the CSS declarations with the space bar or tabs.

What remains should look like this:

<p id="test-paragraph">This is test text.</font></p>

Save the file and reload it in the web browser. Did it change? If done right, nothing should change.

To test it, change the text color to a different color. Save and reload. Did it change color?

That’s it. You thought this would be hard?

The hardest part of this process usually boils down to three errors:

An identifier that doesn’t match. If you used a space or underline instead of a hyphen on one of them and not the other, it won’t work as the ID doesn’t match. Same with misspelling, a common error.
Failure to set the #. If you wrote in the CSS styles “test-paragraph” and not “#test-paragraph,” it won’t work as the browser doesn’t know that you are directing these instructions to the ID on an HTML element. Without the #, it thinks you are instructing an HTML tag.
You made a syntax error. Forget a quote mark, comma, semi-colon, colon, or bracket and you break the code. The language doesn’t make sense and the browser cannot interpret it. Pay close attention to all the little details.

It’s your turn. Go through each of the samples we’ve worked on over the past couple exercises and pull out the CSS styles and put them into the embedded styles. If you make mistakes, fix them. That is part of the learning.

Remember, when done, the test file should match the previous version. Compare the two to ensure you did a good job.

The next section in this tutorial explores the parent-child relationship of HTML and CSS to help you better understand how to style within the containers of a web page.

For More Information on CSS Selectors and Properties

If you would like help and more information on CSS Selectors and properties covered in this tutorial, see:

Assignment

Lorelle's WordPress School Assignment Badge. Like the others in this mini-series, your assignment is to apply these experiments to the test file you created in the first post with the test file example and modified in the previous tutorial.

Take care extracting the CSS from the HTML tags. I grade my students on their ability to follow instructions and attention to detail. This is just one of the many ways those skills come into play on a WordPress site.

Remember, at any point, you may change the file name to preserve your experiences. Save it as testcss1.html then testcss2.html. This will help you go back and see what you’ve done alone the way, or take a step backwards if you mess things up. You may start over at any time with the original copy of the file.

Need help? Can’t figure this out? You have help here in this post’s comments and in our WordPress School Google+ Community on the HTML and CSS Embedded CSS – Experiments discussion. Please reply to this assignment with your questions so we may help you through the process. There are some people familiar with HTML and web programming who’ve been chomping at the bit to help out. Give them a chance to shine.

Head not exploding yet? That’s a good sign. Each of these tutorials in this mini-series focusing on HTML and CSS will help you understand how to customize your site as we move forward. Onward and upward. More potential destruction to gray matter coming up next.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see: