texmith website exit icon
Press enter to confirm search term
basics of html texmith blog
HTML

How to Link CSS & HTML

Texmith website arrow icon

As you know now that CSS and HTML work together so you’ve to link them together in order to work them together. To work your CSS with HTML you’ve to link them both. There’s more than one way to link HTML and CSS. i.e.  

              1. Internal Stylesheet 
              2. External Stylesheet 
              3. Inline CSS Style 

              Internal stylesheet- Internal stylesheet is used to style an individual page. Multiple HTML documents cannot work at once, you’ve to style the pages individually. It is located in the <head> section of the webpage. 

               

              <!DOCTYPE html> 
              <html> 
              <head> 
              <style> 
              body {background-color: blue;} 
              h1   {color: blue;} 
              p    {color: red;} 
              </style> 
              </head> 
              <body> 
               
              <h1>This is a heading</h1> 
              <p>This is a paragraph.</p> 
               
              </body> 
              </html> 


              As stated, internal link requires to be in the head section. The given is the complete HTML format for better understanding of what goes where.  

              External link- External link is something that you can link your file with other files, this again requires HREF attribute. Your website is going to have several HTML documents and you cannot use the internal link method all the time as its going to get confusing for you after a point of time. Managing your CSS in an external file is much easier.  

              You still have to command your HTML document to look for the CSS Stylesheet. It follows the basic format of adding the links in the head section.  


              Remember to put all your files in the same folder in order to make it easy to read each other.  

               

              <! Doctype html> 
              <html> 
              <head> 
              <title> HELLO WORLD </title> 
              <link href =” file name you want to link” rel=”stylesheet” type=”text/css”> 
              </head> 
              <body> 
               
               </body> 
              </html> 

               

              Inline Stylesheet- Inline style CSS applies only on a single HTML element, it styles each HTML element individually in order to style your complete HTML document, you’ve to apply your Inline style CSS to every single HTML element.  

               

              <h1 style="color:blue;">This is a Blue Heading</h1>  

               

              This particular method is not suggested, when building a website you’ve a lot HTML to work on and applying inline CSS to every single element is going to time consuming and messy after a point of time. Separating HTML and CSS is much easier as it is easier to understand and read your codes. 


              So far what we have learnt is,

              1. Internal style sheet is used in the head section <head> of HTML.
              2. External style sheet is used by using a separate CSS file.
              3. Inline stylesheet is used in each HTML element.


              Interested in working with Us? Drop us a line!