DEV Community

Roger Campbell II
Roger Campbell II

Posted on • Edited on

Intro to HTML & CSS

#beginners #html #css #tutorial

Setting Up Your Development Environment

  1. Go to CodeSandbox
  2. Toward the to right of the navbar click Sign In
  3. Select one of the three options to sign in with
    • If you do not have a Google or Apple account:
      1. Go to back to CodeSandbox's homepage
      2. Proceed to step 4 below
  4. Click Create Sandbox in the top right of the page
  5. Select the static option

Getting To Know Your Development Environment

Once you select the static template you will be shown what is called an Integrated Development Environment or IDE

An IDE is a software application that allows you to write code. Think of it like Google Docs for Software Engineers.

CodeSandbox IDE Diagram

It is vital to understand the different portions of your IDE in order to have a smooth development process. At first glance the IDE might seem a bit intimidating but with some background information it can be a very powerful tool:

A. Activity Bar - located on the far left-hand side, this lets you switch between views and gives you additional context-specific indicators

B. View Panel - is where a selected view is displayed.

  • Current it is open to the Explorer view which allows you to create new files and folders to store your code and digital assets, such as images and videos files.
  • There are other views that you can work with but they are a bit outside the scope of this session.

C. Editor - Located in the middle of the screen, is where you are able to write code. Right now you will see that it is open to the index.html file.

D. Preview Panel - Located on the right side mimics a web browser and displays your code as you make changes and save it.

We will learn how to interact with each portion of the IDE as we continue through this session.

What is HTML?

HTML is the backbone of every website you have ever interacted with. HTML stands for Hyper Text Markup Language, and is made up of a series of tags that HTML allows you to define the structure of a website. HTML provides you the ability to display text, images, and videos on your website. By writing HTML you are able to lay down the foundation of a website.

Getting Started With HTML

Ok, now to the fun part. Let's start learning how to write some spells!

The first concept I want to introduce you to is that of an HTML element.

Elements are made up of tags. These tag tell your web browser what you are trying to display on screen for your users. Say you want to write a large heading, there is a tag for that. How about writing an about me statement, there is a tag for that.

HTML Elements

So you are building your first website and you need to provide a large bit of text introducing your audience to your idea. This is a prime opportunity to use a header element. Let's take a look:

<body>
    <h1>The Wizarding World of Code</h1>
</body>
Enter fullscreen mode Exit fullscreen mode

Once you save your code (cmd + s or ctrl + s); you can see that this set of tags displays our text in large bold letters. That is because we have used two h1 tags to tell our browser to display our text that way.

When we combine two tags we create an html element. HTML elements are made up of an opening and closing tag:

<!-- Opening Tag -->
<h1>

<!-- Closing Tag -->
</h1>
Enter fullscreen mode Exit fullscreen mode

There are two main types of elements:

  1. Elements - Which contain an opening and closing tag.
    • They also normally will have content within them like text or other elements
  2. Empty Elements - Contain no content

An example of a empty element would be a <hr/> tag, which display a thematic break in your webpage by displaying a horizontal line:

<body>
    <!-- ... -->
    <hr/>
</body>
Enter fullscreen mode Exit fullscreen mode

Next lets look at a few helpful elements.

Headings Elements

Headings elements are a fun group to work with, they range from h1 to h6 and are used to define headings of your website. A h1 defines the most important heading and h6 defines the least. Although it is only common to use h1 through h3.

<!-- index.html -->
<body>
    <h1>The Wizarding World of Code</h1>
    <hr/>

    <h2>The Wizarding World of Code</h2>
    <h3>The Wizarding World of Code</h3>
    <h4>The Wizarding World of Code</h4>
    <h5>The Wizarding World of Code</h5>
    <h6>The Wizarding World of Code</h6>
</body>
Enter fullscreen mode Exit fullscreen mode

Paragraph Elements

Next up is the paragraph element which like it's name implies allows you to display a long series of text. Most website written content is displayed in paragraph elements:

<!-- index.html -->
<body>
    <h1>The Wizarding World of Code</h1>
    <hr/>

    <p>Paragraph elements allow you to write longer bits of text and create a tome of spells for the world to see and read!</p>
</body>
Enter fullscreen mode Exit fullscreen mode

List Elements

So let's say you need to list out some very important content on your website. You could write a bunch of paragraph elements with single words in them, but that would be a total noob move. In this case you should utilize a list tag.

There are two types of list elements you can use:

  1. Unordered List
  2. Ordered List 
<!-- index.html -->
<body>
    <!-- ... -->

    <!-- Unordered List -->
    <h3>Shopping List</h3>
    <ul></ul>

    <!-- Ordered List -->
    <h3>Steps To Casting a Spell</h3>
    <ol></ol>
</body>
Enter fullscreen mode Exit fullscreen mode

If you were to save your code you'd notes that the spell did not work, and that is due to the fact that it is incomplete. All list elements must have list item elements as children:

