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

    How CSS works?

    We wrote our first CSS style but still, the things wouldn’t be very much clear to an amateur person. Let’s look at how CSS works on the DOM model.

    DOM model - Document Object Model

    CSS Working

    Source: Wikipedia

    Just like how any artist makes a structure of his art, similarly, when our website is loaded in the browser it creates a structure to manage the execution of different tags of HTML.

    Using DOM, HTML, as well as CSS of the web page, can be accessed along with the behaviour of the HTML elements. So, Document Object Model is a sort of API that represents and interacts with HTML documents.

    Working of CSS

    So basically after the DOM model is created in HTML, the browser parses CSS to the selectors we used (you’ll learn more about selectors in a while). The properties or the rules written in CSS are then applied to individual spans.

    To know more about the document structure you can refer to this as well:

    https://rahul3133.github.io/CodewithRahul.com/htmls/html-structure1.html/
    Owner of this WebPage Image

    CodeWithRahul

    Copyright © 2023 CodeWithRahul.com