Now we know what HTML and HTML5 are, and seeing as we’ve already practiced both markup languages a tad bit, we’re moving on to the style language that was introduced to facilitate a markup language.


Define it!

First off, we initially declared Cascading Style Sheets (CSS) in the same batch of HTML, HTML5, and JavaScript. It is extremely important that we understand the purpose of CSS and why it is not a markup language like HTML, HTML5, and JavaScript. CSS is supplementary feature that was revealed during the transition from HTML 4.0 to HTML 5.0, and its primary existence was to assist HTML and HTML5 users by divvying up the work. Rather than maintain the cluttered and confusing conglomeration of both the content and the formatting for a webpage, CSS splits the .html file into two separate collegial pieces so that the .css file is external. In doing so, it allows for much easier access and modification to the aesthetics of a document, such as typography and presentational layouts.


See it!

The most efficient way to ensure separation was to devise a new syntax, a variant form of HTML and HTML5 that would be simple enough yet complicated enough to contain all the specifications.

Screen Shot 2015-09-20 at 10.09.05 AM

On the left screen, we have a series of tags, essentially the same as before:

  • <command> begins a command; </command> ends a command.
  • style refers to the way in which the content is visually projected.
  • /* begins a comment; */ ends a comment

On the right, we have the visual mockup of our code. Note that only the following tags are visually displayed, whereas the other tags modify the formatting of the document:

  • p – paragraph

Side note: The comments are utilized by a web designer so as to avoid constant confusion by providing a quick insight as to what the particular line(s) do.


Learn it!

Apply your knowledge by checking out some of these useful links:

http://www.w3schools.com/html/html_css.asp

http://www.w3schools.com/css/css_intro.asp

http://www.w3schools.com/html/html_examples.asp

https://www.codecademy.com/tracks/web

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

Advertisements