HTML AND CSS TECHNICAL PAPER

Tushar Singh (susst94@gmail.com)

Introduction:

The Internet as we know it today has gone through so many hoops of changes and transformations based on changing demands and the availability of new resources for both developers and users from different domains across the world. A comprehensive list for ranking the 20 most influential inventions of the 20th Century on the basis of both impact over the course of time and relevance in today's day and age. The list included things like Electricity Integration, Airplanes, and Television and included two advancements that have taken the world by force i.e. Computers and Internet.

The way to interact and explore the Internet has changed a lot. The primary and most widely used means of interacting with the Internet for users all across the world is Web Pages. Today almost everybody knows what a webpage is and can explain how to distinguish between different web pages from a casual standpoint. It is a whole different story when it comes to understanding how the web page comes into existence in the first place.

The two most well-known forms of Languages which become the backbone for Web Pages across the world are HTML & CSS. This paper is written with the intention to get the reader acquainted with features and properties behind the most widely used interface which allows us to explore the Internet as we know it aka Web Pages. Let us explore some of those properties and features:

1. Box Model

To understand how to build a piece of art, it is important for a painter to do research regarding what type of canvas he will use for his project. Similarly, we as developers need to understand the base layout/skeleton of our webpage and how we can use it to dictate the structure and placement of our content in it. Here is the Box-Model aka the canvas that we use:

The main components of our Box Model include:

Content: As the word says, the "Content" box contains the content pertaining to our item/element in consideration.
Padding: Padding is the extra space that is either explicitly provided or the default spacing provided by the browser between the border and the content window.
Border: The outline of the content window including the padding space.
Margin: The final amount of spacing added between the border and the container which houses the item/elements content.

2. Inline vs Block Elements

Block-level elements are elements that always begin on a new line and follow a stack layout by following one after another while also occupying the complete width present at that instance.

Inline-level elements are elements that do not begin on a new line, unlike block-level. They follow a regular flow chart of a document by line in succession. Inline line elements allow nesting with one another. They, however, do not allow wrapping with block-level elements. In most cases, inline elements are used with small pieces of content for eg: a phrase or a quote, etc.

Refer to the following codepen segment for understanding how these different elements work:

3. Positioning (Relative/Absolute)

Content positioning and placement are the cruces that define if a website is going to appeal to the masses and gain enough traction to increase traffic to the website. We as humans always try to look for patterns in anything that we witness and focus on details that improve the appeal of the subject matter. It is imperative that a web developer understand how positioning property works in CSS to get the most out of it.

Absolute Positioning:

This positioning property is reliant upon the elements positioning relative to their near-most ancestor. Depending upon how we use the top, down, left, and right properties we can switch the position of the item while making sure that it does not occupy space in its original position. This could create overlapping scenarios with other pieces of content(elements/items) on the webpage.

Relative Positioning:

This positioning property depends upon the elements/item's original position in the document. This positioning property also makes use of the top, down, left, and right properties in altering the positions of items while also making sure that it occupies space in their original position. This could create complications since it may also affect the positioning of nearby elements on the webpage.

Following codepen window demonstrates how relative and absolute positioning differ by simultaneously adjusting both positions for different items:

4. CSS Structural Classes

Perhaps the most important and key aspect apart from understanding layout and positioning in HTML and CSS is the hierarchical arrangement of all elements and different pieces of content with the help of classes. This hierarchy of arranging elements with a parent/child (in some cases even extended or nested child) relationship, makes for targeting and introducing stylistic changes based on design requirements for different pieces of content for a webpage. Some of the ways to access these child classes of parent elements in the hierarchy are as follows:

"first-child": This corresponds to elements that precede other siblings in a family hierarchy of an element/container.
"nth-child": This corresponds to elements that fall into an evaluated position dictated by an expression.
"last-child": As the word says, the last child corresponds to the last element in a sibling hierarchy of an element/container.
"nth-last-child": Same as "nth-child" but this time the position will begin from the end and still employ the expression evaluation.
"only-child": This represents the element in a hierarchy that is the sole offspring of a parent element and doesn't consist of any other child elements.

5. CSS Styling Classes

It has become a norm from a readability, screen reading, browser ranking, and debugging standpoint to make HTML and CSS code semantic in nature. Thus following are the most commonly used CSS Styling classes used to inculcate the practice of writing semantic code for websites:

.container: Perhaps the most used block-level element for organizing elements in a content box with a wide variety of elements such as a navigation menu.
.form: An important class if your website requires you to fetch info from the user in a structured manner for various purposes such as account creation, event registrations, ticket bookings, etc.
.navbar: As the name suggests, this class is used for forming the navigation bar that is pretty much prevalent on every website today. The primary purpose of the navbar is to provide easy navigation options within different prominent sections of a website.
.header: This class is mostly used as both a semantic and style option for adding the beginning section of either a blog post or perhaps even the main webpage.
.footer: Similar to the header, his class is mostly used as both a semantic and style option for adding the ending section of either a blog post or webpage, etc.