<!-- index.html -->
<body>
    <!-- ... -->

    <!-- Unordered List -->
    <h3>Shopping List</h3>
    <ul>
        <li>Wand</li>
        <li>Grimoire</li>
        <li>Cape</li>
    </ul>

    <!-- Ordered List -->
    <h3>Steps To Casting a Spell</h3>
    <ol>
        <li>Create a file</li>
        <li>Write some code</li>
        <li>Deploy your code to the internet</li>
    </ol>
</body>
Enter fullscreen mode Exit fullscreen mode

Now that we have a baseline understanding of HTML tags and elements there is some general structure to our HTML document that we need to talk about.

The Global Structure of an HTML Document

So up until now we have strictly been writing HTML elements with in the body element of our website, but we haven't really talked about what the body element is for or any of the other elements that were in our document when we first opened it. There are four things I want to bring your attention to:

  1. !DOCTYPE declaration
  2. html element
  3. head element
  4. body element

These four parts are what makes up the global structure of an HTML document.

!DOCTYPE declaration

The !DOCTYPE is a declaration which every HTML document must start with. It tells the browser what type of document to expect.

<!DOCTYPE html>
Enter fullscreen mode Exit fullscreen mode

HTML Element

The html element is a parent container that should house all the HTML in our document. You are able to add a lang attribute to specify what language of the webpage. HTML attributes provide additional information to an element. There are many different types of attributes that elements can have and we will cover more of them through out this session.

<!DOCTYPE html>
<html lang="en">
    <!-- The rest of your HTML -->
</html>
Enter fullscreen mode Exit fullscreen mode

Head Element

The head element contains meta data which give browsers and search engines more information about the webpage. You are able to define things like the title of the webpage, or metadata to help optimize SEO for your website. The head element should always be placed within the html element before the body element.

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Metadata Goes Here -->
    </head>
</html>
Enter fullscreen mode Exit fullscreen mode

Body Element

The body element defines the body of the HTML document and is where you should place all the HTML code you want to be displayed in the browser.

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Metadata Goes Here -->
    </head>

    <body>
        <!-- All Page Content Goes Here -->
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Title Element

The last element we are going to talk about for now is the Title element which allows define the title of our HTML document:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- ... -->
        <title>The Wizarding World of Code</title>
    </head>
    <body>
        <!-- ... -->
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Once you provide a title element if you are able to see the title in the browser window tab that it is being displayed in. To see this copy the URL that is provided at the top of the Preview Panel and paste it into a new browser window. If you look at the tab you will see the title you provided being displayed.

Now that we have learned about some of the more common element, let's add a little flare to our website.

What is CSS?

Earlier I told you that HTML is the backbone that defines the structure and foundation of every website. But what is a foundation without some style?! This is where Cascading Style Sheets or as it is more commonly known CSS comes into play.

CSS is flair to wand stroke, the "SA" to your Wingardium Leviosa. CSS allows you to define the presentation of your website; everything from font colors to font families, content positioning, image sizes, how a site resizes based on the dimensions of the device displaying it, and much more.

It one was to compare a website to a human body, HTML would be the persons bones and CSS would be what makes the their appearance; from skin and hair color, to their height and weight. CSS is what allows you to look the part to match your ideas, or as I like to think about it set the tone of your spells!

Getting Started with CSS

So we have explain what CSS is, but how do we use it. To start we need to create a CSS file and link it to our HTML:

  1. In the top right corner of the Explorer you will a icon that looks like a piece of paper
  2. Click it
  3. Then type style.css and press enter
    • This will create and open a new file in the Editor
  4. At the top of the editor click the index.html
  5. Above the title element we are going to add a link element: 
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- ... -->
        <link rel="stylesheet" href="./style.css">
        <title>The Wizarding World of Code</title>
    </head>
    <body>
        <!-- ... -->
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The link element is a empty element and contains two attributes:

  1. rel - specifies the relationship between the current document and the linked document
  2. href - specifies the URL of the page the link goes to

We provide the rel attribute with the value "stylesheet" to let our HTML know we are link a CSS file. The href attribute is set to the file path to our newly created CSS file.

So now that we have our CSS link to our HTML, how do we go about using the CSS file to style our website?

CSS Syntax

Before dive directly into using CSS, we need to talk about the how to write it, the syntax (rules of writing a programming language) of CSS is quite different then that of HTML. CSS is more a rule defining syntax than it is an actual programming language, so when you write it you are in reality just defining rules for how your HTML should be displayed.

There are three main parts to defining a CSS rule:

  1. Selector - points to the html element you want to style
  2. Declaration Block - defines a container for all the style rules (declarations) you want to be applied to the selected element
  3. Declaration - The actual rule you are defining for the element
    • You must define the property you want to change and the value you want to set it to
    • Every declaration must end with a semicolon

CSS Rule Diagram

Selecting Elements

When working within a CSS file you are able to define what elements you want to make changes to by utilizing CSS Selectors.

There are a few many different types of CSS Selectors but the three types we are going to look at in this session are:

  1. Element Selectors
  2. ID Selectors
  3. Class Selectors

Element Selectors

