Not many people put CSS and programming into a similar category. After all, CSS is more of an interface language; it’s not going to return a value, or compare two variables.
The earliest beginnings of CSS themselves come from the desire of designers to have a separate language in order to declare certain properties for elements in their designs. The original plan for it was for it to appear like this:
@H1 fo(fa=he,si=32,we=bo) ve(be=1,af=2)
A man by the name of Robert Raisch suggested this syntax. Hard to read? That’s what I thought when I first saw it – but essentially, it is declaring the very same thing as this snippet:
h1 {
font-family: sans-serif;
font-size: 32pt;
font-weight: 900;
padding-top: 1em;
padding-bottom: 2em;
}
The other interesting thing about Raisch’s proposal is it included a fundamental property in CSS – the ability to link multiple stylesheets. On a tangent, this is my personal favorite part of CSS; I remember with clarity the difficulty of editing multiple pages in order to have style consistency – it certainly has saved me many headaches, provided I don’t give the same class name to multiple elements.
However, I’m sure you’re asking how does all of this tie into programming. Well, I’ll try to explain the correlations as best as I can.
For one thing, most programming languages include classes. CSS, too, has classes – created for adding to multiple elements. For programming, classes are constructs created for grouping together variables, events, et cetera. Just like with CSS, programming classes have properties inside of them which tell what that class does – what methods it uses, the kind of data that it can handle, or whether it’s a purple elephant. CSS properties do the same thing (in a stylistic sense) – the method in which that element will fit into the flow of the stylesheet (or if it would be removed completely), and how the data in that element would appear (say, for instance, it wishes to take on the color of a purple elephant.)
In addition, stylesheets cascade and “inherit” values. Values implemented into a class in the top of the hierarchy will display themselves in classes near the bottom of the stylesheet; the only way to overwrite these styles, generally, is to either not have the element in that particular part of the document’s flow (not always easy if you have certain declarations in the body property, for example, or have a holder element with certain properties). Inheritence in programming, however, is slightly different- you can’t simply lump two elements together and call it inheritence. For C# especially; pulled from the Microsoft page, an inheritence statement might look something like this:
public class Manager : Employee
{
// Employee fields, properties, methods and events are inherited
// New Manager fields, properties, methods and events go here...
}
As in the previous example, we can also see how classes declared in programming and CSS are also similar – of course, though, CSS was created by computer people – so that’s certainly understandable, but still fascinating, isn’t it?
Of course, with this stated, it is understandable why CSS would have many similarities to programming. I’ve only touched on one here – one that I find quite fascinating
As I continue to do both styling and programming, I’m sure I’ll come across more – but these ones simply jumped out at me today!
Some resources where I researched this a bit:



