An Introduction to HTML & CSS
A beginners guide to web development
At the heart of any general website or web page are lines of code in HTML and CSS. HTML, the web development language to render content and CSS, which styles the content.
HTML, the acronym representing Hypertext Markup Language, is the language the web browser reads to generate textual content onto browsers. This type of language is made up of components called tags. Tags define particular elements in the document and is human-readable. For example, “p” referncing paragraph, “img” referencing image, and “li” referncing list item. HTML files are saved with a .html file extension.
With that out of the way, let’s dive into creating our first web page to render it onto the browser using HTML!
Getting Started
When building anything, there are specific set of tools required. In relation to web development, the software tools to build a website are:
- Code Editor (i.e. NotePad++, eclipse, atom, etc.)
- Understanding of Basic HTML
- Understanding of Basic CSS
Intro to HTML
Using a code editor, create a file named index.html where you will store your webpage’s code.
Your basic structure in creating a webpage using html will represent a sandwich like structure.
The first line of code will specify the document type to the browser that the file is a html document. The html tags can be treated like the 2 buns in a sandwich and the head and body tags can be thought of as the meat of the sandwich.
<!DOCTYPE html><html>
<head>
<title>An Intro to HTML<title>
</head> <body>
</body>
</html>
Note : data between the head tags are not directly displayed on the the screen. The title tag is displayed on the tab bar of the website and external files such as .css and script files are placed between head (which work in the background and bring out action or style to the page). Any tags or text in between the body tags are displayed onto the screen.
Type the above html code in a text editor and save the file.
Once saved, double click the file and see what appears on the screen:
Though there is an empty webpage, notice the tab with the title.
Now, let’s add text to the body of the web page. Add the following code to the body:
<body> <h1>An Introduction to HTML and Web Content</h1> <p>This is my first webpage where I will display some content to the webpage. </p> <p>Below are the web languages I am trying to learn: </p> <ul> <li>HTML</li>
<li>CSS</li>
<li>JavaScript</li> </ul></body>
Some Popular Tags
- paragraph : <p></p>
- image : <img>
- ordered list : <ol></ol>
- unordered list : <ul></ul>
- list item : <li></li>
- divider : <div></div
- anchor : <a></a>
- heading : <h1></h1> (up to h6)
We have added some of the above tags to our html document.
If your file is open on the web browser, refresh the page and notice what is displayed:
The content typed onto the webpage is displayed and notice the content is displayed in different forms depending on the tag(s) used.
CSS, the acronym representing Cascading Style Sheets, is the language that compliments the content represented in HTML by styling it into more attractive and beautiful presentation.
The keyword selector is important to understand in relation to CSS. This keyword is used to finding (or “selecting”) the HTML element (tag) you want to style. At the very basic level, when using CSS to style HTML elements, the element tag is typed followed by curly braces.
In between the curly braces is the detail of the specific styling method. Below is an example of CSS used to style the above index.html file.
h1 {
color: red;
}ul {
font-style: italic;
}
The above lines of CSS code will turn the heading (text inside h1 tag) red and the unordered list (ul) content into italicized.
The above code of CSS will not be reflected on the html file until it is linked inside the head tag. First, save the above code into a separate css file titled style.css and link it to the html file with the following code below the title tag:
<link rel="stylesheet" href="style.css">If you click on the index.html file or refresh the page, you will see the following CSS implement onto your index.html file:
IDs, Classes, and CSS
There are two types of CSS selectors that are important to understand, id and class. When either on of these two selectors are used, it makes specific styling of certain tags much easier than styling by calling HTML tags. For example, there may be a case where you may want to style one item in a list a certain way, while styling rest of the items or a few other items another way.
- class : The class attribute does not need to be unique for HTML tags. You can have the same class attributes for multiple HTML tags. Class attributes are defined within HTML tags by typing : class= “…” (In between the parenthesis, type the class name). The syntax in CSS to refer to a class is the dot character (.).
- id : The id attribute must be unique for a paritcular HTML element. The id attribute is defined within a particular HTML tag by typing : id= “…” (In between the parenthises, type the id name). The syntax in CSS to refer to an id is the hash character (#).
To implement class and id, let us implement the following HTML and CSS code to our index.html and style.css files.
index.html file :
In our index.html file, add the following class and id attributes to the list items.
<li class="basicweblang">HTML</li>
<li class="basicweblang">CSS</li>
<li id="behavior">JavaScript</li>style.css file :
h1 {
color : red;
}.basicweblang {
font-style: italic;
}#behavior {
color: blue;
}
Make sure both of your files are saved. Refresh your index.html page or open the file and you will see the following in your browser :
Summary
We see that few lines of HTML and CSS codes are at the heart of any basic webpage. HTML is reponsible for the content of the website, whereas CSS is reponsible for styling that HTML content. CSS can select particular HTML tags and change the phsyical appearance as to how the HTML content is presented onto the webpage.
