Skip navigation

WordPress School: HTML and CSS – Identifying IDs and Classes

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.As we round up the mini-series on HTML and CSS basics as part of the ongoing Lorelle’s WordPress School free online course, and to prepare you for working with WordPress Themes, it is important to understand how to find the right design element to change on a website, specifically within a WordPress Theme.

We’ve been mostly working on a test HTML file to learn the basics of HTML and CSS. In this tutorial, we are going to apply those lessons to WordPress.

If you are just joining us, please catch up by reading the tutorials in this mini-series on HTML and CSS basics so you understand what is being discussed in this tutorial:

CSS Classes and IDs Review

Quote on CSS - CSS isn't always easy to deal with. Depending Upon your can become a nightmare. By Vitalty Friedman.Designing a site doesn’t always start with a fresh clean slate. It often begins with tweaking an existing design, changing that tiny thing that annoys us or that we wish were different in some way, a different color, size, shape, or position.

In this tutorial we are going to look at how to identify and style specific sections and areas of a web page. When you begin to modify an existing WordPress Theme with a Child Theme, finding these HTML and CSS elements are critical. Honestly, it is just one of the aspects of web programming that makes me feel like a detective, a Sherlock Holmes of web design.

In the previous tutorial on CSS positioning, you learned how to set the img HTML tag for images to float to the right or left. If we set all the images on the web page to float to the right, it would force all images to the right within the context of the web page. We only want certain images to float to the right, others to the left, others in the center, and other images exactly where we want them. By assigning them a specific ID or CLASS to identify the image we wish to modify, we can pinpoint where each image should be positioned.

Consider the <h3> HTML heading tag in a WordPress Theme. It may be found in the post content, sidebar widgets, comments, and other areas within a website’s design. If you style all the headings to be the same throughout the entire site, that might be acceptable, but if you want the <h3> tag to look different in the content area than in the sidebar widgets, how would you know which one is which and how would you style it accordingly? Read More »

WordPress School: HTML and CSS Positioning

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In Lorelle’s WordPress School free online course we’ve been exploring HTML and CSS basics to help you prepare for working with WordPress Themes coming soon. The information in these tutorials is essential for the WordPress user to learn for the most simple of tasks, from controlling how content displays in your posts to adding HTML code to WordPress Widgets to tweaking your WordPress Theme, and someday maybe even making your own or at least creating a Child Theme, a design that modifies an existing WordPress Theme.

This tutorial explores CSS positioning, how to put things in their place on a web page, following up on the previous tutorial on the CSS Parent-Child Relationship.

There are many ways to position design elements on a web page. In the previous exercises, we moved the paragraph “down” within its container by adding padding to the inside “space” of the div. Margins and padding move things around and position them within the CSS Box Model, but you have other alternatives for more specific positioning.

Here is our test code for this tutorial:

<div class="position1">
<p>Hello world!</p>

Below is the CSS to add to the head in the styles. In this example, the position of the wrapping DIV around the paragraph is set to absolute 100 pixels from the top left corner down and 80 pixels in from the left edge of the parent container edge. Read More »

WordPress School: HTML and CSS Parent-Child Relationship

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.So far in this mini-series on HTML and CSS for Lorelle’s WordPress School, we’ve covered the basics and gave you a test HTML file to experiment with, explored the basics of HTML tags, inline styles with CSS, HTML embedded styles where the styles are removed from the HTML and placed in a <style> HTML tag in the head of the web page, and today we continue with the experimental HTML file as we explore the parent-child relationship of CSS and introduce you to CSS classes.

