Day 3! HTML/CSS Module

Today we went over the fundamentals of HTML/CSS in our module. HTML, short for Hyper-Text Markup Language, is code that browsers read in order to show the structure of the website. Content is organized through tags classified as either semantic or non-semantic. Semantic tags, such as

<header> 
<main>
<footer>
<article>
<aside>
<nav>

tell you something about the content they contain. Utilizing these tags helps to make the structure of websites more streamlined and concise.

Non-Semantic tags such as

<div>
<span>

are used more generally to organize groups of elements. A best practice when writing HTML code is to not overuse the <div> tag as risk of the website being something known as a “div soup”, where elements in the code can seem and easily get more disorganized due to the lack of differentiation or semantic meaning of the elements being organized on the webpage.

Once a preliminary HTML page structure has been coded, developers are able to customize HTML elements with a style sheet language called CSS, also known as Cascading Style Sheets, to create styling rules for various values such as color, fonts, layouts and a lot more! By separating the HTML code from the CSS, it makes it easy to stylize elements on the page without altering the content and HTML structure.

CSS allows you to use the various tags of HTML elements as selectors as well as defining your own through the use of classes and ids. Defining selectors through CSS tells the browser to display the variable attributes and values of each HTML element selected. Classes enable the grouping of various elements to follow the same style and ids lets you style elements unique from the rest of the rules you have already created. In-line style attributes override all CSS styling rules.

Below is a guide to show the styling specificity hierarchy. CSS, with its many attributes to customize allows front-end developers to create very expressive and interactive web sites. Looking forward to learning more about HTML/CSS and how to add automation with Javascript!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s