Before beginning our journey to learn HTML and CSS it is important to understand the differences between the two languages, their syntax, and some common terminology.
As an overview, HTML is a hyper text markup language created to give content structure and meaning. CSS, also known as cascading style sheets, is a presentation language created to give content style and appearance.
To put this into laymen terms, HTML determines the structure and meaning of content on a web page while CSS determines the style and appearance of this content. The two languages are independent of one another. CSS should not reside within an HTML document and vice versa.
Taking this concept a bit further, the HTML
p element is used to display a paragraph of text on a web page. The p element is specifically used here as it provides the most value for the content, thus being the most semantic element. CSS then uses a type selector of p which can determine the color, font size, font weight, and other stylistic properties of the paragraph. More on this to come.Common HTML Terms
When getting started with HTML you are likely to hear new, and often strange, terms. Over time you will become more and more familiar with all of them but three terms you should learn today include tags, elements, and attributes.
Elements
Elements are designators that define objects within a page, including structure and content. Some of the more popular elements include
h1 through h6, p, a, div, span, strong, and em.Tags
Elements are often made of multiple sets of tags, identified as opening and closing tags. Opening tags mark the beginning of an element, such as
<div>. Closing tags mark the end of an element and begin with a forward slash, such as </div>.Attributes
Attributes are properties used to provide additional instruction to given elements. More commonly, attributes are used to assign an
id, class, or title to an element, to give media elements a source (src), or to provide a hyperlink reference (href).