Member Avatar for TraderX

greetings. It has been a while since I have done any type of html and even then, I wasn't all that good. Tables were a big deal and css was a new thang.

Now, I am pretty good with graphics, and I have a design for a site that I am thinking of, so my question is this, start with layout then to css or the other way around.

Now, like I say, I am getting back into so this whole css is kinda a little new. I want my site to have a strong css cuz I will also be using templating with a CMS.

Any help would be great, if you should also know of any really good CSS tutorials (walk thru's would be awesome) would love to see them.

Thanks once again.

PS as I am sure I forgot lots, pls point them out so I can learn from them and perhaps others can to.

  • 2 Contributors
  • 2 Replies
  • 115 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by TraderX

Dani AI

Generated

Short answer: start with content and semantic HTML, then style and layout with CSS. For a CMS-driven site this order keeps templates clean: decide the HTML structure and the blocks your templates will output (header, nav, article, aside, footer), then write CSS that targets those blocks. That separation makes themes and content editing safer and easier to maintain. , because you already have the visual design, translate each visual block into semantic elements and stable class names before you start styling.

A practical workflow: sketch the page and list the actual content for each area; build a bare HTML prototype with real headings, paragraphs and images (no presentational markup); apply base typography and spacing; add layout using mobile-first CSS (base styles for small screens, then breakpoints); use Flexbox or Grid for layout modules; finally integrate the HTML/CSS into your CMS templates. This keeps iteration fast and prevents rebuilding markup when styles change.

Tips and cautions: use a normalize/reset, choose a naming convention like BEM, avoid inline styles and table-based layout, and keep CSS in external files for caching and reuse. Modern layout tools (Flexbox/Grid) remove most float hacks, but check support if you need to support old browsers. Use browser devtools to inspect computed styles and layout when things break. If your project grows, consider Sass or PostCSS for variables and modularity, but they are optional when you are learning.

Good, reliable references: MDN's learning area for CSS (Learn CSS), MDN on Flexbox and Grid (Flexbox, Grid), a practical Flexbox walkthrough on CSS-Tricks, and feature support at Can I use. As suggested, follow tutorials, but the fastest learning comes from building a couple of small pages and turning them into CMS templates.

Recommended Answers

All 2 Replies

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.