WordPress School: HTML Inline Styles

In this mini-series for Lorelle’s WordPress School , we’re learning about HTML basics. I shared a little history and information to help you get started and gave you an HTML file that you will use in this tutorial. In the next tutorial, I covered some very basic HTML elements found in the test HTML file. In this tutorial, we will add styles as part of the process of learning basic web design. Again, this is not a full-fledged HTML and CSS class but a mini-tutorial on the basic terminology and web design elements to help you understand a little more about how a web page works, leading us toward WordPress site customization and WordPress Themes.

The styles we are going to add are inline styles, presentation elements that style the HTML tag. We will start with a few basic, considered archaic by many, inline HTML styles and introduce you to inline CSS styles in this tutorial.

WordPress.com sites may not use JavaScript or other code within the contextual areas of the site, but the use of inline HTML styles allows some limited customization and design elements, so this is good to know for those using that hosted WordPress service. For self-hosted WordPress users, you never know when this type of customization might come in handy. Either way, it is the first step in learning the basics of HTML and CSS.

To start understanding how the style instructions are applied to HTML, here are some terms.

• Site Architecture: Think of HTML as the web page/site architecture, the framework that holds all the graphic and contextual elements. Much like the framework of a house, HTML is the construction material that holds the house up. CSS is the paint.
• Site Presentation: If HTML is the architecture, CSS is the presentation. In the industry, we separate the HTML from the CSS and label them architecture and presentation. CSS is the paint, but more than that, it is the instructions on how the paint is applied, placed, and designed.
• CSS: CSS is an acronym for Cascading Style Sheets. CSS is the presentation language associated with HTML that provides instructions on how the HTML tags are to perform. They can be used to style words, images, and position design and layout elements on a web page.
• CSS Inclusion Methods: CSS rules (instructions) may be found all over a website, styling a unique one-time element or all the various design elements of a website.
  • Inline CSS: In-line or inline CSS are styles that are found within the HTML tag such as <p style="font-size:110%; color: red;">Some text</p>. These should be used rarely as styles should be set in an internal or external style set.
  • Internal CSS: These are CSS instructions set within the web page where they are used. They are found within the head HTML tag of a web page. On WordPress sites, these are often inserted by WordPress Code or Themes as needed, and found on all web pages of the site not just a specific web page, though they might be. The HTML is found in the head section as <style>p {font-size:110%; color: red;}</style>.
  • External CSS: The external CSS is the stylesheet linked to the HTML web page(s). The instructions within the stylesheet dictate the presentation of the web page content.
• HTML Elements: HTML elements are any individual components of a web page. Each element may have attributes specified to define its presentation and placement.
• HTML Attributes: An attribute in an HTML tag is the parameter for that tag setting some presentation value such as the size, width, height, color, or other specification called a value.
• Measurements: The following are measurements used on web pages to set the size of a design element.:
  • PX: The acronym px means pixel, the smallest size measurement on a web page. It is used to measure the height and width of an HTML container, image, font, and many other measures on the web.
  • em: The HTML tag <em> means emphasize or italic in English. An em in CSS represents the unit for the calculated font size. Think of it as a form of percentage. 1em is the base size of the font. 2em is double the current font size.
  • pt: This means point as in the point-size of a font. It is the height measurement of a font.
  • Percentage: The percentage sign % is used to represent a percentage of the base size such as 80% of the content column width or increase the size of a font 120% of the base size.

Styling the HTML Tag

HTML originally held all the presentation instructions. As websites developed, design instructions became redundant as the instructions were the same for all the web pages on the website. If you changed one design instruction on one web page, you’d have to change all of them. For a website with 5 web pages, that was easy. For one with 100 or 1,000 web pages, that’s a lot of work.

Developers came up with the idea of separating the redundant design instructions from the HTML architecture, creating HTML and Cascading Style Sheets (CSS), the two files that come together to create the design of a webpage, and a website, or presentation.

HTML holds the architecture and CSS holds the instructions on how that architecture will look.

We’re going to step back to the old days of HTML and work with directly styling the HTML.

