What is HTML and CSS and What Do They Have To Do With Websites?

What is HTML and CSS and What Do They Have To Do With Websites?

Kahlei's Blog's photo
Kahlei's Blog
·

4 min read

Introduction

There are an abundance of programming languages that each serve their own purpose to build websites, but the two main languages web developers utilize are HTML and CSS.

HTML and CSS are the foundational building blocks of websites on the Internet, which is why you should be aware of what they are and how they work.

What is HTML?

Screenshot (3).png

HTML, which stands for Hyper Text Markup Language , is a standard markup language used to determine the structure of a web page. Concisely, HTML is basically an instructional manual for determining how things on your web page are displayed.

There are two basic terms you need to know in HTML to determine what you want on your webpage: tags and elements. If you look at the photo above of a contact form, you see a heading and a sentence. Both of these "elements" were created using tags.

A tag is used to contain all elements and signify to your browser that you are in fact adding an element to your webpage. Thus, elements are just any piece of content that is wrapped in tags.

There are two types of tags: opening and closing tags.

  • An opening tag declares the start of an element which consists of a word enclosed in angle brackets.

  • A closing tag declares the end of an element. A closing tag consists of a word but instead of only being enclosed with angle brackets, a backslash follows the word.

This is how a simple element would look if coded in HTML

<!DOCTYPE html>
<html>
<h1>Contact Me</h1>
<p>Got a question? I'd love to hear from you. Send me a message and I'll get back to you as soon as possible.</p>
</html>

There are a lot of things you can add to your webpage using HTML:

  • tables

  • contact forms

  • links

  • buttons

  • lists (numbered and bulleted)

  • many more things here !!!

What is CSS?

After determining what elements on your webpage are displayed, you can now determine how they look by using CSS.

CSS, which stands for Cascading Style Sheets , is a language used to selectively style elements on a webpage. CSS makes elements in your webpage more visually appealing for a user to view.

The rules that determine how you style elements are called CSS selectors. According to the Mozilla Web Doc, a selector "defines the element(s) to be styled." The two basic types of selectors are class and id selectors.

  • A class selector is used to select multiple elements on a webpage. A basic class selector features a period followed by the value name of the class selector and two curly braces enclosing the rules of your class selector. The value can start with a letter or underscore, not a number or any other character
  • An id selector is used to uniquely identify an element on the webpage. A basic id selector features a hashtag followed by the value name of your id selector and two curly braces enclosing the rules of your class selector.
    • Important: since an id selector uniquely identifies an element, you can only have one name for that id selector or it isn't unique
    • Also important: you could name your class or id selector literally anything you want but it's easier to name it to what you actually trying to style (e.g. if you want to changed the color of a button to blue, you could name your selector ".blue-button" of "#blue-button")

While you can use selectors to identify what element you would like to style, you need properties to determine what type of style you would like to apply to your elements. A property is a way you can style a specific element. For example, you can use the "color" property to specify the type of color for an element.

Here is how you would change the color of a paragraph to green using a class selector(*Note that all CSS code is encased in the "style" HTML element which signifies to your browser that it's in fact CSS:

<!DOCTYPE html>
<html>
<style>
.green  {
color: green}
</style>

<h1>Hello Sir>
<p class="green">The quick brown fox jumped over the lazy dog.</p>
</html>

What parts of an element you change using CSS:

  • color of an element (e.g. word, background)
  • how big or little an image appears on a webpage (width and length)
  • what type of font you would like for the text on your webpage
  • how large you want your font to be
  • where exactly you want your elements to appear on your webpage (e.g. using CSS, you could position an image in the upper left corner of your webpage)
  • more here!!! https://cssreference.io/

Conclusion

Thanks for reading my article! Don't forget to like and share it!

HTML5Web DevelopmentCSSwebdevBlogging