Categories
html-css-tutorials

Create an HTML page resume by using 9 html element with ease

Are you looking to create an HTML page?
In this HTML tutorial, you will create your first HTML page by making use of nine html elements. 

For this exercise, I have taken the design of a simple resume. This is how your HTML resume will look like.

As promised, we will learn HTML CSS by doing.

This tutorial is part 1 of the exercise to create a simple HTML CSS Resume.

I also recommend going through these 14 HTML CSS basic

This is how your HTML Page Resume will look like.

Create an HTML page resume
Create an HTML page resume

We will only use some HTML elements semantically and get the resume’s structure and content ready in this part.

In part 2 (coming soon), we will add some basic styling to the first HTML page created by you.

Tools needed to create an HTML page

We need the following tools to create an HTML page:

  • An HTML Editor (local or online editor)
  • A browser to test 

For this tutorial, I am using glitch.com, which is an excellent online editor for coding.

So let’s create an HTML page resume with the following content:

I have divided this simple HTML page resume into the following five sections

  • Your Name& A short description of your experience and current status
  • Your photograph
  • Your Experience history
  • Your Academic background or qualification
  • Contact details

Here is the list of nine HTML elements that we will use to create an HTML page

In this HTML tutorial, we will learn and make use of the following HTML elements:

  • <section>
  • <p> – Paragraph element
  • Header elements (from h1, h2, h3)
  • <strong>
  • <img /> – element to display your photograph
  • <hr /> – Horizontal rule
  • <ul> – Un ordered list element

Create an HTML page- start with a blank HTML document

Start by creating a blank HTML page that has the base HTML elements.

When you create a page using glitch.com, or any HTML editor, they provide a blank page with the default elements. Below is the code on how your blank page should look. You can simple copy and paste the code below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    
    
  </body>
</html>

Below is the screenshot of the code of a blank HTML page.

Click here to read more about the anatomy of an HTML page. 


Create an HTML page – Section one – Add name and description

Let’s start by adding your name and a short description. We will make use of the following seven HTML Elements for this section:

  • Section
  • h1
  • strong
  • paragraph

Create an HTML page – Section Element

The <sectionelement defines a section in a document. According to W3C’s HTML documentation: “A section is a thematic grouping of content, typically with a heading.” 

A web page is split into sections for introduction, content, and contact information.

Below is the code with section element inside the body element.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
    </section>
  </body>
</html>

Create an HTML page – h1 Element

The HTML h1–h6 elements represent six levels of section headings. h1 is the highest section level, and h6 is the lowest.

As a thumb rule, one HTML page should only have one h1 HTML element, and it should have the most important keyword of your page.

h1 element is primary used for page titles.

Look at the code below, I have added an h1 element inside the section element and I added my name inside the h1 element

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        Parvez Ansari
      </h1>
    </section>
  </body>
</html>

Create an HTML page – Strong Element

The HTML <strongelement defines text with strong importance. The content inside is typically displayed in bold.

Look at the code below, I have added a strong element inside the h1 element to give some importance to my first name

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        <strong>Parvez</strong> Ansari
      </h1>
    </section>
  </body>
</html>

An element inside an element is called Nesting in HTML.

Use paragraph element to Create an HTML page

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

Look at the code below. I have used the paragraph element to display the description.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        <strong>Parvez</strong> Ansari
      </h1>
      <p>
        A developer turned User Experienced Designer Writer, Trainer and a Mentor
      </p>
    </section>
  </body>
</html>

Let’s take at the screen shot below. This is how your html page should look in the browser.

HTML Page Resume - Name and Description
HTML Page Resume – Name and Description

If your page looks like the screen shot above, you have developed the first section of your HTML Page resume.

In this section we learnt the following four html elements:

  • <section>
  • <h1>
  • <strong>
  • <p> paragraph

Create an HTML page – Section two – Add photograph

In this section we will add our photograph.

We make use of the Image element to insert a photograph in an HTML page

Use Image Elemenr to Create an HTML page –

The HTML <img> tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image. The <img> tag is empty, it contains attributes only, and does not have a closing tag.

