CSS differencing calculator
Calculator compares two style sheet documents (CSS) and finds out differences between them.

Beta version#

BETA TEST VERSION OF THIS ITEM
This online calculator is currently under heavy development. It may or it may NOT work correctly.
You CAN try to use it. You CAN even get the proper results.
However, please VERIFY all results on your own, as the level of completion of this item is NOT CONFIRMED.
Feel free to send any ideas and comments !

Settings - how do you want to compare your texts#

Ignore white characters

The first CSS text#

The second CSS text#

Found differences (CSS)#

// This is somea CSSnew comment↵
body {↵
  font-size: 16px15px;↵
  color: redblue;↵
}↵
↵
@media (min-width: 512px) {↵
  body {↵
    font-size: 20px18px;↵
    color: greenyellow↵
  }↵
}↵

Compare statistics#

Summary
Comparison method
Case sensitive
Ignore white characters
Compare result
Are CSS documents equalno
Are texts equal
(strict char-by-char comparison)
no
Length of entered texts
Length of the first text152
Length of the second text151
Differences found in CSS documents
Number of added pieces6
Number of removed pieces6
Number of unchanged pieces7

Some facts#

  • The Cascading Style Sheets (CSS) is a way of describing the appearance of websites.
  • CSS has the form of a human understandable text.
  • Cascading style sheets allow us to separate page content from how it is presented.
  • The CSS data includes information such as:
    • size, type and font,
    • background for the whole page or individual elements,
    • visual arrangement of elements relative to each other,
    • etc.
  • Websites remain valid after removing CSS data from them, however, they may experience difficulties in understanding some visual elements. Browsers working in text mode either ignore CSS data or have little to do with it.

How to use this tool#

  • Simply paste or type-in the two texts you want to compare into the boxes marked first text and second text.
  • A list of differences found between the entered texts (if any) will be shown below.

What is the meaning of each calculator field ?#

  • Comparison method - defines the way we should split the text before comparing it, the available options are:
  • case sensitive - select this option if you want to perform a case-sensitive comparison, then the words calculla, CALCULLA and CaLcUlLa will be treated as three different words,
  • ignore white characters - this option is available only when comparing words, lines or sentences, check this option if the spacing between compared elements (words, sentences etc.) does not matter for you,
  • the first text - the original, reference text that we want to compare,
  • the second text - modified text in which we are looking for differences to the original one,
  • are texts equal - yes, if no difference was found between the entered texts, no - otherwise,
  • found differences - list of differences found between the first and second text,
    • characters colored in red mean deleted characters (ie those that appear in the first text but do not appear in the second) ,
    • characters colored green mean added characters (ie those that did not appear in the first text but appeared in the second),
    • characters that remain identical in both texts are presented in standard gray font.

See also#

  • If you are interested in diff tools, see our other calculators:
    • Text compare - compares two texts by character, words, lines or whole sentences,
    • JSON compare - compares two documents in JSON format,
    • CSS compare - compares two cascading CSS style sheets.

Tags and links to this website#

What tags this calculator has#

Permalink#

Links to external sites (leaving Calculla?)#

JavaScript failed !
So this is static version of this website.
This website works a lot better in JavaScript enabled browser.
Please enable JavaScript.