Live Blog: HTML, CSS, and Other Code Bloggers Should Know

This session was captured by Katherine Holmes from It Sux To Be Fat, a weight loss blog, featuring two sisters trying to lose weight and live a healthy lifestyle. Follow ItSuxToBeFat on Facebook, Instagram, and Twitter.

HTML, CSS, and Other Code Bloggers should know was presented by Diana Stewart.  Diana dabbles in blogging, photography, and recipe creation, among other things. She works 9-to-5 as an IT consultant and teaches Zumba after hours for fun.  She also runs two blogs – The Chic Life (a healthy lifestyle blog) and Diana Starts(a technology-focused blog). Diana strives to stay true to her motto — Eat Well. Sweat Happy. Live Chic.

You can find Diana on thechiclife.com, dianastarts.com, Twitter, Instagram and Facebook.

Diana did a quick poll and asked how many have actually looked at the code of their blog.

This class was for beginners.  She is breaking everything down for people with zero experience.  She was here to help us learn how to read it and make minor updates.

She is not a developer…If she can do this, you can too!

Three things you will know by the end of the session:

1. Read your blog’s HTML and CSS
2. Make minor edits to your blog’s HTML and CSS
3. Fish for more HTML and CSS awesomeness

Theme Tips:
Don’t make things too hard on yourself. There are tons of resources out there for you to use.  Websites have come a long way. There are so many people out there making great themes. Use them! When trying to learn more about your code, look at the “Code View” and see how the editor is applying the code to what you have written.

Themes are like blogs. Like running blogs. It all comes down to style and preferences.

How HTML and CSS work together. HTML is content and CSS is the presentation. They share.

HTML – Overview (When reading your site’s code)

View source code of your site to see the code.
There is a head section at the top and a body section at the bottom.

The HTML head is where you put information that is useful for that page. You can put information about that page (meta info, etc). You can put resources in there (Javascript,etc.), Links to external resources (style sheets, etc.)
Tags here are not displayed in the blog. You do not edit here when editing your post.

The HTML body is not just your post. It is everything that will be displayed on your blog. It will have your header, post, footer, sidebars, etc. You may only see a portion in your blog’s editor. This is where you primarily work.

HTML Tags – The foundation of HTML. It is made up of markup tags. You can identify them because they have brackets – <p>; <br>; <div>

W3schools.com has a whole page of tags. You can learn more about the tags there.

Tags tell the site what to do with your content. Add a link so put a < tag. Your code is read character by character. When it sees a bracket, it says, “Ah-hah!” This is the start of a HTML tag. Characters are very important when editing.  Be careful of unexpected characters because it can mess up your site.  As the browser reads your code, it figures out what it is doing so it is very important that you use the correct code.

HTML terminology – As you are troubleshooting it is helpful to know terminology. Elements are the start of your tag to the very end. Attribute is always in the start tag. In the attribute is a name and a value.

Start and End Tags are very important. You need to make sure you have an end tag. You have to tell the browser when to start and stop telling the information. An empty tag is when you don’t have an end tag.

You always want to make sure if you have a start tag, you have an end tag. Always check to make sure you have both.

• Question was asked if there is something that doesn’t require an end tag? She replied that there are some that don’t require it but ere on the side of caution and apply an end tag.
• She was asked to compare the /P and the /Div Code. Your browser is stupid and you have to tell it what to do. If you don’t tell it the right thing, it will do whatever you tell it to do. If your missing the correct tag, it can mess up your site. Usually they use the /div to say what is a side bar and what is the body of your site.
• Someone asked what a /div tag was and she said it is used for formatting. It stands for “Division” and is usually used to tell how the blocks of information will be displayed.

Tags are read left to right. The link will be displayed on the text until the end tag is read.

Tag Nesting is very important. Tag nesting should go inside to outside.

HTML to know – Five HTML tags to know.

#1 – P – Paragraph – One of the most common tags. The CSS is usually applied to the P tag. Sometimes when you are typing and you enter and it puts too much white space, you want to add BR to lessen the white space.

