Member Avatar for rrr12345

I have been trying to learn CSS for a while now.

I have been working in C++ for quite some time now so i thought hey CSS should be a walk in a park but it has proved to be enormously difficult for me.

The main thing that seem to perplex me is the lack of clarity and absence of rigid C style rules in CSS. I mean i can't seem to grasp that what thing is suppose to do what ?

One thing seem to behave in a different ways in every context and often having huge and very unexpected variations.

I have been trying to learn CSS for the missing manuals series and those lynda videos.

Does anybody else has this problem. Share ur experiences.

  • 5 Contributors
  • 4 Replies
  • 188 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by super9876

Dani AI

Generated

CSS feels weird to programmers because it isn’t procedural — it’s a set of overlapping rules the browser resolves for each element. That’s the core reason finds it “unpredictable.” The two practical ideas to lock down first are: (1) how specificity and cascade pick the winning rule, and (2) how boxes (content, padding, border, margin) and default browser styles affect layout. ’s point about using developer tools and ’s about the box model are exactly the right areas to focus on.

A tiny, useful specificity model to keep in your head: inline > IDs > classes/attributes/pseudo-classes > elements/pseudo-elements. A common shorthand is 1000 / 100 / 10 / 1. Example:

/* specificity scores: element = 1, .class = 10, #id = 100 */
p { color: blue; }         /* 0-0-0-1 */
.content p { color: green; }/* 0-0-1-1 */
#main p { color: red; }    /* 0-1-0-1 -> wins */

A few concrete troubleshooting habits that help every time:

  • Inspect the element in the browser (Computed/Styles panel) to see which rule is winning and why. Toggle rules off to isolate effects.
  • Temporarily add outline: 1px solid red; or background: rgba(255,0,0,0.1); to visualize boxes.
  • Try a minimal test HTML/CSS file to reproduce the problem; remove frameworks and resets until the issue appears.
  • Use box-sizing: border-box; globally if you want widths to include padding/border:
  • { box-sizing: border-box; }
  • Prefer simple, class-based selectors (consider BEM naming) and avoid over-qualifying selectors or !important.

Start small: build one component (form, card, nav) and master its CSS before scaling. ’s advice to nail the basics first is solid — practical repetition with inspection and tiny experiments will turn those “unexpected variations” into predictable outcomes.

Recommended Answers

All 4 Replies

Member Avatar for Dandello

A couple complicating factors for programmers (as opposed to coders). Each browser has it's own quirks, and CSS has an order requirement that isn't as well documented as it needs to be.

The biggest thing to remember is that an external stylesheet is rendered from top to bottom, which means that if you have two conflicting styles for the same element (say #main p versus vs p, the latter one wins, even if it doesn't look like they should be conflicting.

And I know from experience that's a tough one to get your head around.
A big help (in Firefox) is the Firebug addon. In MSIE, developer tools is a great help. Both will show which what styles are being applied and in what order.

Member Avatar for eskrimador

Well first of all #main p is a specificity thing. Meaning anything with and ID of #main followed by a P tag will be affected. The hard thing for most backend developers to get around is that there is not much "logic" in css. The trick is really understanding the "box model" and browsers. I first started playing with CSS back in 2000 when it was barely supported and have been a css developer since. Just takes time and experience.

Member Avatar for super9876

yeah, css can seem to be complicated, because there are so many ways to do things, and different coders do it differently, and many are very sloppy. so if you put it all together, it's a bit confusing.

As a C++ coder, all you need to know are the core foundations of css. i would suggest to go to a bookstore and get a very simple CSS book. like 100 pages or less, learn CSS in like 30 minutes, etc.. Learn the basic structure, and you'll be set. leave the advanced and complicated css to a css pro (outsource it if you need to). the basic CSS structure will look fine across platforms and browsers; it's only when you get advanced and compliated css styles, that it takes it to another level of confusion.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.