Terminology time:

  • CSS Parent-Child Relationship: In CSS, the parent-child relationship is similar to the human version. Supposedly, a parent tells the child what to do and they do it – most of the time. In CSS, there is more hope as the parent design element influences the child elements within it through inheritance.
  • Inheritance: If the styles of a child HTML element are not specified, the element inherits the styles of its parent, the HTML tag, commonly referred to as the container, wrapped around it. For example, if the font-family is set in the <body>, the paragraph HTML tag will inherit the same font unless specifically changed in the styles.
  • CSS ID: In CSS and HTML, the ID is the identifier for that HTML element. It is a unique term and found only once on a web page. On the style sheet, it is recognized with a # in front of the identifier such as #header and #this-one. It may also be used to create jump links within a page or website.
  • CSS Class: A class is an identifier on HTML elements that may be used repeatedly on the same web page. For example, if the design featured multiple h2 headings, by using <h2 class="red">, all the headings with the class “red” feature the instructions for that class name in the styles such as turning the text color red. All other h2 headings are ignored and the styles are not applied. In the CSS style sheet, a class is identified with a period such as .red and .widget.
  • Stylesheet/Style Sheet: The stylesheet/style sheet is the file that holds the CSS instructions separated from the HTML presentation files. It is linked to the HTML web pages using that style sheet. There may be one or many style sheets linked to a single web page as necessary.

Read More »

WordPress School: HTML and CSS Embedded Styles

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.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.

Read More »

WordPress School: HTML Inline Styles

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.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. 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.

Read More »

WordPress School: HTML Tags

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.The last lesson was the HTML and CSS Tutorial, another mini-series on Lorelle’s WordPress School. This is a very basic tutorial on HTML and CSS to prepare you for WordPress site customization and WordPress Themes.

This tutorial in the series will help you understand the basics of an HTML tag, the architectural code wrapped around the content on our web site, styled by the CSS.

According to a definition on Webopedia:

HTML Tag: A command inserted in a document that specifies how the document or a portion of the document should be formatted. Tags are used by format specifications that store documents as text files…to mark a section of a document with a formatting command.

In your word processor, when you make a word or phrase bold, codes are embedded in the document that turn on the bold characteristics, then turn on them off. Same applies to document formats such as the margins, fonts, font sizes, subtitles, and so on. Hidden under the surface of your document are the instructions, little bits of code that set the formatting and positioning of the content within. The “Reveal Codes” feature of the once highly popular and respected word processor, WordPerfect, displayed these codes under the hood for the ultimate control of the user on styling the presentation of the document. Eventually, MS Word added the feature, accessible through the Shift+F1 keyboard shortcut. Check a Word document to see the formatting styles for that document.

Screenshot of WordPerfect Reveal Codes Displays the codes under the document to style the content - Lorelle WordPress School.

A web page is no different. HTML tags hold the content in containers, so to speak, with the tag turned on and off around the content, and there is a set of instructions called styles that tell the code how to appear when viewed in the web browser.

<p>This is a sentence in a paragraph HTML tag with 
a <strong>bold</strong> word.</p>

In this example, a paragraph HTML tag holds a sentence with one word in it set as bold. The paragraph tag opens, the bold tag opens, then closes around the word, then the paragraph tag closes, closing the paragraph. Read More »

WordPress School: HTML and CSS Tutorial

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.Over the past week we’ve been learning about the web browser, your gateway to WordPress and the web. This was a precursor to the next mini-series of tutorials in Lorelle’s WordPress School free online course. We are going to learn HTML and CSS.

Learning WordPress from the inside out means learning the basic fundamentals of HTML and CSS. HTML is the core architecture of the web. It is the framework that holds content and design. WordPress Themes are built on the architecture of HTML, the styles or “paint” of CSS, and the engines of PHP, JavaScript, jQuery, WordPress Template Tags, and other web programming languages.

According to Wikipedia, HTML as created by Berners-Lee and his team was to allow not just text but graphics to be converted into visual or audible content accessible by anyone.

The first publicly available description of HTML was a document called “HTML Tags”, first mentioned on the Internet by Berners-Lee in late 1991. It describes 18 elements comprising the initial, relatively simple design of HTML…

HyperText Markup Language is a markup language that web browsers use to interpret and compose text, images and other material into visual or audible web pages. Default characteristics for every item of HTML markup are defined in the browser, and these characteristics can be altered or enhanced by the web page designer’s additional use of CSS.

HTML links and code in web writing.When it comes to learning HTML, treat it like learning a language. Okay, not the whole language. This isn’t an HTML course. We are going to learn the basics to give you a fundamental understanding of how a web page is formed and how to manipulate some basic HTML and CSS to arrange and style the end results. Consider it like learning a vacation language. You will learn just enough to get you through the adventure.

