What is html and css?
You have most definitely heard these terms before ( at least html ), but do you understand what it is exactly that everyone is referring to?
HTML is an acronym that stands for Hyper Text Markup Language, this comes in handy as trivia but doesn't really help the cause of knowing what html really is.
HTML boils down to a text document that is structured a certain way so that computers can parse information. It is structured so that items are organized in a hierarchy from the document level down to an individual piece of text. This is accomplished by using tags, which are just special blocks of text that wrap other blocks of text. For example, the highest level in the html hierarchy, is the <html> tag, this tag contains all other information for that html document. Because the tags will wrap around other tags and text they have a corresponding ending tag, such that <html>all the stuff in the document</html>. You can see how there is a start of a section and the end of the section. Inside the <html> tag, there are two other very common tags used <head> and <body>. The <head> tag defines meta information for the page, things that are not visible in the viewport of a browser but are used to define the title of the page and include any stylesheets. <body> is where the real action comes to live, this is where all the content for the page will be held, this is where the text and other tags that will show up in the viewport of your browser will go.
Inside the body there can be many many different tags, so many that I cannot explain them to you in this blog post. For example, if someone wanted to represet a list on the web page, they would use the tag <ol> which will created an ordered list. Inside this tag goes the list items, which are represented by the <li> tag.
Putting it all together:
<li>first list item</li>
<li>second list item</li>
This will render a list with numbers starting at the top and going down,when you open that html document in your browser, it will look like:
- first list item
- second list item
- so on
CSS on the other hand, has quite a different markup and purpose than html. CSS is an acronym for Cascading Style Sheets. CSS is used to style and change the appearance of an html document. It is widely used to keep the appearance details separated and abstracted from the html document layout. This helps programmers keep the html document more simple, to the point and more easily parseable by computers. This means that html documents can be made more search engine friendly by keeping all that appearance information separate. CSS also allows us to do many things with the appearance that were not possible before with html alone, such as styling many components all at once.
Some example css syntax:
The above syntax would make all the heading 1 tags of an html document have red text. CSS can become very complex when you pair it with a design that makes heavy use of graphics for backgrounds and uses more complex layouts.