Element selectors as the name implies allow you to select html elements from your CSS. Let's say you want to change the color of the h1 tag on the page:

/* style.css */

h1 {
    color: blue;
}
Enter fullscreen mode Exit fullscreen mode

What is you also wanted to change the font size of the h1:

/* style.css */

h1 {
    color: blue;
    font-size: 15px;
}
Enter fullscreen mode Exit fullscreen mode

One major thing to notice here is that when using a element selector it affect every instance of that element within the HTML document. What do you do if you only want to apply a CSS rule to one element? This is a perfect time to introduce the id selector but before we talk about it in detail let's first discuss what an HTML id attributes is.

ID Attributes

An HTML id attribute allow you to specify a unique id for an element. The value if this attribute must be completely different from any other ids within the HTML document.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- ... -->
    </head>
    <body>
        <h1 id="title-header">The Wizarding World of Code</h1>

        <!-- ... -->
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Another thing to note about id attributes is that if you want to create an id value that uses multiple works such as title-header there can be no spaces between them. It is up for debate which naming convention you should use for id names:

  • Kebab Case - example: title-header
  • Camel Case - example: titleHeader
  • Pascal Case - example: TitleHeader

I prefer Kebab Case and will die on this hill but other Engineers will probably die on another, so feel free to use whichever you are more comfortable with. But word of caution just pick one and stick to it, it'll help you out in the long run.

ID Selector

Now that we have id attribute as a helpful addition to our spell-craft, lets discuss how to use id selectors in our CSS. id selectors allow us to select a single element in our CSS. When defining a CSS rule that utilizes an id selector we must denote it with a # sign:

/* style.css */

#title-header {
    color: blue;
    font-size: 15px;
}
Enter fullscreen mode Exit fullscreen mode

As you can see when we do this the style rules are only being applied to the h1 with the id.

Next up is the class selector but before we dive in lets define what an HTML class attribute is.

Class Attribute

HTML class attributes allow you point out multiple elements by grouping them together with the same class name. One benefit to using class attributes is that you able to apply CSS style to multiple HTML elements within one rule.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- ... -->
    </head>
    <body>
        <h1 id="title-header" class="headers">The Wizarding World of Code</h1>
        <h1 class="headers">The Wizarding World of Code</h1>

        <!-- ... -->
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The same naming convention rule applies to class values as it does to id values, you must use one of the naming conventions mentioned above it you want a class name to contain multiple words.

One thing to note is that HTML elements can have a id attribute and multiple class values.

Class Selectors

Class selectors allow us to select a multiple elements within our CSS. When defining a CSS rule that utilizes an class selector we must denote it with a . sign:

/* style.css */

.headers {
    color: blue;
    font-size: 15px;
}
Enter fullscreen mode Exit fullscreen mode

As you can see when we do this the style rules are all of the elements with the specific class.

One other note: there are many different properties you can change with CSS for a full comprehensive list feel free to refer to this list by W3Schools.

More HTML Magic

So far we have only looked at text within our HTML documents but what about images and videos?

Image Element

Let's say you want to display some cool pictures of you casting some magic or of your favorite place to use a portkey to. This is the perfect time to use an image element.

Image elements are empty elements meaning they do not have a closing tag, yet every image tag must have two attributes:

  1. src - the source attribute must be provided the location where the image can be foundation
    • This can be either a URL or File Path
  2. alt - provides alternative information about the image
    • This is mainly used for screen reader 
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- ... -->
    </head>
    <body>
        <h1 id="title-header" class="headers">The Wizarding World of Code</h1>

        <img
            src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e4/Wizarding_World_logo.svg/1200px-Wizarding_World_logo.svg.png" 
            alt="The Wizarding World Logo"
        />

        <!-- ... -->
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now as you can see this image is huge, so this would be a great time to use some CSS to make it a bit smaller:

/* style.css */

/* ... */

img {
    width: 50%;
    height: 20%;
}
Enter fullscreen mode Exit fullscreen mode

Displaying Videos with an iframe Element

Let's say your favorite magical influencer has filmed themselves casting an unforgivable curse and you want to showcase it on your website. One of the easiest ways to do this is to post the video to a video platform like YouTube and grab the embed link which provides you with an iframe element.

iframe elements allow you to embed another document inside of your current HTML document. So in the case of grabbing an embed link from YouTube, what you are actual provided is an iframe element with configurations to display an YouTube video player within your website:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- ... -->
    </head>
    <body>
        <!-- ... -->
        <iframe width="560" height="315" src="https://www.youtube.com/embed/pslRURKLzxs?start=149" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

You are able to adjust the width and height of the video player by changes the attribute values. Out side of those two attribute I would recommend leaving the others alone.

Top comments (0)

Read next

1noshishi profile image

Inline Classes in Kotlin: Why, Where, and How to Use Them

Valerii Popov -

ashleyd480 profile image

surviving coding bootcamp: lessons learned

Ashley D -

im_santhiya_guna profile image

Strapi — Why

Santhiya G -

dhanush9952 profile image

A Guide to Functional Programming

Dhanush -