Build Your Own Business Website header image

HTML

How to Create and Style HTML Boxes in Genesis

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

In this session we demonstrate how to create and style HTML boxes in Genesis using the BYOB Genesis Child Theme Editor plugin. We show where to write CSS and demonstrate how to style the child theme’s appearance and make it responsive. Video Transcript Member: I'll get right to my question which is in the forums

How to Style HTML Links as Buttons

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we show how to style HTML links as buttons by creating the button and then customizing it in Custom CSS. Member: I’ve been playing around with some buttons on the site, I’m not sure I were to use buttons or a slider. Rick: Okay. Member: With the buttons, they’re basically images inside

Introduction to HTML for WordPress & Genesis 2 Users – Part 16 – Create a Button for a Link

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

There's one last thing in this Introduction to HTML for WordPress and Genesis 2 Users seminar that I want to do with these testimonial boxes and that is to style a link tag here. So far we’ve added structural HTML to them and structural CSS to style them. Now let’s add a link tag to

Introduction to HTML for WordPress & Genesis 2 Users – Part 15 – Using Structural CSS to Style Structural HTML Elements

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

So we’ve created these testimonial boxes using structural HTML and we’ve discuss some issues that arose like clearing floats. But now we need to work on styling these testimonial boxes with CSS. I'm going to get rid of that blue text in the first place by deleting this .entry-content color:blue. Save that custom CSS. Then

Introduction to HTML for WordPress & Genesis 2 Users – Part 14 – Using Structural HTML in a Post or Page

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to - ,

Next in this Introduction to HTML in WordPress and Genesis 2 seminar, what we're going to take a look at is using structural HTML in a post or a page. Let’s come over here to the structural HTML page and let's edit this page. What we're going to do is insert some images into this,

Introduction to HTML for WordPress & Genesis 2 Users – Part 12 – Styling Lists in Genesis 2 Using CSS

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to - ,

Now that you’ve got the basics of how to style text and fonts with CSS, the next thing we're going to do is work on styling lists in Genesis 2. We're going to go over to w3schools and then to Learn CSS. Scroll down and look for lists, styling lists and now we have some

Introduction to HTML for WordPress & Genesis 2 Users – Part 11 – How the Font Got its Color

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

We’ve begun the conversation about how to find the correct selector for your CSS rule and now we’re going to delve into that further while talking about how the font got its color. So this is a continuation of the video Styling Text with CSS in Genesis 2. We're going to start that off by

Introduction to HTML for WordPress & Genesis 2 Users – Part 10 – Styling Text with CSS Genesis 2

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

We’ve talked about styling text with inline styles and now it’s time to talk about styling text with CSS in WordPress and Genesis 2 as part of this Introduction to HTML for WordPress and Genesis 2 Users seminar. So really, any conversation like this begins with what is CSS? CSS is a language for defining

Introduction to HTML for WordPress & Genesis 2 Users – Part 9 – Styling Text with Inline Styles

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

Next in this Introduction to using HTML in WordPress and Genesis 2 seminar, we're going to discuss styling text using inline styles. There are good ways and bad ways to use inline styles for customizing text. I demonstrated a bad way earlier with the span tag that had the color in it so now I

Introduction to HTML for WordPress & Genesis 2 Users – Part 8 – Using Images in HTML

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

Next in this Introduction to HTML for WordPress and Genesis 2 we’re going to talk about using images. You're already familiar with inserting images in HTML and images are a very important part of what you’ll be learning here. I'm going to place an image in here at the beginning of this text. We'll just

Introduction to HTML for WordPress & Genesis 2 Users – Part 7 – Creating Links in HTML

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

Now that we’ve talked about creating lists in HTML, the next thing we're going to talk about is creating links in HTML. Obviously, links are fairly easy to create inside the visual editor. That plus no typos is another reason why I like using the visual editor. So let’s create links and talk about what

Introduction to HTML for WordPress & Genesis 2 Users – Part 6 – Creating Lists in HTML

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

The next thing we're going to talk about in this Introduction to HTML for WordPress and Genesis 2 Users seminar is creating a lists in HTML. Let’s begin in our visual editor where I have plenty of text that could be turned into lists. I'm going to come along and add an unordered list. Item

Introduction to HTML for WordPress & Genesis 2 Users – Part 4 – HTML in the WordPress Text Editor

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

Next in this Introduction to HTML in WordPress and Genesis 2 seminar we're going to talk about HTML in the WordPress text editor. Let’s go over to the Headings & Lists page here and we'll begin by editing a page so we can work with the text editor. We’ll start off in our visual editor.

Introduction to HTML for WordPress & Genesis 2 Users – Part 3 – HTML Tags and the Structure of an HTML Document

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

Now that you’ve got an understanding of what HTML is and the tools we’ll be using to help you learn HTML, the next thing we're going to talk about are the actual HTML tags and the structure of an HTML document. Now, there's a bunch of this HTML information that we're going to talk about

Introduction to HTML for WordPress & Genesis 2 Users – Part 1 – How to Learn HTML for WordPress

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to - ,

Good morning everybody and welcome to this special seminar on an Introduction to HTML for WordPress and Genesis 2 Users. This is a true introduction to HTML. We're going to start at the very beginning and we'll be working our way through the process. This seminar assumes that you don't know anything about HTML. I’m

Introduction to HTML for WordPress & Genesis 2 Users

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to - ,

WordPress is great because it doesn't force you to learn HTML to use it. However, many folks find that not knowing HTML places limitations on what they can do. Unfortunately learning HTML can be an arduous process, especially because much of what you would typically learn isn't relevant in WordPress. This seminar bridges the gap between learning HTML and leaning HTML that will be useful to you as a WordPress (and Genesis 2) user.

Introduction to HTML for WordPress & Genesis 2 Users – Part 5 – Headings and other HTML Text Elements

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to - ,

Now that we’ve discussed how the WordPress Text Editor works in the context of using HTML, we’re going to move on to using headings and other HTML text elements. Let’s begin in the visual view. I'm just going to break this content up into individual paragraphs and assign some heading. H3, this is an h4

Introduction to HTML for WordPress & Thesis 2.1 Users – Part 17 – Styling Text with a Span Tag

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

To continue our styling here of of button link we could come back over and let's add that span. Let's say, span class="learn-more", update it and then reload. So you can see how that span class then gets applied to this style. Now, obviously this isn't an application that you would use that in but

Introduction to HTML for WordPress & Thesis 2.1 Users – Part 16 – Create a Button for a Link

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to - ,

The last thing I want to do in this introduction to HTML for WordPress and Thesis Users seminar is to create a button out of a link. The way that we're going to do that is to turn this into a link. So I'm going to come over to this, click the link button, let's

Introduction to HTML for WordPress & Thesis 2.1 Users – Part 15 – Using Structural CSS to Style Structural HTML Elements

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

Now that we’ve discussed what structural HTML is and we’ve created these Testimonial boxes using structural HTML, this gives us something to style and we're going to start off by styling the box itself. We come along here and we'll say .testimonial and we'll say background-color. Let's give it that light grey, #efefef color, background