What is CSS and How to use CSS in a webpage

on
what is css

CSS is called Cascading Style sheets. It is a core language. Through CSS, we make HTML webpage responsive and beautiful. As soon as the webpage of the website is designed as Font-Color, Text-Color, Background-Color, text-Shadow, text-Effects, or Website Layout, we use CSS to do all these tasks. Without CSS we can make the website but we cannot make the website beautiful and responsive (mobile friendly). Responsive means that when your website is open on mobile, tablet, laptop, or computer, then its Appearance (user interface) should be the same and the website should adjust itself according to the width of the device.

CSS  – How to use CSS in a webpage

CSS can be used with HTML webpage in three ways, let us know which method it is and the rules that we can use.

  • Inline CSS
  • Embed CSS
  • External CSS

INLINE CSS: Inline CSS is called CSS which we use directly with the elements (tags) in our HTML document. INLINE CSS has the highest loading speed, so this CSS technique is written directly with the HTML element. INLINE CSS cannot be reused for other elements. To apply this, we use the style attribute inside the element inside the body section.

       EXAMPLE :

<!DOCTYPE html>

<html>

    <head>

        <title> Inline CSS Example </title>

    </head>

    <body>

        <h1 style="text-align: center; color: darkblue; background-color: darkgoldenrod; “>Inline Css Example Page</h1>

    </body>

</html>


EMBED CSS: To use Embed CSS, we can use Embed CSS by referencing Class Selector, ID Selector, Tag Reference, etc. We can REUSE the embed CSS. Embed CSS is written within the HEAD section of the <STYLE> ….</STYLE> tag. Let us know how this embed CSS works.

Example:

             <!DOCTYPE html>

<html>

    <head>

        <title> Inline CSS Example </title>

        <style>

            p{

              text-align: center;

              font-style: italic;

              font-size: x-large;

              background-color: blueviolet;

              text-shadow: 0px 0px 4px red ;

              color: white;

            ,

        </style>

    </head>

    <body>

        <p>Embed Css Example</p>

    </body>

</html>


EXTERNAL CSS: To use external CSS, we need to create an external CSS file, then we add that external file with our webpage. We add the external CSS file by giving the link reference under the head section. Inside this external file, we can use HTML tags, CSS selector, ID selector, by referring to HTML elements in any way. Like we referenced the elements inside the embed CSS. Let us know how to add the external file to your webpage for this. For this, we will need to create 2 files, the first file style.css and the second file test.html inside one folder we will keep these two files inside a separate folder.

Style.css File -1

p{

    text-align: center;

    font-style: italic;

    font-size: x-large;

    background-color:orange;

    text-shadow: 0px 0px 4px red ;

    color: white;

,

test.html File-2

<!DOCTYPE html>

<html>

    <head>

        <title> External CSS Example </title>

       <link rel="stylesheet" href="/style.css">

    </head>

    <body>

        <p>External Css Example</p>

    </body>

</html>

What are the advantages of CSS Styles

CSS is the core part of web development, with its help we can design responsive websites, website layouts, etc.

CSS is a cross-platform language which means it can be easily executed on any browser.

After writing CSS, we can minified it, this means that we can reduce the CSS code with the help of software so that we can increase the load time of the website.

Through CSS, we can create animation such as 2D or 3D animation for the website.

With the help of Bootstrap CSS, we can improve Animation, Advance Layout Design, UX (User Experience).

Comments

Post a Comment