As discussed, an HTML tag consists of block-level and inline-level elements. The block-level elements are also known as containers as they contain the content within them.

The HTML tag elements that set the parameters for how that tag will display are called attributes.

<p><font color="red">Sample text</font></p>

The above HTML tag for paragraph contains an attribute that sets the color as red. The language structure is:

<tag><tag attribute="value">Sample text</tag></tag>

In HTML, the attribute is the property and the value is the parameter setting. In the above case, the attribute is color and the value is red.

Learning HTML Resources

Throughout these tutorials and in the last tutorial in this mini-series on basic HTML and CSS as it applies to WordPress, I will be including some great resources and information on how to learn more. Among these resources and references, you will not find any links to W3Schools.

There is a long history behind this policy. In summary, W3Schools implies it was closely tied to the W3C, which it is not. Compliance with trademark was not accepted and requests to update and fix the inaccuracy of the information at W3Schools was met with silence or resistance. A backlash ensued with the formation of W3Fools. While W3Schools has improved, there are other outstanding resources better suited for anyone learning HTML, CSS, and web standard web design.

Personally and professionally, I still do not recommend their services to students and clients, as well as to you. Please use the Mozilla Developer Network, CSS-Tricks, HTML5 Rocks, and HTML Dog.

The <font> is deprecated but browsers still recognize it, giving me a good example to show you not only how inline styles work with HTML, and how to use them on WordPress.com, but also how to remove the styles for web standard CSS usage.

The font HTML tag offers three attributes:

1. color: This is the color of the font. It maybe set with a word such as red, blue, green, or with a hexadecimal 6 character color code. ColorSchemer is a long time favorite color picker.
2. face: Face is the type face. It is a common web-safe font name or names separated by commas. Upsdell Browser News Fonts and Don’s Tools CSS Font Stack offers wide selections of web safe fonts and the latest information on the status of these fonts across various web browsers and operating systems. A web safe font is one that is found on the majority of computer systems. Fall back fonts are offered just in case.
3. size: This is the size of the font. The values may be numbers 1-7 (1 is smallest), relative values such as +2 or -2 to change the font size from the base font size, points, or pixels.

This is test text.

Using the inline HTML attributes, the above code is:

<p><font color="red" face="Impact, Comic Sans" size="30px">This is 
test text.</font></p>

Add this line to your HTML test file. Click at the beginning of the code in the code box and drag your mouse all the way to the bottom right to select all of the code. Right click and copy or use the shortcut keys for CTRL/CMD+C (Remember CMD is the key for Mac users).

Switch to your test file in the text editor and paste it below the sample paragraph in your test file above the closing </div> tag on its own line. Save the file and display it in the browser to see the effect. It should match the above example in red.

Mozilla Developer Network offers an HTML attribute reference listing the HTML attributes for most of the HTML tags and elements. As you go further with these experiments, consider playing around with these on your test site and in the test web page file.

Let’s turn the attributes into CSS by removing them and placing them in an inline CSS declaration:

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

In the above example, all of the styles are moved to the paragraph HTML tag. The attribute is now style and the styles are set in CSS language.

We’ll cover more about the terminology and format of CSS in the next tutorial. Let’s continue with our experiment.

Add the new HTML to your test file on a new line below the previous paragraph. Save the file and refresh it in the web browser. If it worked, it should look the same as the original attempt.

If you are familiar with HTML and CSS, move on to the next examples. If not, experiment at this point with the attributes. Using ColorSchemer, experiment with different colors. With Upsdell Browser News Fonts, change the font family typeface, and experiment with pixel sizes and the 1-7 +/- sizes such as size="+3" or size="-2". Remember to save the file in the text editor and refresh it in the web browser to see the changes each time.

Creating Text Boxes in HTML and CSS

You’ve been experimenting with a paragraph. Let’s take this up a notch and have you play with a block-level container called a div.

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

Add that on its own line below the paragraphs in your test file, save, and refresh the test file in your web browser. This should look like nothing but plain text.

Let’s add some color.

<div style="color:#6633FF">
This is sample text in a div.</div>

You’ve set the style attribute in the div with the CSS property color and the value as a hexadecimal for a blue color. It should now look like this:

