HTML vs CSS for web development

HTML is one of the core building blocks of the Internet that we use and helps to structure a website. CSS, on the other hand, is used to get a better design. It makes a boring and plain HTML page looks good and interesting. Nowadays websites are not text-only sites and CSS (Cascading Style Sheets) allows you to put color and style into our web pages.

HTML and CSS: easy web development languages

What is HTML?

HTML or Hypertext Markup Language is the language that web browsers read to build a web page. It acts as a ‘blueprint’ to display data on the user’s screen. This is the basic building block of the web. Every page on the Internet is just HTML at its core.

example of HTML program

HTML stands for Hypertext Markup Language, and it is a markup language to structure website content and web pages. HTML is easy to learn and helps you organize lists, paragraphs, tables, scrollbar, images, and other custom elements.

CSS stands for Cascading Style Sheets, and CSS files define how HTML elements will appear on the screen. It helps to format or style web pages content and even a whole website. Using CSS with HTML or another XML-based markup language gives you a better design.

HTML and CSS are often used with shortcodes to embed various elements on a web page. Even if someone does not know the programming languages, you will have to copy and paste codes. For example, shortcodes are used to embed subscription forms, banner ads, shop widgets, and buy buttons.

What are HTML elements?

Elements are what we use to tell the browser how we want the data supplied to be displayed.

What is a ‘tag’?

An element consists of an opening and closing tag. The data supplied between the tags will

be displayed per the instructions of the element.

How does the browser use HTML to create what I see?

The browser reads and interprets the HTML file to understand how the developer intended the

data to appear on the screen.

What are the basic HTML elements?

HTML, head, body, ‘p’, span, div, and h1-h6 are basic list of elements in HTML.

HTML Attributes

Before we jump on learning a couple of HTML elements, it is better to know that there is another way to supply data to an element. Attributes that help us show data with specific flags right inside the tags.

Example of common Attributes

   <head>
     <title>Align Attribute  Example</title>
   </head>
     
   <body>
      <p align = “left”>This is left aligned</p>
      <p align = “center”>This is center aligned</p>
      <p align = “right”>This is right aligned</p>
   </body>

Here <title> <p> are attributes of HTML elements which helps for alignment orientation etc in a HTML file. Core Attributes for HTML included (although not all) are:

  • Id
  • Title
  • Class
  • Style

The id attribute of an HTML tag can be used to identify any element within an HTML page uniquely. There are two primary reasons that you might want to use an id attribute on an element:

  • If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content.
  • If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements with the same name.

Let’s use the id attribute to distinguish between two paragraph elements, as shown below.

Example of HTML attribute

<p id = “html”>This para explains what is HTML</p>
<p id = “css”>This para explains what is Cascading Style Sheet</p>

Example of HTML title attribute

The title attribute gives a suggested title for the element. The syntax for the title attribute is similar as explained for the id attribute − The behavior of this attribute will depend upon the element that carries it.

<!DOCTYPE html>
<html>
   <head>
      <title>The title Attribute Example</title>
   </head>
   <body>
      <h3 title = “Hello HTML!”>Titled Heading Tag Example</h3>
   </body>
</html>

This will produce the following result:

image showing the result of title Attribute HTML program

Example of HTML class attribute

The class attribute is used to associate an element with a style sheet and specifies the class of element. The value of the attribute may also be a space-separated list of class names.

class = “className1 className2 className3”

Example of HTML style attritube

The style attribute allows you to specify the Cascading Style Sheet (CSS) rules within the element.

<!DOCTYPE html>
<html>    <head>
      <title>The style Attribute</title>
   </head>
   <body>
      <p style = “font-family:arial; color:#FF0000;”>Some text…</p>
   </body>
</html>

This will produce the following result:

image showing the result of title Attribute css program

More elements

<a>

The ‘a’ (“anchor”) element allows us to create links to other web pages (or even to other areas within our own webpage). One will see ‘a’ element used with the “href” attribute to tell the browser what address is linked to that point.

Example of HTML anchor element

<a href = “http://www.google.com” >Here is a link!!</a>

Example of HTML image element

<img>

The element will display an image on the screen. It will always have an ‘src’ attribute, which points to the image’s address to be displayed. NOTE: img tags can be self-closing, as in they do not need two tags. Simply put the “/” before the closing bracket in the first tag:

<img src=“http://www.someimage.com” />

Example of HTML list elements

<ul> & <ol>

This element represents an “unordered list”. This is the parent element and will contain list items. There is also an ordered list <ol>, but it is rarely used in modern web development, as most developers like to style their lists themselves.

<li>

The companion to the <ul> and <ol>. These elements represent the items to appear in the list. Any other elements can appear in a li.

<ul>

   <li>
      <span>List list item one</span>
   </li>
   <li>      <span>List list item Two</span>
   </li>
</ul>

CSS

As already mentioned, CSS stands for Cascading Style Sheets. It is a different language than HTML. It allows us to add color and style to our web pages. Usually, when we think about web pages, we think about nicely put-together, pretty-looking sites, and so far, what we have built has been pretty bland, if not ugly. Once the browser reads the HTML, it will then read the CSS and give different styling rules to different elements in our HTML based on how we select them.

example of CSS program

How to include CSS in HTML

Adding style CSS

We can write our CSS directly between two style tags:

<style>  /*< ! CSS goes here -> */
</style>

Adding link CSS

We can link to an external CSS file using the link element. This element will include two attributes: rel and href. rel will refer to the type of file we are linking: in this case, “stylesheet”, and the href will point to the location of the file.

<head>  <link rel = “stylesheet” href =”./styles.css” />
</head>

CSS selector

In order for us to apply styling rules to HTML elements, we have to know which elements to apply the rules to. This is where selectors come in. You can select all elements of a certain type: p, div, body, etc. Or you can apply a class or id to each individual element. We apply these selectors to the HTML tags themselves in the form of an attribute:

<div id =”divId”></div>
<div class=”divClass”></div>

Ids: are titles that can only appear on a single element. Think of it as you would your driver’s license number. ONLY you have that one number.

Classes: on the other hand, can apply to multiple elements. Think of it as a classroom. Usually, you aren’t the only person in a class, although you might be. The class is big enough for lots of people.

Individual elements: We do not need to add anything to use every element of a certain type as a selector. CSS does that for us already.

Anatomy of Styling Rules (Syntax)

Now that we have our selectors in place, we need to tell the browser what to do with those selectors. Inside of our style tags, we will insert the rules. Classes will always begin with ., and Ids will always begin with #. Elements will begin with neither and have the element name. After the name of the selector, we will use braces (“{}”) to hold our rules to that one selector.

Example of adding styling rules:

<style>
Body{background:blue;}
 .divclass{background: red;}
#divId{background: url(‘http://imageurl.com/image.jpg’)}
</style>

This concludes the above discussion for the HTML and CSS usage from a beginner’s perspective. One has to dig deep to upgrade the use of HTML and CSS in professional fields.