CSS for C# and C++ Programmers

CSS (Cascading StylSheet) is another area in web programming that is rather confusing if you come from pure C# or C++ world, because the notation look somewhat like a declaration in these languages. If you are reading on and if I write "in C#" that I generally mean in C# or C++.

Like me, I am sure you have been using the CSS without completely understanding any of these, but these simple descriptions will make it all clear once and for all. So here are some tips to "un-do" our mindset;

Differences Between .myStyle, #myStyle and Barebone Symbol Form like a "p"?

• If it starts with a # , like #myid, then it applies to the element with the id attribute included like <dive id="myid">  And no it is not a comment.
• If it starts with neither of these then it mostly refers to "officially out of the box html" element tags like or <p> type items.
• If it starts with a period like .mystyle { } then it is a class specifier. This means that somewhere down the line in the HTML code you see something like then that's where this style applies.  Note therefore it does not mean anything like "this" in C#.
  
  This has a larger implication, though, as you might see something like "p. mystyle" that means it applies only to when there is
   This is thus not a member type stuff, but more like narrowing the scope of where it applies.

Cascading or Inheritance

We tend to think everything in terms of  Object Orientation, so we are all used to inheritance and as the name implies the cascading part of the style sheet allows inheritance. So how would that be implemented?

The answer is that the inheritance is basically automatic. In other words, if somewhere early on in the html content stream or even in some JavaScript code the style was changed, then you define something more to it, then whatever you defined newly will be either overridden (if the same attribute was specified) or added to that point. 

Listing More than One Names in Style is Not Inheritance Declaration

You sometimes run into a style declaration that lists a bunch of style names. It looks like a bit like subclassing a class or defining interfaces, but it just simply a way to aggregate declarations of several styles.

.style1, style2, style3{  ... }

It simply means all 3 styles use the same attributes (to start with). This might be useful to make all these 3 styles to have the same font then you will later customize each style.

Apparently There is No Easy Way To Clear or Reset a Style

We may want to clear everything in style, but there appears to be no simple way to do it. If you search for "CSS Reset" there are many ways that let you do it. But there is no real official way in wide use (as of June 2014 at least), and keep in mind, even if that's available in the new CSS standard, you are dealing with millions of people running just about any version of web browsers ever made.

So the surest way is to override style elements to laboriously redefine any aspects of it. 

Including Stylesheets

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

Yes, this is the include statement for the CSS. In most web pages, link is used pretty much only for stylesheets. Note that <script> uses standard src= element, so this is pretty much one "odd-ball". Just remember it that way.