Jump to content

How to Read and identify HTML and CSS
   (1 review)

Kit the Human
  • 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.

<div class="bstfrnds">
	<div class="bstfrnds-header">
		<img src="//images.rpginitiative.com/uploads/monthly_2018_08/large.bstfrnds-banner.jpg.b5fb9b34bbcfdcc684a507a74802f425.jpg" />
		<h3>Here is a title</h3>
	</div>
	<div class="hc-tabs-wrapper">
		<div class="hc-tabs">
			<ul class="hc-tabs-list">
				<li class="hc-tab-active">
					<span data-tab="hc-tab01">Tab 01</span>
				</li>
				<li>
					<span data-tab="hc-tab02">Tab 02</span>
				</li>
				<li>
					<span data-tab="hc-tab03">Tab 03</span>
				</li>
				<li>
					<span data-tab="hc-tab04">Tab 04</span>
				</li>
			</ul>
		</div>
		<div class="hc-tab-content">
			<div class="hc-content-block hc-tab01 hc-tab-show">
				<h4>This Is Tab 01 Content</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laudantium, fugiat pariatur, saepe tenetur accusantium ut voluptates neque hic dolorum! <a href="//google.com">Placeat</a> unde qui cupiditate numquam aliquid, id illo. Quibusdam, ducimus.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae illum dicta quidem laudantium sed voluptas ipsam repudiandae corporis veritatis, nostrum fugit harum, nihil dolorem saepe perferendis <a href="//google.com">cumque</a> temporibus eum. Atque.</p>
			</div>
			<div class="hc-content-block hc-tab02">
				<h4>This Is Tab 02 Content!</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laudantium, fugiat pariatur, saepe tenetur accusantium ut voluptates neque hic dolorum! Placeat unde qui cupiditate numquam aliquid, id illo. Quibusdam, ducimus.</p>
				<ul>
					<li>List item 01</li>
					<li>List item 02</li>
					<li>List item 03</li>
				</ul>
			</div>
			<div class="hc-content-block hc-tab03">
				<h4>This Is Tab 03 Content!</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ipsa distinctio id, neque repellendus quod corrupti voluptas rerum accusantium minus molestiae. Deserunt, dolores ex sapiente iusto iure hic soluta assumenda.</p>
			</div>
			<div class="hc-content-block hc-tab04">
				<h4>This Is Tab 04 Content!</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
			</div>
		</div>
	</div>
</div>

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!


element.png

 

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:

<div class="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.

 

Another example of an attribute can be found here:

<img src="//images.rpginitiative.com/uploads/monthly_2018_08/large.bstfrnds-banner.jpg.b5fb9b34bbcfdcc684a507a74802f425.jpg" />

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:

<div class="example">
  I'm an example.
</div>
<style>
  .example {
    background: white;
    color: black;
    padding: 10px
  }
  
  .example {
    background: #1a1a1a;
    color: #008000;
    padding: 20px
  }
</style>

 

The first rule will not be used. The second will be.

 

I'm an example.

 

See? The background is off-black rather than white, the text is green, not black and the padding is set to 20px. There are exceptions to that general rule. Briefly:
 

  • Putting !important after a declaration will make it override proceeding declarations.
    .example {
      color: red!important;
    }

     

  • The more specific the selector, the more priority the browser will give the rule.


I used a few unfamiliar terms there! Let's start breaking down what a stylesheet contains.

 

CSS Ruleset/CSS Rule

A CSS Ruleset is made up of a selector or selectors, and a declaration block. It looks like the following:

.example {
  background: white;
  color: black
}

The entire code in the above example is called a CSS Ruleset.

 

Selector

A Selector is the first ingredient in the CSS Ruleset. It is used to select the element whose appearance you want to alter. The following is the selector from the above example.

.example

 

A CSS Ruleset may contain multiple selectors. An example from this very site is:

.fulluserNav, .upperNav {
    background: #000;
    width: 100%;
    padding: 5px;
    height: 45px
}

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

  • Morrigan

    Jcink Themeing: What you Need

    By Morrigan, in Coding,

    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.

    Jcink

  • Arceus

    HTML/CSS Timeline

    By Arceus, in Coding,

    A full CSS and HTML vertical timeline? You bet! This uses pseudo-selectors to create a vertical bar with points along that bar with whatever text you need in it, creating a quite fancy historical timeline for your fantasy sites. With a few other embellishments, you can make it super neat.

    Other




User Feedback

Create an account or sign in to leave a review

You need to be a member in order to leave a review

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

memoria

   1 of 1 member found this review helpful 1 / 1 member

Good article. I especially like the part where you used my code as an example. Seriously. It makes me feel special. 🙂

Response from the author:

Advertising yo goodies

  • LOL 2

Share this review


Link to review

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.