how to add css to html file

Question

1.00/5 (1 vote)

See more:

i have one html file and css file.how can i add my css to my html?please am new to this

my css

body{
margin:auto;
display:block;
}

div{
border:1px dashed red;/*Delete this line to erase red dashed border*/
}

#box{
margin:auto;
width: 1100px;
height: 500px;
}

#LeftColumn{
margin-top: 50px;
margin-left: 20px;
width:40%;
float:left;
}

#RightColumn{
margin-top: 50px;
margin-right: 20px;
width:40%;
height:200px;
float:Right;
}

.BoxData{
text-align:right;
font-weight:bold;
margin-top:20px;
}

.BoxTitles{
width:73%;
color:#B18904;
text-align:left;
border-bottom:2px solid #B18904;
}

my html

HTML

   <section>
<div class="tabInnerDiv" ng-cloak>


           <table align="left">
               <tr>
                   <td><b> General</b></td>
               </tr>
               <tr>
                   <td></td>
               </tr>
               <tr>
                   <td>Ldz Name</td>
                   <td>
                       <input type="text" />

                   </td>

               </tr>

               <tr>
                   <td>Ldz Description</td>

                   <td>
                       <input type="text" />

                   </td>

               </tr>

               <tr>
                   <td>Threshold Limit</td>

                   <td>
                       <input type="text" />

                   </td>
               </tr>
           </table>



           <table>
               <tr>
                   <td><b>Operational</b></td>
               </tr>

               <tr>
                   <td>Water Volume</td>
                   <td>
                       <input type="text" />

                   </td>

               </tr>

               <tr>
                   <td>Summer Pressure Range(bar)</td>

                   <td>
                       <input type="text" />

                   </td>

               </tr>

               <tr>
                   <td>Winter Pressure Range(bar)</td>

                   <td>
                       <input type="text" />

                   </td>
               </tr>
           </table>


           <table align="left">
               <tr>
                   <td><b>Audit</b></td>
               </tr>

               <tr>
                   <td>Last Modified By:</td>
                   <td>
                       <input type="text" />

                   </td>

               </tr>

               <tr>
                   <td>Last Modified Date Time</td>

                   <td>
                       <input type="text" />

                   </td>

               </tr>

           </table>


           <table>
               <tr>
                   <td><b>Network Mapping</b></td>
               </tr>

               <tr>
                   <td>LDZ</td>
                   <td>
                       <input type="text" />

                   </td>

               </tr>

               <tr>
                   <td>Associated BA System</td>

                   <td>
                       <input type="text" />

                   </td>

               </tr>


               <tr>
                   <td>Sort Order</td>

                   <td>
                       <input type="text" />

                   </td>

               </tr>

           </table>

       </div>
   </section>

Posted 20-Jan-16 21:08pm

Manidas Payyoli

Add a Solution

Comments

Sergey Alexandrovich Kryukov 21-Jan-16 3:22am

It's done by reading documentation on HTML. Is it really seems to be so difficult? You could solve this problem is 5 minutes.
—SA

Hemant Singh Rautela 21-Jan-16 3:23am

If you are new then, learn first how to use CSS & how many ways to use CSS... ;-)

Jochen Arndt 21-Jan-16 3:46am

It took me less than a minute to find http://www.htmldog.com/guides/css/beginner/applyingcss/ which explains the three ways to apply CSS.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CanniDanny · Accepted Answer · 2016-01-21T01:55:00

There are two ways to do this. You can include it at the top of the HTML file in the <head> section. Or you can have a separate CSS file, which is the norm, and link it in the head file.

Your CSS file will look like this:

File name: style.css and save it in the same folder as the HTML file.

body{
margin:auto;
display:block;
}

div{
border:1px dashed red;/*Delete this line to erase red dashed border*/
}

#box{
margin:auto;
width: 1100px;
height: 500px;
}

#LeftColumn{
margin-top: 50px;
margin-left: 20px;
width:40%;
float:left;
}

#RightColumn{
margin-top: 50px;
margin-right: 20px;
width:40%;
height:200px;
float:Right;
}

.BoxData{
text-align:right;
font-weight:bold;
margin-top:20px;
}

.BoxTitles{
width:73%;
color:#B18904;
text-align:left;
border-bottom:2px solid #B18904;
}

Then in the <head> section link in the css file like this:

HTML

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

If storing the css in the head of the file then it would look like this:

HTML

<head>
<style>
body{
margin:auto;
display:block;
}
 
div{
border:1px dashed red;/*Delete this line to erase red dashed border*/
}
 
#box{
margin:auto;
width: 1100px;
height: 500px;
}
 
#LeftColumn{
margin-top: 50px;
margin-left: 20px;
width:40%;
float:left;
}
 
#RightColumn{
margin-top: 50px;
margin-right: 20px;
width:40%;
height:200px;
float:Right;
}
 
.BoxData{
text-align:right;
font-weight:bold;
margin-top:20px;
}
 
.BoxTitles{
width:73%;
color:#B18904;
text-align:left;
border-bottom:2px solid #B18904;
}
</style>
</head>

More on external stylesheets: CSS How to[^]

how to add css to html file

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us