We link an image by providing the image path in the src (source) attribute.

Lets take a look at the code below

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        <strong>Parvez</strong> Ansari
      </h1>
      <p>
        A developer turned User Experienced Designer Writer, Trainer and a Mentor
      </p>
    </section>
    <section>
      <img src="https://i.ibb.co/9yWxfzw/parvez-pp1.jpg" alt="parvez-pp1" border="0">
    </section>
  </body>
</html>

I created another section for the photograph and added an image element.

I also added the path of the image in the value of the src attribute.

For this exercise I have uploaded the photograph on https://imgbb.com/ which is a free site that allow you upload images.

Create an HTML page – hr Element

The <hrtag defines a thematic break in an HTML page (e.g. a shift of topic). The <hrelement is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.

Take a look at the code below, I added a hr element between the two section to create a break.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        <strong>Parvez</strong> Ansari
      </h1>
      <p>
        A developer turned User Experienced Designer Writer, Trainer and a Mentor
      </p>
    </section>
    <hr />
    <section>
      <img src="https://i.ibb.co/9yWxfzw/parvez-pp1.jpg" alt="parvez-pp1" border="0">
    </section>
  </body>
</html>

With the code above, your html page should look like the following screen shot.

HTML Resume photograph
HTML Resume photograph

In this section we learnt the following two html elements:

  • <img /> image element
  • <hr /> (horizontal rule)

Create an HTML page – Section three – Experience history

In this section we will add some experience history.

We will make use of the next two level of headings after h1 element.

h2 element

The HTML <h2tag defines the second level heading in the HTML document. This tag is also commonly referred to as the <h2element.

h3 element

The h3 element represents a level 3 heading. 

Look at the code below

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        <strong>Parvez</strong> Ansari
      </h1>
      <p>
        A developer turned User Experienced Designer Writer, Trainer and a Mentor
      </p>
    </section>
    <hr />
    <section>
      <img src="https://i.ibb.co/9yWxfzw/parvez-pp1.jpg" alt="parvez-pp1" border="0">
    </section>
    <hr />
    <section>
      <h3>
        Experience History
      </h3>
      <h2>
        Design Capital Ventures LLP <strong>Senior Product Designer</strong>
      </h2>
      <p>
        March 2019 to Till Date
      </p>
    </section>
  </body>
</html>

I added a new section for Experience history.

I have made use of h3 element to create a sub heading for “Experience history” and I used h2 element to display the name of the organisation that I am working for.

I am using a paragraph element to display the duration of this experience.

Let us now add some roles and responsibilities by making use of a unordered list element.

Unordered List Element

The HTML <ul> element represents an unordered list of items, typically rendered as a bulleted list.

The <ul> element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unorderedlist items are displayed with a bullet, which can be of several forms, like a dot, a circle, or a square.

Look at the code below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        <strong>Parvez</strong> Ansari
      </h1>
      <p>
        A developer turned User Experienced Designer Writer, Trainer and a Mentor
      </p>
    </section>
    <hr />
    <section>
      <img src="https://i.ibb.co/9yWxfzw/parvez-pp1.jpg" alt="parvez-pp1" border="0">
    </section>
    <hr />
    <section>
      <h3>
        Experience History
      </h3>
      <h2>
        Design Capital Ventures LLP <strong>Senior Product Designer</strong>
      </h2>
      <p>
        March 2019 to Till Date
      </p>
      <ul>      
        <li>Actively participate in product definition and contribute ideas</li>
        <li>Conduct User Interviews and identify insights</li>
        <li>Brainstorm and propose ideas</li>
        <li>Designing Userflows / Wireframes / Interfaces</li>
        <li>Develop Interactive Prototype using Figma and HTML/CSS</li>
        <li>Designing the Mobile App (iOS + Android)</li>
        <li>Design Emailers</li>
      </ul>  
    </section>
  </body>
</html>

If you have followed the instruction correctly, your html page should look like the screenshot below.

HTML page resume with experience
HTML page resume with experience

With the code above we have added the third section to our html page.

