back

</>CodeWithRahul

More
  • Home
  • Cources
  • Tutorials
  • Tutorials
  • Projects
  • Notes
  • Contact
  • Work With Us
  • HTML
  • CSS
  • JAVASCRIPT
  • CC++
  • PHP
  • PYTHON
  • REACT JS
  • DSA

</>Code With Rahul

Create an account
  • INTRODUCTION
    • Information & History
    • Your first CSS Website
    • How CSS Works?
    • Ways to add CSS
    • CSS Selectors
    • CSS Comments
  • CSS Properties
    • CSS colors
    • CSS backgrounds
    • CSS Borders
    • CSS Image
    • CSS Videos Embedding
    • CSS Fonts
    • CSS Text Styling
    • CSS Padding
    • CSS Margin
    • CSS Hover
    • CSS Links
    • CSS Combinators
    • CSS Pseudo Classes
    • CSS Buttons
    • CSS Overflow
    • CSS Float
    • CSS !Important
    • CSS Maths Function
    • CSS Size
    • CSS Positioning
    • CSS Z-index
    • CSS Forms
    • CSS Navigation
  • CSS Designing
    • CSS Display
    • CSS FlexBox
    • CSS Grid
    • CSS Meida Queries
  • CSS Advance Topics
    • CSS CSS 2D
    • CSS Transform
    • CSS Transition
    • CSS Border Image
    • CSS Gradients
    • CSS Inherit
    • CSS Shadows
    • CSS ToolTip Text
    • CSS Border Image
    • CSS Masking
    • CSS Pagination
    • CSS Meida Queries Advance
    • CSS Animation
  • CSS FAGS
    • CSS Questions

    Ways to add CSS

    So, there are mainly three ways to add CSS to any HTML document. One of the ways, we have already seen.

    Inline CSS:

    In this method, we can simply add CSS to the particular HTML tag using the style keyword.

    <h1 style=" color : red ">Hell, I'm Using In line CSS</h1>

    Ouput :

    First Inline CSS

    This way minute styling of the HTML document can be easily done without any hassles.

    But still, generally, this method of adding CSS is not advised as it can create confusion in the tags and thus decrease the readability of code.

    Also, with this method of styling, you can’t use quotations within inline CSS. The quotations will be treated as the end of style and therefore stopping the block of code.

    Internal CSS:

    This method would sound similar to you because we used this method originally to write our first CSS code.

    Let’s try that again using another property. Create a style tag in the head of the HTML document and write the following code.

    <style>
        body {
            color: turquoise;
            background-color: brown;
            text-decoration: underline;
        }
    </style>
                                

    This tag selects the body and performs 3 operations on the text written in the body. Therefore the output would look like this-

    Ouput :

    First Internal CSS

    External CSS:

    As the name suggests, in this method we explicitly create a file name style (name can be changed) with the extension ‘.css’. Then we link this file in the head tag of the HTML document.

    This style sheet can be linked with any number of documents thus making it easy to use everywhere.

    Let’s look at the implementation of the same. First, you need to create a file with the name “style.css” in the same folder where your HTML file is present. Later using the following command in the Head tag the file would be linked with the HTML document.

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

    Here, “rel” defines the relationship between a linked resource and the current document, and “style.css” is the file we have created. Right now my file is already in the same directory as the HTML file so I don’t need to give the absolute path.



    As you can see, I used the basic functionality of VS code and directly created a file called “style.css”. (I used ctrl+click to open the popup bar)

    These were some ways in which you can link your CSS to your HTML file. But as a rule of thumb, external CSS is the best method to do so.

    Owner of this WebPage Image

    CodeWithRahul

    Copyright © 2023 CodeWithRahul.com