How to Read and identify HTML and CSS

(1 review)

This guide will teach you what makes up a HTML and CSS code, giving you the language to be able to identify each part of the code. Knowing the right language allows you to better communicate your message to other coders, thus increasing your ability to state what you're having trouble with. Or what you're looking for.

Type: Look & Feel
Software: Other

In this guide, we're going to guide you through the jungle of html and css syntax, whilst also explaining what different terms mean.

Introducing: HTML

HTML is the acronym for HyperText Markup Language, it's the the basic building blocks for the web, it's structure, or it's skeleton. Here is an example of some of the HTML from this post template.

Every webpage (or post template!) is made up the HTML skeleton and every skeleton is made up of particular bones - or elements.

Elements?

Quote

Element

When referring to an element, you are referring to a particular bone in the webpage skeleton. Examples of elements include:

Paragraph (<p>I'm a paragraph element</p>)

Body (<body>I am the body element</body>)

Table (<table><tr><td>I'm a table element</td></tr></table>)

Content Division (<div>I'm a content division element</div>)

Each element consists of two tags, an opening and a closing tag. The tag contains the name of the element and is wrapped in opening and closing angled brackets. Here's a picture to help you out!

As you can see, <div> and </div> are the tags of the content division element. Therefore, the very first line in the above code consists of an opening tag for the first element of the code, a content division element.

What kind of element you choose to use depends entirely upon what you are trying to achieve. It is important to choose the correct element for the job, just like it's important to choose the right tool for the job! This is because browsers interpret element types in particular ways, and have them behave accordingly. Some elements for example, will sit side by side with each other, because they're what is called an inline element. Others will start a new line because they're a block level element.

Quote

Block Level Element

An element that sits on it's own line unless you specify otherwise. Examples include:

List Item (<li>I am a list item</li>)

Content division (<div>I am a content division</div>)

Paragraph (<p>I am a paragraph</p>

Unordered list (<ul><li>I am an unordered list</li></ul>)

Ordered list (<ol><li>I am an ordered list</li></ol>)

Quote

Inline Element

An inline element does not start on a new line, and only takes up as much width as necessary. The prime example is span (<span>I am the generic container called span</span>.)

In the above example, the coder wanted the content to be on it's own line but did not for example, consider it an article (<article></article> would be more appropriate then). Where all other semantic elements are exhausted, use div.

So if <div> refers to an element, what does the rest of the line refer to? To refresh your memory on the line in question:

<divclass="bstfrnds">

The rest of this line is made up of attributes.

Attributes?

An attribute is a word used within the opening tag to control the element's behaviour, or providing metadata. It always uses the following syntax:

name=value

That is, the attribute's identifier (name) following by it's value. In this example, the attribute identifier is name, which tells the browser that the element will be referred to by attribute value, bstfrnds. This is useful when you have a collection of elements that you want to appear several times, on several pages, but to look the same. You will give those elements all the same name, so that later you can refer to them all in your CSS.

In this example, the attribute identifier is src, that is, the URL of an embeddable content. The attribute value is the URL for the image of the man with his dog.

Paragraph vs Line Break

Earlier I mentioned that your choice of element was important because it would behave in different ways. We'll talk more about this now, when comparing paragraphs with line breaks.

Paragraph

A paragraph element is, as expected, a paragraph. For example, this guide is made up of paragraph elements.

<p><strong>Paragraph vs Line Break</strong></p><p>
Earlier I mentioned that your choice of element was important because it would behave in different ways. We&#39;ll talk more about this now, when comparing paragraphs with line breaks.
</p><p><strong>Paragraph</strong></p><p>
A paragraph element is, as expected, a paragraph. For example, this guide is made up of paragraph elements.
</p>

See?

A paragraph element may render slightly differently in every browser but they will all separate paragraphs with a single blank line.

This is different to a line break, which simply puts the proceeding text on a new line, under the preceding text. Example:

This is<br>
a line break

Renders as:

This is
a line break

using doHTML? Try this:

<p/>

That will create a new blank line without needing to type in two line breaks.

So, want to create a paragraph? Use the paragraph tag. Want to make a line break? Use the line break tag.

Style

HTML without a style is a white page with words, elements following one after the another as the browser dictates. The magic happens after the style tag.

You should only use the style tag for doHTML, in cases where your administrator does not provide you with a place to upload your own CSS document.

The style tag contains the CSS!

CSS - Cascading Stylesheet

CSS is the acronym for Cascading Stylesheet, which is a list of code that controls how a page looks in the browser. The stylesheet is referred to as cascading because of the rules that govern how rules and declarations are prioritised. The most basic explanation is that the rule or declaration that comes later in the stylesheet is prioritised over those that come earlier in the stylesheet. For example:

This ruleset will alter two elements. One that is named fulluserNav and another that is named upperNav.

Declarations Block

The next ingredient to the CSS Ruleset is the declaration. Every declaration block starts with a curly bracket: { and ends with a curly bracket } From the earlier example:

{background: white;color: black
}

The above is a declarations block.

Declaration

Within a declarations block is at least one declaration.

background: white;

The above is a declaration!

We're going deeper!

Property

Within each declaration is a property.

background

The above is a property. Examples of properties include:

height

width

float

display

color

background

padding

margin

Value

The property is followed by a value, and the property and the value is divided by a colon.

white

The above is the value in the declaration we have been using as an example.

Nearly every declaration should finish in a semi-colon. You do not need to add a semi-colon to the last declaration in a declaration block. Leaving out the semi-colon for the last declaration in every declaration block can decrease the amount of time it takes for your site to load!

So, to bring it all together!

/* the start of a ruleset */
selector /* start of a declaration block */{/*start of a declaration */property: value;/* end of a declaration *//* start of another declaration */property: value /* I am the last declaration in this declaration block, don't need a semi colon! */}/* end of declaration block *//* end of a rule set *//* in other words! */.example {background: white;color: black
}

These are all the basic building blocks of a webpage. The ability to identify what each aspect is called can help you in asking questions or in explaining what issue you're having.

Related Guides

This guide is the precursor guide to how to create a theme, step by step on Jcink. This will start from how do you even start a new theme on Jcink to exporting/importing it to s site. This particular guide is the expectations that I have for a member to follow guides in order to be successful.

About RPG Initiative

RPG Initiative is a community for all roleplayers. We focus on all text based roleplaying forms that are hosted on the internet. We encourage roleplayers to find each other, discuss roleplay and grow as collaborative writers here at the Initiative in a safe environment.