AI Series: what is the difference between HTML, CSS, and JavaScript. Connect HTML and CSS

Hope you have created your skeleton code for the HTML file we created in our last video. In this section, we will make our app or game look pretty and exactly like the final output. Though it will still be the look and feel and the app will not work. The app will start working when we add the javascript in our next videos.

Before we move further, let's understand what is the difference between HTML, CSS, and JavaScript?

When you’re designing or developing a website, there are three different coding languages that you will want to be aware of: HTML, CSS, and JavaScript.

What Can You Do With Each Programming Language?
With HTML, you will be able to create the structure of your website.
CSS gives you the ability to make the website look more visually appealing.
As for JavaScript, this is a robust programming language that allows you to effectively change the HTML and CSS components of your website to match your specifications precisely.

If you own a website but don’t know much about coding, knowing the difference between these three programming languages should help you better understand what goes into developing a website. If ever a problem occurs with a component of your site, having a clear idea of what these programming languages are may be enough to help you properly diagnose what is causing the problem and how to fix it.

In this video we are going to learn about linking the html and CSS files

An app does not look complete unless it is styled to the max. This is where CSS is very important with regards to webapp development. Without a good looking interface, your players or users will not have a feel-good factor.

So now, we are going to create another file that is style.css. That will be our stylesheet. Now, how will the browser know that you have to apply this style.css file to index.html file? That can be done by using a link tag that will link these two files.

Link tag is included in the head tag. Then you can mention relationship with rel as a stylesheet since we are linking to a stylesheet. Also, the type of the file will be text/css. Href is going to be the hyper link reference. As both these files are in same folder, we have to just say style.css and browser will take it from same file location. Finally link is an empty tag so we give a forward slash.

This links our index.html file with css file in link tag.

We are going to be using universal selectors. This selector selects pretty much every single element in HTML page. We will be using this selector for the default value.

We will be using the start symbol as a universal selector. When we select the start symbol, that means you are selecting every element. Open and close curly braces. We want to set a value of zero to margin and padding of the page. Depending upon the browser you use to access the web page, browser will give some default padding and margin to every element.

In CSS, a margin is a space around an element's border, while the padding is the space between an element's border and the element's content. Put another way, the margin property controls the space outside an element, and the padding property controls the space inside an element.

We will look into other styling elements in our next video.
#artificalintelligence #science #youtube #wethedemigodsmotivational
Web design
Be the first to comment