By the time you complete this series of tutorials, you should be able to add inline styles to WordPress posts and Pages, add HTML to the Text Widget and other areas of your site, and tweak your WordPress Theme. When we get to learning more about WordPress Themes, you will be able to speak the lingo and communicate with the natives.

As you go through these next tutorials, work hard to visualize what you are doing, not just do it. HTML works best when you can see what it looks like in your mind as you work on the code because most of the time you won’t be able to see it until you generate the web page in the browser. Working with HTML requires a lot of imagination, which can make it great fun for many and frustration for a few. Breathe through it. I know you can do it. Read More »

WordPress School: Bookmarklets and User Scripts

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In the last tutorial in Lorelle’s WordPress School free online course covering the web browser, your gateway to the web and WordPress, we covered bookmarks and how to save a web page for later access and reading. In this tutorial, we take bookmarks a little further by exploring browser bookmarklets and user scripts, small but powerful JavaScript programs to extend the functionality of your web browser on the web and with WordPress.

I highly recommend you read the previous tutorial before going forward to learn the basic terminology and functionality of bookmarks and using the bookmark bar.

Browser Bookmarklets

A bookmarklet is a JavaScript saved as a bookmarklet to your bookmark bar or in your bookmark manager. There are bookmarklets you click to activate and others that will activate automatically when you load the web page or website associated with the bookmarklet’s code.

Think of bookmarklets as mini-programs. They contain instructions to take action on the web page you are viewing. For example, if you are using the bookmarklet to send a web page to your Kindle app for reading later, you must click the bookmarklet name on the bookmark toolbar to initiate the action to save the web page in a format and send it from the browser to your Kindle. There are several steps in the process of that sending, each controlled by the program code in the bookmarklet. To do it yourself would involve those steps. Letting the bookmarklet do it for you saves you those steps.

Like bookmarks, bookmarklets can get cumbersome to keep organized, so take care in placing them where you can find them and consider creating folders for them, which may be added to the bookmark bar for drop down selections.

WordPress Press It BookmarkletWhile there are thousands of bookmarklets out there, let’s focus on ones that will help you with WordPress, research and writing for the web, and related topics. Then we will look at user scripts, bookmarklets managed with Greasemonkey or Tampermonkey. While they are basically similar, user scripts require the code libraries and functionality of a userscript manager and go beyond the actions of bookmarklets.

The first and most powerful bookmarklet for WordPress was Press It. Added to your browser bookmarks, you’d select the text on a web page, click the bookmarklet, and it would generate a simplified version of the WordPress Post interface with the selected text in the awaiting post along with a link to the source, ready and waiting for you to add your words. With the ever-changing interface and improvements in WordPress, this was changed to the Press This bookmarklet. Read More »

WordPress School: Week 10

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.This past week on Lorelle’s WordPress School the focus was on the web browser, helping you to learn the basics of the most important tool in your arsenal for working with WordPress. Like any tool, the more you learn about how it works, the better you work with it.

I’ve one more web browser post and then we are moving into some basic HTML and CSS, the programming language that instructs a web browser on how to display a website. With the basic elements of web design programming under your belt, we can move forward with confidence through the rest of the course as we move into site customization and WordPress Themes and Plugins.

This week 10 – wow! A great landmark week!

Want to Join Us?

Lorelle WordPress School Tips and Techniques Badge.While this course started the first of February, it is a year-long course designed to go at your own speed. Just because a few people started from the beginning, you are welcome to join at any time.

You do not have to rush to catch up. As one of the participants explained, “you will be ahead of us because you will learn from our mistakes.”

When you complete an assignment, you may share the link from test site in the WordPress School Google+ Community post for that assignment. No matter how far along the others are, and everyone is moving at a different pace, they will be there to cheer you on and help you through the process, as will I.

Come join us by introducing yourself to the other participants and tell us why you are here. We love meeting new folks!

This week is the start of my WordPress college course at Clark College in Vancouver, Washington. CTEC 160 is packed with some amazing people eager to learn web publishing, social media, web design, web development, and web programming. There are some journalism and business tech students in there, too, making for a beautiful mix. They represent the quilt that is the WordPress Community, people from all walks and ages of live brought together with a common interest.

