HTML and CSS, the Yin and Yang of building Websites.
HTML, known as hypertext Markup Language and CSS, known as Cascading Style Sheets, are both core essentials for building Web Pages. HTML is used to provide the structure of the page , meanwhile css is used to develop the visual elements and layout of the webpages on different devices.
Soooo… What is HTML?
HTML is at the heart of every web page, Despite the complexity of a site or number of technologies required, it’s an indispensable skill for any web professional. It’s the origin of anyone learning how to design content for the web. And, fortunately for us, it’s surprisingly straightforward to learn.
Link: https://sdz-upload.s3.amazonaws.com/prod/upload/page_html.png
Markup languages work in the same way as you just did when you identified those content types, except they use HTML tags to do it, also known as “elements.” These tags have pretty intuitive names: Header tags, paragraph tags, image tags, and so on.
Every web page is made up of a bunch of these HTML tags denoting each type of content on the page. Each type of content on the page is “wrapped” in, i.e. surrounded by, HTML tags.
Start this paragraph with an opening paragraph tag: <p>. The “tag” part is signified by open brackets, and the letter “p” tells the computer that we’re opening a paragraph.
Once a tag has been opened, all of the content that follows is considered to be part of that tag until you “close” the tag. When the paragraph is completed,a closing paragraph tag: </p> would be placed. Notice that closing tags look identical to the opening tags, except that there is a forward slash after the left angle bracket. Here’s an example:
Using HTML, you can add headings, format paragraphs, control line breaks, make lists, emphasize text, create special characters, include images, create links, formulate tables, control some styling, and much more.
The other half: CSS.
So now that you know how to build a website using HTML, lets learn how to design it and give it life!
What can CSS do you ask? Well… everything! From changing the size and colours of buttons to the fonts of the texts located on the webpage. You can make a mediocre search bar turn into one of epic proportions with just some simple CSS. If HTML is the drywall, then CSS is the paint.
CSS is a must when designing a website. If you don’t use a single shred of CSS, your website will look something like this.
https://cms-assets.tutsplus.com/uploads/users/30/posts/22489/image/www.png
Feel irked? Same actually. That is how a webpage normally looks without the implementation of CSS.
Below is a comparison of the same webpage, the one on the left has CSS implemented while the one on the right does not. Keep in mind that they are both the same webpage.
Here are a few examples of how CSS can overhaul the look and feel of different elements.
This is a button without any CSS.
With CSS, your buttons can bloom into:
A search bar without CSS:
Search bars with CSS
CSS also enables you to set designated areas for certain content. You can set the position of certain paragraphs, pictures or buttons to make the webpage look more pleasing to the eye. This makes it easier for you to rearrange your content with a hierarchy in place.
As you can see. CSS can really add to the atmosphere of a website. HTML and CSS are two sides of the same coin in building a website. A website cannot exist when either one of them is missing.
ALL DONE!
Now that you know all the things that you can accomplish with HTML and CSS, you can try it out for yourself! A website that we recommend for you if you want to quickly learn about HTML and CSS is www.w3schools.com. See you out there in the Internet Overworld!
