{"id":21540,"date":"2020-08-22T06:29:38","date_gmt":"2020-08-22T13:29:38","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=21540"},"modified":"2022-08-14T16:03:42","modified_gmt":"2022-08-14T23:03:42","slug":"html-vs-css","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/html-vs-css\/","title":{"rendered":"HTML vs CSS: What\u2019s the Difference Between the Two?"},"content":{"rendered":"\n

An aspiring web developer learns HTML<\/a> and CSS as part of their tech career training.In this article, we look at the difference between the two languages and two examples: one using HTML, the other using HTML and CSS. The hope is that you see the advantage to using CSS to make your markup more readable.<\/p>\n\n\n\n

What is HTML? <\/h2>\n\n\n\n

HTML stands for Hypertext Markup Language. It is the building block of web pages and web applications. An HTML document consists of two parts: the head and the body. <\/p>\n\n\n\n

The head of an HTML document contains all of the information needed for a web page to load or be listed on search engines \u2013 all of which are meta information you won\u2019t directly see on a webpage.
<\/p>\n\n\n\n

The body is everything the client or user sees. It is made up of HTML that provides the structure to your web page. Here is an example of a web page structured with just HTML code: 
<\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n <head>\n   <meta charset=\"utf-8\">\n   <meta name=\"viewport\" content=\"width=device-width\">\n   <title>Sample HTML page<\/title>\n <\/head>\n <body>\n   <div>\n     <header>\n       <h1>HTML Demo<\/h1>\n       <nav>\n         <a href=\"#\">Link #1<\/a>\n         <a href=\"#\">Link #2<\/a>\n         <a href=\"#\">Link #3<\/a>\n       <\/nav>\n     <\/header>\n     <main>\n       <h2>HTML is:<\/h2>\n       <ul>\n         <li>The skeleton or structure of application<\/li>\n         <li>Provides meaning to your application with semantic tags like &lt;caption>, &lt;main>, &lt;strong>, and &lt;h1><\/li>\n         <li>Styling is next to nil besides the default styling of certain elements.<\/li>\n \n       <\/ul>\n     <\/main>\n   <\/div>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
When you run the code above, you see a pretty bare bones page with no styling associated with it besides the default styles associated with the <h1>, <li> and <a> tags. <\/p>\n\n\n\n
Inline Styling<\/h2>\n\n\n\n
We provide styling inside our HTML, with what is called \u201cinline styling\u201d. Using the \u201cstyle\u201d attribute, we can encapsulate rules for each individual element inside a pair of quotation marks. A sample document with inline style looks like so:
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n   <meta charset=\"utf-8\">\n   <meta name=\"viewport\" content=\"width=device-width\">\n   <title>Sample HTML page<\/title>\n <\/head>\n <body style=\"font-family: Roboto;\">\n   <div>\n     <header style=\"width: 100%; display:flex; justify-content: space-between; align-items: center;\">\n       <h1 style=\"width: 40%; letter-spacing: 2px;\">Inline Style Demo<\/h1>\n       <nav style=\"width: 60%; display: flex; justify-content: space-around;\">\n         <a style=\"text-decoration: none;\" href=\"#\">Link #1<\/a>\n         <a style=\"text-decoration: none;\" href=\"#\">Link #2<\/a>\n         <a style=\"text-decoration: none;\" href=\"#\">Link #3<\/a>\n       <\/nav>\n     <\/header>\n     <main>\n       <h2>Inline Styling is:<\/h2>\n       <ul>\n         <li>Rules for your element's decoration in <em>style<\/em> attribute<\/li>\n         <li>Syntax is <strong>style=\"width:100%; font-size: 1.3rem;\"<\/strong> -- key:value pairs separated by semicolons<\/li>\n         <li>Any element that needs to be controlled with style needs to have their own style attribute with key:value pairs<\/li>\n         <li>How can this get cumbersome? <\/li>\n       <\/ul>\n     <\/main>\n   <\/div>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
This can get pretty time-consuming and cumbersome the larger our application is. If we have to provide inline-styling to all of our HTML elements individually, your markup can become quite unreadable, not to mention make it quite lengthy. 
<\/p>\n\n\n\n
A resolution to this problem was created with CSS.<\/p>\n\n\n\n
What is CSS? <\/h2>\n\n\n\n
Cascading Style Sheets (CSS) was created to solve the problem that was created with readability and the amount of code written when applications scaled. Separating the styling from the actual structure of the application allows for separation of concerns: HTML only deals with the structure of the document. CSS only deals with the styling of that document. 
<\/p>\n\n\n\n
Stylesheets create the rules that will govern the HTML markup. This stylesheet can be internal or external. An internal stylesheet is placed in the head of your HTML document in between <style> tags.
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n   <meta charset=\"utf-8\">\n   <meta name=\"viewport\" content=\"width=device-width\">\n   <title>Sample HTML page<\/title>\n   <style>\n     body {\n       font-family: \"Roboto\";\n     }\n \n     header {\n       width: 100%;\n       display: flex;\n       justify-content: space-between;\n       align-items: center;\n     }\n \n     header h1 {\n       width: 40%;\n       letter-spacing: 2px;\n     }\n \n     header nav {\n       width: 60%;\n       display: flex;\n       justify-content: space-around;\n     }\n \n     nav a {\n       text-decoration: none;\n     }\n   <\/style>\n <\/head>\n <body>\n   <div>\n     <header>\n       <h1>Inline Style Demo<\/h1>\n       <nav>\n         <a href=\"#\">Link #1<\/a>\n         <a href=\"#\">Link #2<\/a>\n         <a href=\"#\">Link #3<\/a>\n       <\/nav>\n     <\/header>\n     <main>\n       <h2>Internal Stylesheets:<\/h2>\n       <ul>\n         <li>Are located in the &lt;head> of the HTML document.<\/li>\n         <li>Are inside the head, the internal stylesheet is located in between &lt;style> tags.<\/li>\n         <li>The Syntax changes from inline styling with properties and values in between semicolons to actual CSS with blocks of rules<\/li>\n         <li>How can this get cumbersome? <\/li>\n \n       <\/ul>\n     <\/main>\n   <\/div>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
The internal stylesheet starts that separation of concerns. As our CSS grows to hundreds of lines, the need to separate our code becomes more apparent. We take our CSS and move it to an external stylesheet, bringing all of the styling rules to its own file and making all of the structural elements its own file. We link the two with a link in the head of our HTML document. 
<\/p>\n\n\n\n