6. CSS Specificity

CSS reads out as Cascading Style Sheets. From the name itself, you can infer that every style change is conducted in the top-to-bottom order and any change relevant to a specific element always refers back to the last instance of the style sheet query found in the CSS file. Unfortunately, with websites as big as they are today, it is important to have a distinct set of rules which will help determine the priority for bringing about a style change regarding a specific piece of content or perhaps for pieces of content in conjunction. CSS introduces a rule set for determining priority with regards to bringing about the style change, which is called the Specificity algorithm. The algorithm is a weighted 3-digit number based on ID, CLASS, and TYPE respectively for determining the weight number that will be taken into consideration for bringing the final style change for the respective item in the webpage. The default weight digit starts from a 0-0-0 and is updated on per case basis depending upon the CSS definition for all items. We shall look into the weight categories now:

ID: Highest priority based on ID selectors. The contribution is 1-0-0 to the final weight value.
CLASS: Second in the priority order based on Class selectors (including pseudo-classes). The contribution is 0-1-0 to the final weight value.
TYPE: Base elements such as <p>, <h1>,<h2> etc belong to this category. The contribution to the weight value is 0-0-1.

There is another category which is called universal selector which adds no value to the weight calculator.

To summarize:

ID(1-0-0) > Class(0-1-0) > Type (0-0-1)

7. CSS Responsive/Queries

With the advent of mobile phones, it was only a matter of time that web browsers which could only be accessed via PCs at the start would get incorporated into mobile phones eventually. This meant that the permitted content space for web pages would be reduced significantly. Thus web pages need to adapt to changing resolutions and alter their behavior as well depending upon the type of device that is accessing the web page. At this point, we introduce the "CSS Responsive Queries" which allow us to incorporate these adaptive features for web pages on the basis of the device viewport and change its layout and structural integrity which wouldn't irk the user to move away from their preferred choice of peripherals. Following is a code segment of a typical media query used for adding responsive design to a webpage:

@media only screen and (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: .6fr .2fr repeat(3, minmax(100px,1.5fr)) .2fr .6fr;
        /* minmax used to set minimum width of a,b,c for small mobile devices */
        grid-template-areas:
            "Header"
            "."
            "a"
            "b"
            "c"
            "."
            "footer";
    }
}

8. Flexbox/Grid

It is borderline impractical to solely depend upon using relative and absolute positioning to dictate the placement of a website's content considering that today's websites are loaded with dense content and that is due to the fact that the resource pool for all browsers and the types of peripherals that people use keeps on growing. Thus to make the most out of the situation and increase the efficiency from both a development and structural standpoint of a website, developers make use of two very powerful layout options which are Flexbox and Grid. We shall see both briefly:

Flexbox:

The flexbox layout is an efficient way of laying out items in a container in a 1-dimensional fashion. The placement can be either row-based or column-based depending upon the direction attribute provided while setting the display option for a container to flex.

Grid:

If the flex is a 1-dimensional option for placing items in a container in a stack-esque fashion, then the grid is a higher-order execution of that same concept but in a 2d layout. This allows for more control and freedom over organizing items in a container. This leads to ease of execution in designing complex layouts as well as making them responsive with the help of properties such as grid-template-areas.

Following codepen window can be used to demonstrate the difference in behavior and output generated via grid and flexbox.

9. Common Header meta Tags

In the head section of any HTML document, meta tags are used to provide additional information relevant to the browser and its operational needs for the webpage. We call these additional sets of information metadata. The metadata allows the analysis of HTML files and easier content maintenance. Nowadays the importance of metadata has decreased on a consistent basis, yet it is considered a healthy practice to at the very least include some metadata that can be useful for search scripts for search engines. Following are some of the most important meta info still used and considered as a healthy practice for designing webpages:

Title
Character Encoding
Description
Author
Copyright

10. Animations:

Any successful website tries to bring in some form of either subtle or well-executed animation to add another level of detail for leaving a lasting impression in the user's mind to perhaps compel him/her to visit the website at a later point, sooner rather than later. Nowadays a user hardly spends more than 3 to 4 minutes on average while visiting a website. It becomes a task in itself to retain users on a consistent basis. Animations can be useful in that sense to add a unique feature. Following are some examples via codepen segments to display some simple yet introductory-level animations you can incorporate into your website:

Try noticing the different animations that occur open hovering over the different sections of the boxes. You can even create your own timings and changes during animation by fidgeting with the CSS code.

Conclusion

I hope this paper managed to serve its purpose to the reader with the expectation of getting a second-hand idea of the different sets of features that can be considered as a starting point for building a stand-alone website. The requirements and tools needed for building a fully functional and scalable website keep on growing based on the expectations and aim set by the designer. Ultimately, the more you challenge yourself with websites and how you build them and retroactively learn from the experience in identifying your mistakes or approach and integrate those lessons for future projects, the better you will get at it.