If you make the commitment to understanding two of the most important languages your website is using, CSS and HTML, you can then begin to understand the endless capabilities your site has! You've likely heard the terms before as they are vital to the creation of any web page. To begin, it may help to know the definition of each.
Well first, what do they stand for?
HTML - Stands for Hypertext Markup Language. It is the backbone of any and all web pages. A web page contains HTML in order to display images, text, and other resources through a web browser. At the highest level, it is simply a document organizer for your web page. The file extension for HTML is .html
CSS - Stands for Cascading Style Sheets. This is a language used to stylize your HTML elements. Web designers use CSS to efficiently customize their web page designs by changing things like fonts, colors, positions of elements, etc. The file extension for CSS is .css
How do they work together?
HTML is needed for all web pages to even exist, but CSS is actually optional. If you were to create a webpage using only HTML, it would still work because browsers do have built-in default styles. They're not pretty, but they are functional and that is all that HTML really cares about, being functional. However, there are ways for both languages to be used together. When creating emails, modern email programs will now offer the ability to add custom CSS and HTML directly into the application. For example, you may insert an original image that is rectangular by using HTML but then use CSS to format it into a circular shape and then position it within the email in the very top left corner. However, it is important to note that an email has a lot less code involved than a website would. Although past practices included using the languages within the same file, it is now highly recommended to have separate .css and .html files for efficient development.
But creating separate files sounds like more work...
It's actually not. Having a separate global .css file from your .html files saves designers a lot of work because CSS has the ability to easily assign a uniform layout/design for multiple pages at once. That's why designers love it. Think about it this way, if you realized that you had to make your logo slightly larger on every single page It would take hours to add CSS to each page's HTML file. With CSS you can add design features to classes that link to the classes you assigned in the HTML file. It is a great solution because it gives designers more time to focus on custom design while still maintaining that uniform look across an entire site.
Why is CSS all the rage right now? Responsiveness.
One of the best parts about using CSS is that it creates an opportunity to make your website responsive to any device that is being used to view it. HTML can only do so much when it comes to formatting. Using CSS, you can easily tell your website to change its layout once it hits an average mobile screen size. So, instead of your visitor having to squint to see those 3 images across the bottom of your site, they are now stacked on top of each other because the CSS is telling the HTML of your website, "Hey, I noticed this visitor is using their phone screen instead of a big computer screen, so let's change the size and order of particular elements you have to make it easy for them to scroll through and find what they need".
Again, to lay it out plain and simple, HTML provides the structure of a web page while CSS provides the visual layout (including responsiveness). There are many differences between the two, but when working together both languages can create unique and modern websites that cater to the needs of any business. This particular blog is meant to provide understanding at a very high level. We dive deeper into the coding world with our Informatics U courses. Our web developers eat, sleep and breathe these languages and that is why when you choose Informatics for your website redesign the results show! Contact us today to get started.
