Categories
html-css-fundamentals

How these 14 HTML CSS basics can clear your fundamentals

Do you still struggle while coding in HTML CSS? Perhaps you need to revisit your HTML CSS Basics.

It is of utmost importance to have your basics very clear if you wish to learn any language.

HTML CSS Basics
HTML CSS Basics

This post will clear your basics of HTML CSS.


HTML CSS basics – What is HTML?

What is HTML?
What is HTML?

HTML stands for HyperText Markup Language. 

HTML is the standard markup language for creating Web pages. 

HTML describes the structure of a Web page. 

HTML consists of a series of elements. HTML elements tell the browser how to display the content.

Every programming language has a version. HTML5 is the latest and current version of the HTML language.

Click here to read more about HTML


HTML CSS basics – What is an HTML document?

What is an HTML Document
A basic HTML document

An HTML document is a file containing Hypertext Markup Language, and its filename most often ends in the .html extension or .htm. 

An HTML document is a text document read in by a Web browser and then rendered on the screen.


HTML CSS basics – Anatomy of an HTML document

Anatomy of an HTML document
Anatomy of an HTML document

Any valid HTML document should consist of the following HTML elements:

  • <!DOCTYPE html> — doctype. It is a required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML mean automatic error checking and other useful things. However, these days, they don’t do much and are just needed to make sure your document behaves correctly. That’s all you need to know for now.
  • <html></html> — the <html> element. This element wraps all the content on the entire page and is sometimes known as the root element.
  • <head></head> — the <head> element. This element acts as a container for all the stuff you want to include on the HTML page that isn’t the content you show to your page’s viewers. It includes keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.
  • <meta charset= “utf-8”> — This element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.
  • <body></body> — the <body> element. It contains all the content that you want to show to web users when they visit your page, whether that’s text, images, videos, games, playable audio tracks, or whatever else.

HTML CSS basics – What is an HTML element?

HTML Element
HTML Element (the paragraph element)

An HTML element is an individual component of an HTML document. It represents semantics or meaning. For example, the title element represents the title of the document. We will learn about the HTML attributes in the next chapter.


HTML CSS basics – Anatomy of an HTML element

Anatomy of an HTML element
Anatomy of an HTML element

The main parts of an HTML element are as follows: 

The opening tag: This consists of the element name (in this case, p), wrapped in opening and closing angle brackets. 

The content: This is the actual content that you want to show to the user.

The closing tag: This consists of the element name (in this case, p), wrapped in opening and closing angle brackets with a / prefix. 

The element: The opening tag, the closing tag, and the content together form the element.

You can read more about anatomy of an HTML element


HTML CSS basics – What is an HTML attribute?

HTML attribute
HTML attribute (class)

HTML attributes are special words used inside the opening tag to control the element’s behavior. HTML attributes are a modifier of an HTML element type.

Attributes contain extra information about the element that you don’t want to appear in the actual content.

You can read more about HTML attribute in the article anatomy of an HTML element


HTML CSS basics – What are Tags in HTML?

Tags in HTML
Tags in HTML (paragraph)

Any HTML element comprises of tags. 

Pairing HTML elements have an opening and closing tag.

Inline or Empty HTML element has a self-closing tag.


HTML CSS basics – What is CSS?

What is CSS?
What is CSS?

CSS stands for Cascading Style Sheets. 

CSS is used to style the HTML elements.

The appearance of an HTML element on the screen, paper, or mobile is defined using CSS.

Click here to read more about CSS


HTML CSS basics – What is a CSS file?

A simple CSS file
A simple CSS file

A CSS file in an independent file with an extension .css.

A CSS file has CSS rules written to control the HTML page’s appearance and its elements.


HTML CSS basics – What is a CSS Ruleset?

CSS Ruleset
CSS Ruleset

CSS ruleset consists of a selector and a declaration block: The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.


HTML CSS basics – What are CSS Selectors?

CSS Selectors
CSS Selectors

CSS selectors are used to selecting an HTML element or a set of HTML elements to assign styles.

CSS selectors are patterns used to select the element(s) you want to style.

In the example above ‘p’ is the selector.


HTML CSS basics – What are CSS properties?

CSS Properties
CSS Properties

We assign a style to a particular element using a CSS property.

Each property has a set of possible values. 

In the example above we are assigning the value ‘red’ to the property color.

This declaration means that the text color of all the paragraph elements should be red.


HTML CSS basics – Anatomy of a CSS ruleset

Anatomy of a CSS ruleset
Anatomy of a CSS ruleset

The whole structure is called a ruleset. (We often refer the term ruleset to as a just rule.) Note the names of the individual parts:

Selector

The HTML element name at the start of the ruleset. It defines the element(s) to be styled (in this example, <p> elements). To style a different element, change the selector.

Declaration

A declaration is a single rule like color: red; 

It specifies which of the properties of the element you want to style.

Properties

These are ways in which you can style an HTML element. (In this example, color is a property of the <p> elements.) In CSS, you choose which properties you want to affect the rule.

Property value

To the right of the property—after the colon—there is the property value. The property value chooses one out of many possible appearances for a given property. (For example, there are many color values in addition to red.)

Note the other important parts of the syntax:

  • Apart from the selector, we should wrap the ruleset in curly braces. ({})
  • Within each declaration, you must use a colon (:) to separate the property from its value or values.
  • Within each ruleset, you must use a semicolon (;) to separate each declaration from the next one.

To modify multiple property values in one ruleset, write them separated by semicolons, like this:


HTML CSS basics – How to include CSS in HTML

