At its most basic level, the process an Internet user undertakes to view a page is composed of four basic components; namely, the user, a web browser on a computer, the Internet, and a number of remote data servers. Requests for data made by the browser are made via HTTP, which prompts the server to return the required files. Once obtained, the browser then interprets the data in a readable, comprehensible fashion (hopefully!).
HTML stands for Hyper Text Markup Language, and pages composed of HTML coding make up the vast majority of web 'material' found on the Internet. HTML is composed of either basic content or markup, the latter of which refers to the manner in which the aforemmentioned content is displayed. Markup is generally composed of tags, which in turn make up larger elements, which themselves include both opening and closing tags and the appropriate content to be displayed.
Elements themselves are classified as being either inline or block in nature, distinctions which generally refer to the manner in which they handle the content. As the name may imply, block elements create an invisible box around the content contained within the tags, whilst inline elements simply continue the line without splitting the data onto separate lines. An exception is the 'break' tag, which, while being an inline element, technically forces all content after it onto a following line.
HTML and CSS (Cascading Style Sheets) are often used in conjunction in the creation of a web page. While HTML is much akin to a house blueprint and basic structural design plan, CSS is used to notate the stylistic aspects of design, i.e. color of the walls and material of the carpet. In a web page example, CSS modifies the structural skeleton of a bare-bones HTML-constructed web page by adding variation and variables to 'spice up' the stylistic aspects of the design.
The use of development tools, such as the Inspect Element tool offered in Google Chrome, is a simple and practical way to inspect the browser-rendered code that makes up a web page. These tools help visualize the undergirding code that gives a rendered web page its shape, color, style, etc.
The aforementioned development tools use an industry-standard way of displaying and categorizing data known as a tree structure or a DOM (Document Object Model). These branched, indented lines of code are a textual way of displaying the fundamental fact of web page design, that all elements on a page are boxes. On any given page, there are a number of large, overarching boxes containing any number of smaller boxes, represented in the code as nested branches of the code tree.
CSS (Cascading Style Sheets) provides coders the ability to adjust and modify standard HTML elements in a comprehensive fashion. By naming certain HTML elements to a specific class, coders can reduce needless repetition in their work by applying stylistic changes to all elements in that class. This is a CSS property commonly called inheritance, wherein given an overarching rule, all nested elements will abide by that rule in the same manner unless overridden by another element-specific rule.
Like HTML elements, which are made up of tags and content, CSS code is composed of similar distinctions. The selector is a class distinction that corresponds to a specific class found in the HTML code, and controls the stylistic properties of that class. The declaration refers to the stylistic changes to be implemented, and is itself composed of a property and a value.
When seeking to code in HTML and CSS, or when working off a designer mock-up diagram, it is important to follow a several step process that will eliminate needless repetition and wasted energy in the long run. It is necessary to look first at the big picture, namely, identifying natural boxes wherein the page may be divided. Once this is complete, repeated styles must be identified before the actual HTML-based skeleton on the page may be constructed. Once the base code has been written, the application of CSS styles may be undertaken to take the page closer to the initial vision. Once it begins to take shape, pesky details may be ironed out, and minor issues rectified.