Skip to main content

Apply CSS in HTML page -Khabork

What is CSS ?
CSS is the style sheet type documents, CSS stands for Cascading Style Sheet. By CSS we can style our html page , CSS describe how our html page are displayed in the screen or other media.By css we can do many work ,it controls the Layouts of multiple web pages.
How use CSS in HTML

How Write CSS ?
CSS is so simple to write. Mainly it targets the the HTML elements by using the Html Class and Html Id. At first it targets the HTML elements then it writes the according its Styles. CSS we can write two ways, those are

i) In HTML Page 

In this type Html we write the CSS code within  the HTML code by using the  <style>  <style> Tag below the <head> </head>  Tag in Html Page . If the html pages are so small or Don't have many CSS code then we write this type of in build CSS  code. This types of CSS codes are do simple apply  CSS  in HTML  page . 
Example : 
<style>
 #example
 {
color:red  ;
font-size: 50px;
} 
</style>
<body><h1 id="example">Hello World</h1><body>
Out Put : Hello World

ii) External CSS File 
 The other written type CSS is the External CSS File when the HTML file is so much bigger and the CSS code also so many then for the CSS coding we make a External CSS File and Link with the HTML file. The Link will attached between the <head> </head> Tag. The Link looks like
<link rel="stylesheet" type="text/css" href="example.css">
here rel is the relation with the documents and type means which type of documents is that ,here the CSS Text type documents and href is the location and name of the documents apply  CSS  in HTML  page .
Example :
Html code :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/Log_in_Sign_Up.css">
</head>
<body><button id="btn_1">Click Me</button></body>
</html>
External CSS code
#btn_1
{
width:120px;
height: 40px;
background-color: green;
color:rgb(255, 255, 255);
border-radius: 5px;
border: white 1px solid;
font-size: large;
}
Out Put :



How Target HTML Elements for CSS ?

 CSS work by targeting the HTML elements . At first the CSS targets one or more elements of HTML then Styles the element or elements. The Html can targets in two ways that's are 
i) By Id
ii) By Class   

 i) By Id
In this type targeting we give every HTML elements a Unique Id
then we target the element in CSS using the Unique Id and then 
we style the element.When write Css by the Id the we must have to write the hashtag (#) symbol before the Id, Like as Apply  CSS  in HTML  page  #example1{ }

Example:
html code :
<h1 id="head_1">Hello World</h1>
<p id="para_1">I am a student i am learning how to Terget the Html Elements in CSS
</p>
CSS code :
#head_1
{
color:green;
font-size: 40px;
}
#para_1{
color: red;
font-size: 20px;
}

 Out Put :

Hello World

I am a student i am learning how to Terget the Html Elements in CSS

ii) By Class
In this type targeting we give every HTML elements a Unique class Id then we target the element in CSS using the Unique class Id and then we style the element.When write Css by the Id the we must have to write the Dot (.) symbol before the Id, Like as
Apply  CSS  in HTML  page .example1{ }
Example:
html code :
<h1 class="head_1">Hello World</h1>
<p class="para_1">I am a student i am learning how to Terget the Html Elements in CSS
</p>
Css Code:
.head_1
{
color:green;
font-size: 40px;
}
.para_1{
color: red;
font-size: 20px;
}

Out Put :

Hello World

I am a student i am learning how to Terget the Html Elements in CSS


Out Put remains same by using Id or Class . This is so simple to write HTML with Css. Apply css in HTML is so simple, use css in your html page and make your page attractive.





Labels:

Comments

Post a Comment

Comment Here

Popular posts from this blog

Indian Food Culture -Khabork

Indian food culture Indian food culture  is the best in the world. Northern Indian food primarily includes items which are surge Linked like Tandoori roti ,garandma, Kulcha, etc. South Asian matter primary includes items which are created of cereal solid like Idli, Sambar vada, Upma ,Dosa etc. Indian Food Indian food corporation In India  other kinds of food like  North Indian food ,  South Indian Food  etc. North Indian Food primarily includes items are sugar linked like Tandoori roti grandma,kulcha etc. East Indian food provides the sweet dish like rashogolla, sandesh etc. South Indian matter primarily includes items which are created of cereal solid like Idli,sambar,vada,dosa,ctc. Chili is most important for every Indian.     I ndian food, street In Indian food Culture the most reliable cuisine of India is the India neighborhood food, which will be purchased just for same rupees portable kiosks seen in the Indian cities and town. These street vendors provide wa
6 comments
Read more

What is Corona Virus ? Novel Coronavirus (2019-nCoV) -Khabork

What is Corona Virus ?          Coronaviruses are   an outsized  family of viruses found in both animals and humans. Some infect people and are known to cause illness  starting from  the  cold  to more severe diseases  like  Middle East  Respiratory Syndrome (MERS) and Severe Acute Respiratory Syndrome (SARS). What is "Novel" Coronavirus (2019-nCoV) ? A novel coronavirus (CoV) may be a new strain of coronavirus that has not been previously identified in humans. The "novel" is defined as 2019-nCoV  ,it is not seen before the out break was reported in December 2019 in Wuhan city in China. How Dangerous on It ?? As with other respiratory illnesses, infection with 2019-nCoV can cause mild symptoms including a runny nose, pharyngitis , cough, and fever. It is not only one symptoms by the Corona Virus can be   fever , cough,  pharyngitis and  runny nose  .   It are often more severe for a few persons and may cause pneumonia or breathing difficulties.
3 comments
Read more

Valentines Day Images💕 -Khabork

💕 Valentines Day 💕 It's also called  Saint Valentine's Day  or the  Feast of Saint Valentine. Originating as a Western Christian fete day honoring one or two early saints named Valentin's, Valentine Day is recognized as a big cultural, religious, and commercial celebration of romance and romantic love in many regions round the world.The day first became related to romantic love within the circle of Chaucer within the 14th century, when the tradition of code of conduct flourished. happy valentine day 💕 Who is Your Valentines ? love is within the air! are you able to feel it? Every Valentine Day , Valentine Day rolls around and that we find ourselves trapped within the excitement of candy, flowers, cards and hearts of red, white and pink. So who is your valentine this year? If you are like most youngsters , you almost certainly have many them. Parents, sisters and brothers, aunts and uncles, neighbors, teachers and every one kinds of friends at college — th
Post a Comment
Read more