This is sample text in a div.

Let’s add a border around it to give it some visual separation from the rest of the text on your test file web page.

This is sample text in a div.

Copy and paste the code below into your web page test file to create this.

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

Using Deprecated HTML

I would not normally promote nor endorse the usage of non-web standard and deprecated web design practices, but this how you learn and how to work within the limits of WordPress.com. Such deprecated practices may not be necessary on a self-hosted site or for someone using the paid CSS feature on WordPress.com. So I break a few rules here.

The usage of deprecated HTML tags and practices in this tutorial is designed to showcase the possible for both WordPress.com and self-hosted WordPress users as well as to teach what to do and not to do when learning HTML and CSS.

Save the file and preview it in the browser. It should now have a thick green line around the blue words.

Let’s read it like a book.

1. div: The div is opened and wrapped around the words
2. color: The div font is set to a blue color. Remember, color doesn’t change the color of the container but the text only.
3. border-top-width: 4px: The border at the top is set for 4px width. Read on and you will see the right, bottom, and left border width is also set for 4px width.
4. border-top-style: solid: There are many border styles from dotted to dashed. This is set to be solid. Again, read on and you will see the style set for the right, bottom, and left borders.
5. border-top-color: green: Like the previous two border styles, this one colors the border to green, and continues to style each side of the container, right, bottom, and left.

That is a lot of styles. Luckily, there are CSS shorthand properties for things like this, allowing us to condense all these individual styles down to a few keystrokes.

For the border properties, because each side of the container is styled exactly the same, we can condense the above to:

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

Copy and paste that into your HTML test web page, save, and preview. It should look exactly the same as the previous div styles. Nice trick!

Let’s play with this a little more. Let’s make the div narrower on the web page, restricting the width.

This is sample text in a div.

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

How about adding some space around the words in the div container. The spacing is called padding.

This is sample text in a div.

Notice the space inside the box between the words and the border? This is an example of padding. It is the distance set between content within a container and the inside edge of the container.

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

If you have been placing each sample code on its own line in the test file, you will notice that the borders are all crowded against each other. Let’s add some space between them by adding a margin.

This is sample text in a div.

Now you should see a space between the previous element and the new one. This is an example of margins. Margins represent the space from the outside of the container element and other block-level container elements around it. In this case, the div above and the edge of the web page to the left.

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

Let’s experiment with the border before moving on.

As you saw from the above example, border is one of the CSS properties with a shorthand, condensing the redundant content. Let’s expand this container from having the same border on every side to having a different border width on each side.

We use the shorthand for each of the three properties: border-width, border-style, and border-color. Each of the border-width properties have different values.

This is sample text in a div.

This creates almost a shadow box effect.

<div style="width:200px; 
margin: 20px; 
padding: 20px; 
color:#6633FF; 
border-width: 1px 2px 10px 15px; 
border-style: solid; 
border-color: green;">This is 
sample text in a div.</div>

The border-width is set to 1px, 2px, 10px, and 15px. How does the browser know which side belongs to which width?

By default, the CSS shorthand starts at the top and follows a clockwise progression to right, bottom, and left. The top is 1px, the right is 2px, the bottom is 10px, and the 9 o’clock position is held by 15px on the left.

Let’s change the colors of each side of the box using the same clockwise sequence with colors. I’ll use color names to keep this simple.

This is sample text in a div.

<div style="width:200px;
margin: 20px;
padding: 20px;
color:#6633FF;
border-width: 1px 2px 10px 15px;
border-style: solid;
border-color: green yellow black blue;">This is 
sample text in a div.</div>

Let’s go even crazier. Try this experiment with the borders, changing the width.

This is sample text in a div.

An optical illusion is created.

<div style="width:200px;
margin: 20px;
padding: 20px;
color:#6633FF;
border-width: 10px 20px 80px 25px;
border-style: solid;
border-color: green yellow black blue;">This is 
sample text in a div.</div>

Playing with the colors, let’s really make this an optical illusion.

This is sample text in a div.

To create this effect, the sides were made a lighter gray and the top and bottom black. The eye does the rest.

