How to Link CSS with HTML documents?

on

 It is very interesting question as web page is colorless, dull, unstructured without CSS. In this article, you will learn how to link CSS with HTML page.

With CSS, you can control the color, font, the size of text, the spacing between elements, positioning of elements, images and their settings(background, position, size) different displays for different devices and screen sizes, and much more!

There are three ways to connect CSS with HTML page.

  • Inline - by using the style attribute inside HTML elements
  • Internal - by using a <style> element in the <head> section
  • External - by using a <link> element to link to an external CSS file
Check this example to have a better understanding of this topic.


Use this HTML to Create this


<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Login Template</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:description" content="">
  <meta property="og:image" content="">

  <link rel="icon" href="/favicon.ico">
  <link rel="stylesheet" href="assets/css/bootstrap.min.css?v=1.0">
  <link rel="stylesheet" href="assets/css/external.css?v=1.0"><!--External CSS--->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
">

</head>
<!---Internal CSS-->
<style>
.sec-div
{
    display: flex;
    flex-direction: row;
}
.left-sec-div
{
    background: red;
    padding: 50px;
    width: 50%;
}
.right-sec-div
{
    background: green;
    padding: 50px;
     width: 50%;
}
</style>
<!---Internal CSS-->

<body>
  <div class="container">
    <!--Inline CSS-->
<div class="first-div" style="background: blue;padding: 30px;margin-top: 50px;">
    </div>
     <!--Inline CSS-->
    <div class="sec-div">
        <div class="left-sec-div">
        </div>
        <div class="right-sec-div">
        </div>
    </div>
    <div class="text-sec">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
    </div>
  </div>
  <script src="assets/js/jquery-3.2.1.slim.min.js"></script>
   <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
</body>
</html>


Use an external CSS file to complete it

body
{
    background: #c1c1c1;
}
.text-sec
{
    background: #fff;
    padding: 10px;
}
.text-sec p
{
    font-size: 16px;
    line-height: 1.5;
    text-align: justify;
}

I hope it will help you to understand the linking of CSS with HTML Page. Kindly share it with others. Thank You! :)




Comments

Post a Comment