For some, this is a required course in their degree. For others, they are in the class by choice. For you, it is all about choice. The choice to join us, the choice to participate, the choice to use this knowledge on your own site or possibly for another such as a non-profit or employer.

I know what pushes my students forward: grades. Without the grade, they can’t take another step forward on the chess game that is their educational life and career.

What is it that pushes you forward in this process? I’m not hounding you to submit assignments on G+ or in the comments below. There is no grade here. No judgment. No pressure. What keeps you going?

This I know. Whatever it is that keeps you going is what keeps you going in life. It is the passion for living and learning. It is the desire to be better. It is the need to learn how to do it yourself. It is the desire to see things through.

Or maybe a friend or relative is pushing you to do this.

Whatever the reason, keep going. The lessons you learn in this course the most have nothing to do with WordPress. They have to do with you.

Whatever gets in your way has been there before. Whatever pushes you forward has always been there. If you wish to change the obstacles and focus more on the pushes, that is up to you.

Either way, you are welcome here. That is part of the magic of the WordPress Community. We take all, deny few, accept the unacceptable, push out the harmers, and cherish the relationships the find us on our unusual journey through a virtual world.

The WordPress School Google+ Community Discussions and Assignment

Each week, our WordPress School Google+ Community features additional discussions and assignments helping you learn more about how WordPress works and all the ways to use WordPress. This post’s G+ discussion is “Week 10 Summary: Web Browser.” Come join us.

Current additional assignments and discussions held in the Google+ Community include:

If you are new to the Community, join us by by responding to the assignment posts rather than starting your own thread on the assignment discussion. This keeps the discussions together so we can learn from each other as we work on each assignment.

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

Subscribe to Lorelle on WordPress. Feed on Lorelle on WordPress Follow on Twitter. Give and Donate to Lorelle VanFossen of Lorelle on WordPress.

WordPress School: Bookmarks

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.This week on Lorelle’s WordPress School free online course we’ve been covering the web browser, your gateway to the web and WordPress. So far in this Web Browser Guide series we’ve covered some web browser history, keyboard and mouse shortcuts, browser tabs, and search operators and shortcuts to help you find WordPress help as well as research topics and citations for your WordPress site.

This tutorial and the next are related. They are about how to:

  1. Preserve web pages for future access or reading
  2. Use browser scripts as bookmarklets and user scripts

What relates the two? Both may use the browser bookmark bar, the area where you may store information and browser scripts to improve your web browsing experience.

Here are some terms to help you get started with these two tutorials:

  • Bookmark: A bookmark is a saved web page. The address is saved in your browser’s Bookmark Manager. If desired, bookmarks may be sorted into folders or groups and subgroups to organize them and make them easier to find. You may also control how and where they appear on your bookmark bar or menu in your browser, bringing one click access to the bookmarks.
  • Bookmark Bar: The bookmark bar is a menu under the address bar in your web browser with saved bookmarks. It may also contain JavaScript for browser-related actions.
  • Send To: Developed even before mobile, the sendto function found in many computers and browsers is the ability to send a web page to another location. The location could be to send the web page from Firefox to Internet Explorer to view how the web page looks in the different browsers. It could be to send the web page link by email, to your phone, from your phone to your computer, to your tablet, and to social media accounts. You may also send the web page to various services and apps for storing for later access and reading.
  • Browser Extension or Add-on: Two synonymous names, extensions and browser add-ons extend the functionality of the web browser, adding features and functions based upon your needs and goals. They are similar to the concept of WordPress Plugins.
  • JavaScript: JavaScript is an object-oriented computer programming language most commonly used on the web to create interactive effects and actions. JavaScript may be saved as a bookmark on the bookmark bar for actions related to the web page you are viewing or open other web pages and web actions.
  • Bookmarklet: A bookmarklet is a JavaScript script saved as a bookmark to the bookmark bar. When clicked, it initiates an action typically associated with the web page currently loaded in the browser screen.
  • Userscript: A userscript/user script is also known as a browser extension or add-on, a written and publicly shared JavaScript presented for easy adding to the web browser. The most common collections and web userscript extensions are used in combination with the userscript managers Greasemonkey for Firefox and Tampermonkey for Chrome.

Let’s start simple with bookmarks and build our way up through the other web browser features. Read More »