In this section we learnt the following three html elements:

  • <h3>
  • <h2>
  • <ul> Unordered list

Create an HTML page – Exercise 

Now that you have created your first HTML page let’s test your learning by working on the following task.

  • Add three more sections (skills, Achievements & Awards, Personal details) similar to how you added the experience section.
  • Add multiple experiences within the Experience section

Conclusion

In this tutorial we learnt to create an HTML page which is a simple resume by making use of the following nine html elements.

  • <section>
  • <p> – Paragraph element
  • Header elements (from h1, h2, h3)
  • <strong>
  • <img /> – element to display your photograph
  • <hr /> – Horizontal rule
  • <ul> – Un ordered list element

Click here to view the entire code.

Please subscribe and stay tuned for my next CSS tutorial in which we will apply learn and write your first css code to apply some basic styles to this HTML resume

Feel free to leave feedback.

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.

    Categories
    html-css-tutorials

    How to include CSS in HTML

    Did you know “How to include css in html” is one of the most commonly asked HTML CSS interview questions during interview.
    You need to be fundamentally very clear on the different ways to include css in html page

    How to include css in html
    how to include css in html

    In this post I will show you the different ways on how to include css in html file and the difference between each method.

    Prerequites:
    You have a basic understanding of what is HTML and you also know what is CSS.
    Assumption is you already have an html page where you want to include css.

    Tools needed:
    An HTML Editor. You can use any html editor installed on your system or you can use any of the online html css editors. 
    A browser of your choice to see you output.

    I am using the online editor glitch.com in google chrome browser so that this is the only thing I need.


    Different ways on how to include CSS in HTML

    Basically there are 3 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

    Let’s look at each of these methods one by one with practical implementation. 


    How to include css in html: Link External CSS

    Method 1 : How to link a CSS file to HTML

    This is the ideal and the most preferred method. 
    In this method you put all your styles in a different css file and load the styles by linking the css file into your html documents.

    You can do this by either linking a files on your own system/server or your link from a different source.

    Link a css file from your local system or server.

    This css file can reside in your local project directory of your local system or on your own server.
    The screen shot below is the source code of your html document.

    How to include css in html - HTML Document
    How to include css in html – HTML Document

    The screen shot below is the source code of your style.css file

    External CSS File
    How to include css in html – External CSS File

    Below is the code to link an external css file. Make the sure the css file is in the same directory.

    All you need to do this is put this code in the <head> tag of your html document. Make sure you have a file named styles.css in your system

    <link rel="stylesheet" href="/style.css">

    Can you see the text color of the heading “hi There!” is blue. 
    This is because we are setting the css property of the text color of h1 element to #373fff in our style.css file.

    h1{
     color:#373fff;
    }

    Link an external css from a different source

    You can also link an external css from a different source.
    Look at the screenshot below. In this example the code highlighted shows how to to link an external css from a bootstrap server. 

    How to include css in html - Link External CSS
    How to include css in html – Link External CSS from a different source

    Did you noticed how the color of the heading has changed to ‘black’ color and the all the margin is gone.
    This is because we are loading styles from the bootstrap.min.css.

    Benefits of External CSS

    While there are many benefits of this method, here are some of the most obvious ones:

    • You separate styles from markup
    • Developers/Engineers do not need to bother and work on your css files 

    This method is same as the following methods:

    • how to connect css to html
    • how to connect html to css
    • how to attach css to html
    • how to reference css in html

    How to include css in html: Internal CSS

    Method 2 : How to add internal css in html page

    In this method you write the styles in the head tag of the html page itself. 

    Let’s take a look at the screenshot below:

    Internal CSS
    How to include css in html – Internal CSS

    As you can see I added some styles for the h1 element within the style tag of the page itself.
    Can you see how the text color of the heading changed to black.
    This is because of the css styles written in the page.

    What we learnt now that styles written in the style tag of the page will override the styles coming from external css.

    Internal CSS takes precedence over External CSS rules

    It over rides the styles written in the external css files

    When to use Internal CSS

    • For a single page website
    • If you do not have access to external css file 
    • If you need to make some changes to reflect only on a single page

    This method is same as the following methods:

    • how to insert css in html
    • how to apply css to html

    How to include css in html: Inline CSS

    Method 3 : How to write Inline css in html

    In this method you write the styles in the element tag itself.
    Let’s take a look at the screen below to see inline css in action.

    How to include css in html - Inline CSS
    How to include css in html – Inline CSS in html

    Can you see the color of the header has changed to ‘red’. This is because we have added an inline style in the h1 element itself.

    When to use inline style

    • When you want a small change to take place on a particular element and you have access to HTML file.
    • For quick fixes
    • When you do not have access to external css files
    • In emergency when you are not familiar with main external css file
    • Inline CSS are a standard practice for HTML emailers
    • Use inline css for a single page website where each element has different styles

    Which styles takes precedence over what?

    As you notice this document has 3 styles defined for the text color of the header:

    • Color ‘blue’ defined in the external css file
    • Color ‘black’ defined in the internal style tag
    • Color ‘red’ defined in the inline style.

    And the final color of the header text is red. This is because:

    Inline CSS takes precedence over Internal and External CSS rules.

    Inline css over rides the styles written in the internal styles and external css files

    Where to put css in html

    Wondering where to put css in html?
    It all depends on the methods you choose on how to include css in html.

    • If you are planning to use Method 1 ie. an external css, you obviously write your styles in the external css file and link the file in your html page to load the styles.
    • If you are planning to use method 2  ie. internal css method, you write the styles inside a style tag in the head element of your html page.
    • If you prefer inline css method than you write the styles in the element tag itself

    How to import CSS in html

    Importing a css is not very different from linking an external css.
    You can import CSS in html using either of the 2 methods below

    Import as a string

    @import "navigation.css"; /* Using a string */

    or Import as URL

    @import url("navigation.css"); /* Using a url */

    Know the Difference Between @import and <link>


    Try yourself on how to include CSS in HTML

    The best way to learn is to do by yourself. Below is the link to the sample code I have shared in this article. Feel free to play around.

    https://glitch.com/~-how-to-include-css-in-html


    Wrapping up

    In this post we learnt the 3 different methods of how to include css in html.
    I hope this post has answered your question and clarified all your doubts in regards to how to include CCS in html document.

    Please share this post if you have found this helpful.

    Feel free to leave feedback in the comment sections. Also let me know if you would like help on more such articles.

    Categories
    Uncategorized

    Learn HTML CSS for free

    Do you know HTML CSS are the basic skills needed if you are planning to enter the web development field.
    Do you know anyone with basic computer skills, having good command on english and a flair for learning can learn HTML CSS for free and start building web pages.

    Are you scared of coding?
    Not sure how and where to begin learning html css for free?

    Learn HTML CSS for Free
    https://blog.hyperiondev.com/index.php/2018/05/17/should-i-learn-html-css/

    This post is a guide for anyone who wishes to learn html css for free and kick start their career in the web development field.

    HTML CSS is also a nice to have skill if you are a Graphic Designer or a User Interface Designer or a User Experience Designer.
    It is also helpful for content writers as they work with different Content Management systems which requires them to do some basic editing in the code.

    This post consist of 2 parts.

    Table of content to Learn HTML CSS for free

    • What is HTML
    • What is CSS
    • What is the difference between HTML and CSS
    • How to learn HTML and CSS
    • HTML CSS Tutorials
    • HTML CSS Editors
    • HTML CSS Interview Questions
    • HTML CSS Jobs

    At the end of the post I will provide you some guidance on what to learn after html and css.

    What is HTML CSS

    What is HTML

    What is HTML

    In short HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies(languages) for building Web pages. 
    HTML is used to build the structure of a web page.

    Click here to read more about HTML

    What is CSS

    What is CSS

    Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

    CSS is used to improve the look and feel of the web page.

    Click here to read more about CSS

    What is the difference between HTML and CSS

    From the definition it is quite simple, HTML (Hypertext Markup Language) is used to create the actual content of the page, such as written text, and CSS (Cascade Styling Sheets) is responsible for the design or style of the website, including the layout, visual effects and background color.

    Both are different languages that perform different tasks.

    How to learn HTML and CSS for free

    Here are some of the different ways on how to learn HTML and CSS:

    • Enroll for a course (online or offline)
    • Learn by reading a book
    • Find a mentor/trainer

    Here are some of websites using which you can also Learn HTML CSS for free:

    If you are wondering how to learn html and css fast, please remember there is no short cut to learn any skill. Everything takes time. You need to give it time and practice a lot

    HTML CSS tutorials

    While there are many tutorials. Here is the list of some of the best html css tutorials:

    HTML CSS Editors

    An editor is the software that is used to build your HTML pages and CSS files.

    Here is a list of some of the best free HTML CSS editors

    HTML CSS editor – Visual Studio Code

    HTML CSS Editor - Visual Studio Code

    If you’re looking for a robust editor, Microsoft Visual Studio’s free HTML editor edition of their IDE—which supports all the programming languages you’ll ever need—is a great choice. While their paid versions offer more advanced features, this free version includes all the essential tools needed for an HTML editor.

    Plus, they throw in some useful tools for mobile app development, such as code sharing between Android and iOS

    HTML CSS editor – Brackets

    HTML CSS Editor - Brackets

    Brackets is a modern, open-source editor with a few interesting features. It works with Adobe Creative Cloud Extract (Preview) to read design data such as colors, fonts, gradients, and more directly from a PSD file and convert it to CSS. It can also extract layers as images, use information from the PSD to define preprocessor variables, and easily get dimensions between objects. This is all possible without ever leaving the editor.

    Note: Adobe Creative Cloud is a paid service. Extract (its free preview) can be directly installed alongside Brackets.

    Extensions are another big plus for Brackets, which can be used to tailor the editor to the user’s needs. New extensions are released every three to four weeks. The robust support for preprocessors also merits mention.

    Sublime Text 2 – The Swiss Army Knife

    HTML CSS Editor - Sublime 2

    No other HTML editor is quite as triumphant as Sublime Text 2. It launched to immediate praise from swooning professional web developers. It is deeply customizable via extensions and JSON files. It’s tough to imagine any functionality outside of Sublime Text’s grasp.

    With the aid of Package Control, downloading and installing extensions is a breeze. Because the editor has enjoyed such widespread adoption, there’s an extensive plugin library available, even in addition to those offered on the developer’s website.

    Sublime Text 2 stands apart for its extensive documentation, both official and unofficial. Tutorials for Sublime Text 2 are everywhere and lower the learning curve.

    Sublime Text 2 is not free. It can be downloaded and evaluated for free with no limits, but if you like it, the $70 license is a very fair investment.

    HTML CSS Interview Questions

    Inorder to apply for a job you need to prepare yourself with the most common interview questions. The list of questions can be infinite. 

    Here are some of my favorite questions that I ask:

    • Different ways to include css in html file and what is the difference?
    • Difference between inline elements and block level elements?
    • What is the difference between position absolute and position fix?
    • When would you use the float property?
    • Different between class selector and id selector
    • What is specificity in css?

    You can practice more questions and answers from the links below:

    HTML CSS Jobs

    Now that you have learnt and practice HTML and CSS its time for you to find a job.

    There is always a need for a HTML CSS developer. 

    Here are some links with HTML CSS Jobs

    What to learn after HTML and CSS for free?

    Now you must be wondering what to learn after html and css?

    You should start with Javascript which is a scripting language to make your web pages interactive.

    Click here to read more about javascript

    Would you like to learn HTML CSS for free by doing?

    Subscribe to my blog in order to know more about my upcoming workshop which will teach you on “How to build your own UI Framework” without even knowing HTML CSS.

    Conclusion

    I hope this post covers the basic information that is needed to Learn HTML CSS for free.
    Please share this post if you found it helpful.
    Send me an email at “theboringdesigner” at gmail dot com if you have any feedback to make this post more helpful.