How To Link/Connect CSS File With HTML.. Some Basics Of HTML and CSS !! Chap #1

LINK HTML WITH CSS

What is HTML and CSS ? What is the use of them ? How we use them ? what they perform ?

• HTML = Hyper text mark up language 
• CSS     = Cascading style sheet

HTML is the base of a web page. Everything you create or work on is HTML on a web page.

Like to make it look good/style it we use CSS and to perform a random task we apply javascript and for other actions we apply back-end programming languages !

In this scenario I will be joining a Css file with html by creating a Css file. In my older post of Web Designing I created a html file namely new.html 

I'm going to open it again and gonna show you how to connect it with css and make some edits we want to see !

STEPS TO PERFORM TASK !

1. Make a folder
2. Copy/Paste HTML file or create one in it
3. Create a Css file
4. Paste correct code between the head tags
5. perform some codes on css file to make it look different.

I'm going to perform all the 5 task I discussed above ..

Creating a css and html file in a separate folder and joining them with a single line of code !

CREATING CSS FILE 

A FOLDER WITH CSS AND HTML

---------------------------------------------------------------

Div is basically a container, since i have connected css file to a html page, if i make try to make any

changes it will be change on the whole page ! but if I wanted to make a change on a particular place ?

This is why we create different container i.e. Div and to work on it we set it as class or ID .

I always use class because its better than id.

How to call ID and class :

• ID = #name
• class = .name

HOW TO MAKE RELATION/CONNECTION

HOW ABOVE CODE WILL PERFORM [CSS FILE IS EMPTY]

Creating a div namespace = "learning_css"

Just putting a heading in it with h2 tags

Here I open the range of my class learning_css

with [ .learning_css {} ]

Things I edit here :

• the width of my container 
• the height of my container
• the background color
• to change the text position !

 RESULTS WITH CODE

Things I edit here :

• margin of my container from left 

Edit its position from left to center through css, thats how it is done professionally !!

RESULTS WITH CODE

Enjoy Learning With TrueSight !!