Go Naked: CSS Naked Day April 9

In 2006, the First Annual CSS Naked Day was held, a tribute to honor web designers, the painters of our websites. I celebrate the holiday most years on this site. Every year on April 9, web developers, designers, and those honoring web design and programming celebrate by removing the styles on our sites for 24 hours.

By turning off the CSS, the design styles of my website, it is stripped down to the HTML architecture. It will look similar to what websites resembled in the earliest days of the web, bare bones architecture holding the content and little else.

The second year, 2007, mine and thousands of other sites disrobed to honor CSS Naked Day. By 2008, there were hundreds of thousands of sites participating.

In 2008, this site went naked and I explained:

I honor the web designers who “walk the walk” and volunteer their time to ensure those standards grow with the web not against. I honor web browser developers who understand the need for standards and thus work with them, also not against them, for our web browsing pleasure, helping designers design well and avoid all the hacks and customizations on a per-browser basis.

I honor the founders of the web, the great minds who looked into the future and said, “Everyone must have access to this.” They meant everyone. Every person on any computer using any method to access the web. In their minds, they wanted to have people on different computer operating systems be able to share data. Today, this has stretched to include access for the blind and visually impaired, disabled, deaf, Mac user, Windows user, Linus user, cell phone, web TV, big screen, little screen, all the various methods the web is accessed so the data can flow both ways with ease.

I also honor those who give so much of their creativity to the WordPress Community, while setting a standard in web design around the world. Thank you to all who understand that a free WordPress Theme is a resume. A business card. A portfolio of your work. By giving, you are showing the world what you are capable of. It’s a way to give back to the WordPress Community which gives so much of its time to volunteering to support WordPress through their work on WordPress Plugins, donating and writing articles for the WordPress Codex, the online manual for WordPress Users, and volunteering their time in the Forums and WordPress Support Forums to help others.

For those who make a living off of the free WordPress blogging platform, I honor you for giving back to that which helps you pay your rent or mortgage. The WordPress Community is a fantastic free school of education for coders, programmers, designers, writers, and hackers. Thank you for volunteering your time and skills towards the improvement of WordPress and WordPress development.

My causes at the time was to break down one of the last barriers on the web: language. That is still a rousing cry of mine, but we are closer than every to being able to sit in our homes or offices in our language and read the words of others written in their language and translated instantly into ours.

Google Chrome has translation built into their browser. There are Firefox extensions that provide similar translation options, but it requires manual action rather than an integrated, seamless experience.

In addition to honoring the designers who make our sites look beautiful and those behind web standards and laws that ensure the web remains open and accessible to all, in spite of narrow-minded governments, politicians, and corporations determined to control such access and transparency, let’s make the web truly open and accessible to all through browser-activated translation.

How to Go Naked on CSS Naked Day April 9

If you would like to join me naked on the web, here are the instructions.

First, write and publish a post warning people that you are changing your WordPress Theme to go naked for CSS Naked Day. The web is important to all of us, and the design of the web and our website is critical to our needs as well as the needs of our readers and visitors, helping to visually direct them to the most critical content on the site. Take a stand and tell the world why you think it is important to stand naked for 24 hours to remind us how important access to the web is, and how important this cause is to you.