How to Include CSS in HTML page
How to Include CSS in HTML page

There are three different ways to include CSS in HTML

  1. By linking an external CSS file
  2. By writing internal CSS in HTML page
  3. By writing Inline CSS in HTML page

You can read the more about this in my article How to include CSS in HTML page

Conclusion

Each of the HTML CSS Basics listed on this page deserver a post of its own (stay tuned).

I hope these HTML CSS Basics are helpful and have cleared your doubts and gained you some confidence.

Categories
html-css-fundamentals

Anatomy of an HTML element

Understanding the Anatomy of an HTML Element is a very basic and fundamental requirement if you claim yourself to know and work in HTML CSS. This post will be a part of my series of posts titled “Fundamentals of HTML CSS” (coming soon).

Before we begin Click here if you wish to learn HTM CSS for free?

What are we going to learn from this post?

    Anatomy of an HTML element – Basics

    Before we understand the anatomy of an HTML element we need to understand some basics.

    1. What is an HTML Element
    2. Types of HTML Elements

    What is an HTML Element?

    HTML elements are the building blocks of HTML document. You make use of an HTML element to insert any piece of information let it be a page heading, sub heading, a description, a list or an image.

    Another definition from wikipedia
    An HTML element is a type of HTML (Hypertext Markup Language) document component, one of several types of HTML nodes (there are also text nodes, comment nodes and others). … Each element can have HTML attributes specified. Elements can also have content, including other elements and text.

    HTML Element
    Example of an HTML Element

    HTML elements are also referred as HTML tags.

    Some of the examples of HTML elements are as follows

    • <html>
    • <head>
    • <body>
    • <h1>
    • <p>
    • <img />
    • <br>
    • <hr>

    Types of HTML Elements

    Basically there are 2 types of HTML elements.

    1. Pairing HTML element
    2. Empty or Inline HTML element

    Pairing HTML elements

    Pairing HTML elements have an opening and closing tag. they have the content in between. Lets take a look at an example of a pairing html element below:

    <h1>This is my page header</h1>

    As you can see the code above, we are making use of a <h1> tag that has some content and a following closing tag.

    Some examples of pairing html element

    • <html>
    • <head>
    • <body>
    • <p>
    • <h1>
    • <h2>
    • <h3>
    • <h4>
    • <h5>
    • <h6>
    • <ol>
    • <ul>
    • <li>

    Empty or Inline HTML Elements

    Empty or Inline HTML Elements do not have a opening or a closing tag, instead are self closing. Lets take a look at a few examples of empty or closing HTML element.

    <hr />

    The above code is an example of an <hr> element which is used to generate a horizontal line (divider) between 2 html elements.

    Here is another example of an empty or inline html element

    <img src="" />

    The above code is an example of an <img> element which is used to insert an image in a html document.

    Some examples of Empty or Inline html elements

    • <img />
    • <hr />
    • <br />

    Now that we have understood what is an HTML element and its 2 types. Lets us now understand the Anatomy of an HTML element

    Anatomy of an HTML element – the paragraph tag

    Anatomy of an HTML element - the paragraph tag
    Image Source – https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
    <p>My cat is very grumpy</p>

    The above code is an example of pairing html element ie. the paragraph element

    This code will render “My cat is very grumpy” in your html document when viewed in the browser.

    As you can see the above code comprises of the following 3 parts:

    The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.

    The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.

    The content: This is the content of the element, which in this case, is just text.

    The element: The opening tag, the closing tag and the content together comprise the element.

    Anatomy of an HTML element – HTML Attributes

    Both the types of html elements can have attributes.

    Attributes contain extra information about the element that you don’t want to appear in the actual content.

    Let’s take a look an example of the paragraph tag with an attribute.

    HTML Attributes
    Image Source – https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics

    In the example above the paragraph tag has an attribute named “class” that has a value=”editor-note”.

    An attribute should always have the following:

    • A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
    • The attribute name followed by an equal sign.
    • The attribute value wrapped by opening and closing quotation marks.

    Please note, an element can have multiple values separated by a space.

    Anatomy of an HTML element – image tag

    Here is an example an empty html element with multiple attributes.

    Anatomy of an HTML element - image tag
    Image Source – https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
    <img src="images/firefox-icon.png" alt="My test image" />

    The code above is an example of an Image tag that has 2 attributes:

    1. The “src” attribute which is an acronym of “source” specifies the path and name of the image that needs to be displayed.
    2. The “alt” attribute which is the acronym of”alternate text” specifies what text to show incase if the image does not appear for whatever reason.

    An image tag can more attributes that we can study with our tags lesson.

    Anatomy of an HTML element – Nesting in HTML

    Nesting means you can have elements inside elements.

    Lets take a look at the example below:

    Nesting in HTML
    Image Source – https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
    <p>My cat is <strong>very</strong> grumpy</p>

    In the code we have nested a <strong> element inside the <paragraph> element.

    This is because I wanted to insist on the word “very” and to make it look bold.

    Another example of Nesting is the list element. Lets take a look at the code below:

    <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    </ul>

    In the code above <ul> is the parent tag for an unordered list and <li> called as list elements are the child elements of an unordered list.

    A <li> element should always be nested inside a unordered (<ul>) or a ordered (<ol>) list element

    Please note : Nesting is only possible with Pairing elements and not with empty elements.

    Wrapping up

    I hope the examples above have cleared your fundamentals about the Anatomy of an HTML element.

    Stay tuned for more similar articles on the Fundamentals of HTML CSS.