#2 – Formatting – Bold, Underline, Italic. Be careful with these because if you don’t put the end tag on BOLD, all of your writing will be bolded. Sometimes you might see the word STRONG instead of Bold. You need to be careful and stay up to date on HTML and CSS because they are changing quickly.  Other tags may be used by your blog tool or theme – follow the theme to stay consistent.

#3 – Link –

Target=”_blank” will open your link in a new window, otherwise it will open in the same window. Whatever is in between the start and end tag will display.  Target attribute tells how to open the link.

#4 Image – This is the path to the image on the server. This tells the browser when it sees that tag to go and get the image and put it into the website. The alt tag is really important. Pinterest grabs your text from the alt tag. An attendee told about how Alt text will also help people who are sight impaired because they can know what your pictures are.
Alt tags are important for SEO.
She is constantly making sure her alt tags are correct.
An attendee also brought up changing dimensions of images and when changing them, make sure they are proportional to the original size. Another tip was to size it outside the webpage and then re-upload it so it doesn’t hurt your load time and doesn’t take up so much space.
She reminded everyone to make sure they are constantly backing up their site. Don’t depend on your hosting service.

#5 Heading – Usually site titles, post titles, sidebar titles, etc. They go h1 to h6.  Use the elements that are there for you because it is a lot of work to do it manually.

HTML Comments – <!–> This means comment. Coders use this to make your code more readable. When you are editing code and you don’t want to delete something, just put a comment around it. You can make a change without deleting something. It will let you check to make sure you are making the right change.

Diana then asked for 7 volunteers – They all had a piece of HTML code and they had to put the code in order from left to right.

CSS Overview (Cascading Style Sheet)

CSS is:

• easier design and maintenance
• used for formatting
• used for positioning
• lower case
• read left to right and top down.

Cascading Style Sheet varies extremely by the designer and there is a ton of variety in CSS.  You want to look at what your designer has done and what their style is. You want to take what they are doing and make minor updates.

CSS Terminology

CSS Selectors have specific declaration options. Only certain options are allowed. Check out the w3schools website because they have CSS as well as HTML.

Curly braces are really important because it shows the start and stop for that group.

How does HTML know to use CSS? If you don’t give the HTML the CSS, it is like giving a chef a bunch of ingredients without a recipe. If you want a certain type of chili, you have to give the chef a recipe. The browser is stupid and you have to tell it what to do.

There are three ways to link the HTML and CSS. Inline, Internal, and External. External is the most common for blogs.

There are three selector types for CSS and they are easy to identify – Body, a, h1

The class name has a period and the ID has a hashtag. The ID is only used once. Classes are used multiple times. Those are made up by your developer or designer. Generally they mean something.

CSS Selectors to know
#1 – Body – Typically controls many important blog styles. You should be able to look into the code and see what the desinger has done.
#2 Headings – You can control font colors, convert text to all upper case, Site Title, etc. It goes h1-h6. When you download a theme, and you want to change a color, you can do that with this.
A question was asked how to change a specific color on her blog and Diane said it was probably an image issue.
#3 Link – there are 4 states for a link. Link – when you go there the first time; Visited – when you have already clicked the link; Hover – On mouse hover; Active – when you click on it

CSS Cascading Order – The information in the CSS tags “Cascades.” Whatever is closest to the HTML will be applied the most. They go in order of priority: Inline, Internal and External. The closest to HTML the higher the priority.

CSS also has comments: /* or */

She did a quick demo to show some of the code she just talked about.

In Chrome, you can highlight some text, right click and choose Inspect Element and it will show you the code for whatever you highlighted. When you are trying to troubleshoot, this is useful to find what you are looking for and save some time.

When troubleshooting, make sure you don’t have extra tags, are missing characters or check the inspect element.
When editing the code, make sure you always back up first. Don’t jump without a parachute. You always want to be able to go back to what you had before.

Explore your current code. Go to View Source or View-Developer-View Source to see your webpage’s code.
If you like something on another blog, you can look at their View Source and see what they are using.

When in doubt, Google It.
Go to W3Schools.com
Learn Online via:

• Team Treehouse
• CodeCademy
• Code School

Dianastarts.com has links to learning sites.  If you are interested in seeing the entire presentation, send Diana an email and she will share it with you!