Please include a link to the original post by Dustin Diaz and this and any other explanations of the annual event. Jens Oliver Meiert sppears to have taken over the reigns from Dustin to keep the annual event alive. There is also a CSS Naked Day Google Group you can join to stay updated.

  • Not Premium: Unfortunately, unless you have purchased the Premium package for Custom CSS, your option is to switch to a minimalist WordPress Theme and not customize it in any way, just strip it down to the barest essentials. Be sure to remove the header art and set it to just text for the site title, and remove all background color or set it to white. I recommend the following WordPress Themes from the Free Themes Directory. They are still styled, and a bit minimalist, but could be a dramatic change from your current Theme:
  • Premium: If you have the CSS Extra as part of the Premium services on, do the following, taking notes on everything you do as you go:
    1. Go to WP-Admin > Themes > Customization > CSS
    2. Select all and copy or cut the CSS instructions
    3. Paste them into a TEXT EDITOR and save the file where you can find it within 24 hours or so
    4. Delete all of the styles in the CSS form and hit SAVE AND PUBLISH, and your site should be stripped bare of custom styles set by the CSS
    5. Go to the Header, Colors, Background, and other Theme settings and set them to the default or blank, taking notes on the changes you’ve made, and hit SAVE AND PUBLISH. This should reset your Theme back to the basics if the CSS styles didn’t.
    6. 24 hours later, follow your notes and restore the header, background, colors, etc., and the CSS file, and hit SAVE AND PUBLISH. Your site should be restored. No widgets and content customization should be impacted.
  • Self-hosted or Managed WordPress: There is a CSS Naked Day WordPress Plugin by Aja Lapus and other manual techniques, including the basics:
    1. Go to the CSS file for your active WordPress Theme through WordPress. Copy and save the CSS instructions and delete them from the file so it is empty, and save it.
    2. Or access your site through FTP and rename your stylesheet for the active Theme from styles.css to styles.bak. If you are using a Child Theme, do the same with the parent Theme if the styles are not cleanly removed from the site. Rename them back when the event is over.
    3. Or use one of the blank WordPress Themes created just for the event.

Consider joining me to honor the power of Cascading Style Sheets and the visual illusion of the web, as well as the tremendous work web designers and developers do to make our web experience easier.

Subscribe to Lorelle on WordPress. Feed on Lorelle on WordPress Follow on Twitter. Give and Donate to Lorelle VanFossen of Lorelle on WordPress.

WordPress School: Web Browsers and The Search

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.Search is used in WordPress for many different purposes as you prepare, develop, implement, and launch your website, and as you continue to maintain and publish on the site. This tutorial will help you understand how to search within a web page with the web browser, search within a WordPress site, and provide helpful tips on how to search the web in general to help you with your WordPress site.

In Lorelle’s WordPress School, please remember that the underlying motto I keep in mind as I present each of these tutorials is how to make your life simpler, faster, and easier when it comes to WordPress, and that spill out into everything you do on the web. Finding content to blog about on your WordPress site is a part of your web experience as well. Anything you find on the web could be a source of inspiration. How you move it from the source of inspiration to a WordPress post is a part of this topic of how to search within the browser and the web.

Another part of searching on the web is saving what you find for later. While it is nice to assume we can act and respond to everything we discover through our web interactions, some things must be set aside for later review. Some discoveries also take a while to percolate in your brain to become content of value. I’ll cover a little of that in this tutorial as well.

We begin with some basic search techniques, some you are probably familiar with, and some that might be new to you. Read More »

WordPress School: Browser Tabs

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In my WordPress college courses, we make it a habit to have a minimum of four tabs open in the web browser before class starts, ready to start jumping into WordPress. I equate this to having my notebook of paper and pen ready to go when my teachers started teaching in school. The three tabs are:

  1. Email
  2. Class Notes
  3. WordPress site backend/Admin
  4. WordPress test site front end

Depending upon the exercises in the class, additional tabs may be opened for quick access to the information they need to complete the tasks.

For those working on their own laptops, and for you, this process will be even easier and faster by learning about how to pin tabs to preserve them from session to sessions, and how to customize the browser to restore the tabs open during your last session.

In this tutorial on the web browser and WordPress in Lorelle’s WordPress School free online course, we will explore the power of browser tabs, one of the greatest feature inventions in the history of the web browser.

What are Browser Tabs?

Originally, if you viewed more than one web page at a time, more than one browser application program had to be running. That ability is still alive and it is referred to as opening a web page in a new window.

What this meant was that you have two full versions of the program running at the same time, or three, or four, or five, or ten, and each one consumed massive resources on the computer. For the user, it meant playing hide and seek with all those open windows, not sure which one you’d just been to and which one you needed.

Instead of opening the web page in a new window, browser tabs meant you could open a web page in a new tab within the program, not start another version of the program. Tabs had order in a lineal fashion, left to right, oldest to youngest opened. It also gave us the ability to easily open, and load web pages in the background and continue reading where we were on the first web page, making our browsing, or surfing as it was originally called, experience faster with less wait times and less burden on our computers.

Screenshot of Browsers - Browser Tabs in Firefox - Lorelle WordPress School.