<div style="width:200px;
margin: 20px;
padding: 20px;
color:#6633FF;
border-width: 10px 20px 80px 25px;
border-style: solid;
border-color: #000000 #575757 #000000 #575757;">This is 
sample text in a div.</div>

To clean this up, let’s change the font color and style.

This is sample text in a div.

The font element may also be reduced with the CSS shorthand methods. Here is the full version, followed by the shortened version.

<div style="width:200px;
margin: 20px;
padding: 20px;
color:#6633FF;
border-width: 10px 20px 80px 25px;
border-style: solid;
border-color: #000000 #575757 #000000 #575757;
font-family: Impact, Comic Sans;
font-size: 18px;
color: #333333;">This is 
sample text in a div.</div>

The font-family: Impact, Comic Sans; font-size: 18px; is reduced to font: 18px Impact, Comic Sans;, not a very big change but a few less keystrokes.

<div style="width:200px; 
margin: 20px;
padding: 20px;
color:#6633FF;
border-width: 10px 20px 80px 25px;
border-style: solid;
border-color: #000000 #575757 #000000 #575757;
font: 18px Impact, Comic Sans;
color: #333333;">This is 
sample text in a div.</div>

Experiment on your own before moving onto the next section. Try the following:

• Change border colors
• Change border widths
• Change the width of the div. Consider setting the height and the width.
• Experiment with the font family and type
• Change the font colors
• Change the font size
• Adjust the margins and padding

See what you come up with. It’s a great time to play.

Application of Inline HTML Styles on WordPress.com

In 2007 when WordPress.com had extensive limitations on what you could and could not do on your hosted sites, I did a series called WordPress.com Blog Bling that included many of these techniques for forcing styles upon design elements. One of the most popular was creating pull-quotes or blockquotes with HTML tables called “WordPress.com Blog Bling: Blockquotes and Quotes.” With a little lifting of the restrictions on some HTML tags and styles, I can reproduce some of these effects with better inline HTML and CSS styles.

Argue for your limitations, and sure enough, they’re yours. Richard Bach, from Illusions

The above features HTML tags and attributes in a table, something that should not be done today as tables are for data not designs.

The code looks like this:

<table width="325" border="2" 
bgcolor="white" cellpadding="25" 
cellspacing="15">
<tr><td>
<p><strong><font size="+3" color="purple">Argue</font> 
<font size="-1" color="#993399">for</font> 
<font color="#663399" size="+3">your</font> 
<font size="+4" color="#C247C2">limitations,</font> 
<font size="-2" color="#D175D1">and</font> 
<font size="+1" color="#862D86">sure</font> 
<font size="+2" color="#CC6699">enough,</font> <font size="+3" color="#592D86">they're</font> 
<font size="+4" color="#9966CC">yours.</font></strong></p>
<p><font color="purple"><em>Richard Bach, 
from Illusions</em></font></p>
</td></tr></table>

Using a mix of HTML elements, I can condense this into the following using a div and not a table, making the presentation of the content meet web standards a bit more, though not perfectly, mixing old and new HTML elements:

<div style="width:325px; 
border: 4px white; 
padding: 10px; 
margin: 10px; 
background-color:white;">
<p><strong><font size="+3" color="purple">Argue</font> 
<font size="-1" color="#993399">for</font> 
<font color="#663399" size="+3">your</font> 
<font size="+4" color="#C247C2">limitations,</font> 
<font size="-2" color="#D175D1">and</font> 
<font size="+1" color="#862D86">sure</font> 
<font size="+2" color="#CC6699">enough,</font> 
<font size="+3" color="#592D86">they're</font> 
<font size="+4" color="#9966CC">yours.</font></strong></p>
<p><font color="purple"><em>Richard Bach, 
from Illusions</em></font></p>
</div>

To make the above comply with modern web standards, each font would be changed into a span…and you aren’t ready for that yet. 😀

Let’s simplify this back down to something you can better understand and a technique that might be more applicable to your own site.

Using inline CSS styles, I create the pull-quote boxes you’ve spotted twice so far in this tutorial to highlight specific tips and information you need to know. Here is the secret sauce:

<div style="margin: 2px 0 5px 5px;
padding:0 12px 4px;
background-color:white;
border: 4px solid black;
font-size: 85%;
float:right;
width:30%;">
<h4>Heading Title</h4>

<img src="https://lorelle.files.wordpress.com/2015/01/lorelle-wordpress-school-tips-and-techniques3.gif" alt="Lorelle WordPress School Tips and Techniques Badge." width="125" height="121" class="alignright" />This is the 
text that wraps around the eye-catching badge artwork. All of this is 
wrapped around with a border on the div to highlight it from the rest 
of the post content. 
</div>

I keep the code format stored in my text editor and copy and paste it in when I need to add the tip box, changing the content to meet my needs.

Let’s break this down to help you understand better what I did.

The div is set to the following:

1. Margin: The margin is the distance from the outside of the container element and the other elements on the web page. Since this is aligned to the right on the web page, I do not need a margin to push the div away from the right margin. I wanted it aligned with the right margin’s edge. Whitespace between the top, bottom, and left sides needed to be added. The margins became 2px on the top as this is usually set at the top of a paragraph, zero pixels margin to the right, and 5px spacing on the bottom and left.
2. Padding: I’m using an h4 heading in the div container. By default, the styles for this heading on the WordPress Theme features a margin above the heading, so I set the top to zero, the left and right sides to 12 so there would be whitespace between the border and the content within it, and the bottom at 4px.
3. Background Color: The background color is set to white. This Theme features a gradient background image that fades to white. When this design element is featured within that fade zone, the type is hard to read. The background color removes that issue.
4. Border: A simple black border wraps around the container.
5. Font Size: You’ll learn about CSS inheritance later in this tutorial mini-series, but for now, understand that the h4 and paragraph tags inherit the styles from the rest of the content. I wanted them just a little bit smaller so reduced the font-size for everything within the div by 85%.
6. Float: Float is a CSS property to align a block-level element to the right or left on a web page. When aligning images in WordPress to the right or left, you are using a CSS class with the appropriate float properties. In this case, I almost always have the div float to the right on my web pages.
7. Width: The width of the div is set to 30%. Having it set to a percentage representing a third of the width of the content column allows flexibility for various computer monitor sizes and widths. It changes based upon the screen width.
8. Heading: The h4 heading is used in this example. I could have featured a heading style in bold but I wanted more emphasis on the title and for the style to blend in with the rest of the heading designs on the site. It is just sized a little smaller.
9. Image Tag: The image tag links to the image on my site, sets the height and width of the artwork image, and uses the WordPress image alignment CSS class to align it to the right, allowing the text to wrap around to the left.

Are you starting to see the possibilities? Are you starting to read the code like a book?

These are just some fun experiments and lessons to help you understand better how styles influence the designs of the HTML. If you choose to use any of these on your site, treat them like novelties or spices in a recipe. Too many spoil the dish.

In the next tutorial, we will dive deeper into CSS styles and how to extract them from the HTML into embedded and separate CSS stylesheets.

Assignment

Your assignment is to follow the experiments above and play with them on your test file.

As mentioned earlier, read these styles like a book. Say them out loud as you go through them, naming each element and its values. Think it out.

Tell yourself you wish to create a container featuring a quote with a red and orange border of different sizes in a serif font that is large and stands out against a green background. Then go through the code and make it happen, talking it out as you go.

The more you literally spell it out word by word in your head, the faster this will make sense to you. It will literally become another language as you translate this into div with border colored red and orange and sized 10px and 20px, font: Georgia 20px, background-color: green…

See what you come up with. Come up with something fun, publish it on your test site and share it with us on the G+ post for this assignment in our WordPress School Google+ Community and tell us how you did it. You can find the Inline HTML Assignment and Discussion here. Brag. Show off. Have fun.

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

• Lorelle’s WordPress School Introduction
• Lorelle’s WordPress School Description
• WordPress School Tutorials List
• WordPress School Google+ Community
• WordPress Publishing Checklist
• How to Give Feedback and Criticism

---