With two tabs next to each other, it took little or not time for most of us to develop a two tab preview method for working with WordPress, again, saving us time on the wait for a web page to reload and all the opening and closing of web pages as we move around WordPress. Read More »

WordPress School: Web Browser Shortcuts

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In this section of Lorelle’s WordPress School free online course we are exploring the web browser, our gateway to the web, and how it impacts our use of WordPress.

In this tutorial you are going to learn some very basic features and functions of the web browser:

While this may seem academic for most of you, I’m always surprised at how few students and clients of mine know how to find the address of a website to copy or change, don’t know how to right click or even that this is an option on a mouse, nor how to use the most simple of keyboard shortcuts that are universal across almost all software, online and off.

There is no shame in not knowing, and now it is time to learn as these are browser features and functions you will use every day with WordPress.

Here are a few terms and web browser features I will be referring to during these tutorials.

  • Screen: While WordPress refers to each of the Administration area interface as Screens, when I refer to a screen in these tutorials I mean the screen of your computer.
  • Window: Software works in windows, even if you are not using Microsoft Windows. They are the interface windows for each program. If you have Microsoft Word open, it would be open in a window. If you have Firefox open, it would be open in its own window. You may have multiple programs open at the same time, each one in a window, and some programs will allow you to open it multiple times, each one in a separate window. Think of windows as sheets of paper on your desk. The page you are reading is on top, but the others are sitting there waiting for you to read. Just switch to the page to bring it to the front to work on that page, and the others will slip behind. There is no need to file each page away every time you switch to another, then dig it out when you need it a minute later. That wouldn’t be useful nor efficient. Leave the windows open you need. Your computer can take it. It’s designed to do so. It hurts nothing and makes your computer experience faster and more enjoyable.
  • Browser Tabs: A browser tab is a “window” within a web browser that allows you to have multiple web pages open within a single window of the application. They are typically featured at the top under the address bar.
  • Address Bar: The area at the top of the browser window with the address of the web page you are viewing.
  • Browser Menu: The browser menu is the access area to change the browser’s settings and use features and functions of the program. Many web browsers are minimizing the control areas of their screens, removing the standardized File, Edit, View, Help, etc., menu options from the top of the window to a three bar drop down menu. Click it to access the menu options.

Read More »

WordPress School: Web Browsers

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.Do you realize we spend more time talking about the web then understanding how the main tool we use to access the web works? I think we take the web browser for granted.

Without it, you wouldn’t be able to watch all those YouTube videos. You wouldn’t be able to let the world know what you had to eat for lunch on Facebook, or tweet out a hashtag for the latest global silliness. You wouldn’t be able to experience Caterday every weekend. You wouldn’t be able to file your taxes online, find a new home, look for a job, take classes, get a map to a location, or access your email. You wouldn’t be able to hangout on Google Hangouts or Skype, Jabber, or Viber with friends and family around the world. You wouldn’t be able to “google it” to find the answer to the question. You also wouldn’t be able to blog.

The web browser is our gateway to the web, the door through which we virtually walk to discover the world around us.

Many say the web is the great democratizer, allowing anyone with an Internet connection access to the world’s collective knowledge. I say it is the web browser. Without it, that access would be constrained to email or code based requests to databases.

The web browser is a graphical interface on the world of the web, allowing us to see and experience the data. And it is all data, a collection of pixels displaying fonts, colors, images, video, and the web browser converts it into a readable and accessible format for the human experience.

Browsers - Pixshark - Web Browser Neutral or Chaotic

Web Browsers as dictated by the Dungeon and Dragons’ Alignment Theory. Credit: Slashgear.

Web Browsers Translate the Virtual and Digital to Readable Content

The purpose of Lorelle’s WordPress School is to teach you WordPress from the inside out. We’ve spent the first part of this educational series teaching you the basics of WordPress, helping you understand how the content features work, publishing posts, styling and structuring those pots, creating links, adding images, video, and starting to customize the look and feel of your site.

Why are the words here italic? How does each word or letter change from the normal font to the italic emphasis?

The web designer or developer would tell you that it is because the words are wrapped with an HTML tag called <em> (formerly <i>). They’d explain how the CSS sets the style for how the HTML tag changes the font to slanted. That’s true, but there is so much more to it. Read More »