Member Avatar for DTSCode

hey guys! when i discovered googles Dart, I decided to get back into web design, but im a little rusty on my css. on my index page i want to make a news section for updates to the site, but i cant find any styles for the <article> tag on google. can anyone help? i want the style to be this:

------------------------------------------------- [<-- except thats an actual line and not dashes]
  • Header -
    ---------- [<-- except its a box and not lines]
    text

and i want the header box and text in another box

  • 4 Contributors
  • 18 Replies
  • 289 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Thanks for following up, — and thanks to , and for the pointers. As suggested, posting the final approach helps others; and as and noted, IDs are for unique elements while classes are reusable. The notes below show a few small, practical refinements that make a news/article pattern easier to style, more accessible, and simpler to manage when you automate with Dart or PHP.

Prefer semantic structure and fewer layout hacks. Wrap each item in an <article>, put the heading in a <header> and use a <time> element for dates. Use a class for repeated news items instead of duplicated IDs. Avoid using <br> for spacing; control gaps with margin or padding. For the visual rule between entries, use a CSS selector that targets every item except the first and draw the line with a pseudo-element rather than extra markup. Also set box-sizing and a sensible max-width so a colored background doesn’t stretch across very wide screens.

Example of the separator pattern (illustrates the selector idea, not your exact values):

.news-article { /* base styles */ }

.news-article:not(:first-child)::before {
  content: "";
  display: block;
  height: 1px;
  background: currentColor;
  margin: 0 0 .5rem;
}

When adding items dynamically, rely on class selectors and event delegation so newly created nodes inherit behavior without extra wiring. Plain JS event-delegation example:

const container = document.querySelector('#news');
container.addEventListener('click', e => {
  const article = e.target.closest('.news-article');
  if (article) {
    // handle interaction
  }
});

Dart’s DOM helpers use the same ideas (querySelector/querySelectorAll and onClick.listen). Quick troubleshooting: never reuse IDs, test layout with dev tools (toggle classes), validate heading order for screen readers, and check color contrast. Keeping structure semantic and styles class-based will make the component resilient as you move from static HTML into a Dart or PHP-driven workflow.

Recommended Answers

All 18 Replies

Member Avatar for Member #120589

Perhaps if you mock up your preferred style as an image and upload it (or provide a link to it)?

Member Avatar for DTSCode

ok thats a better idea

Member Avatar for Member #120589

If you could supply the HTML markup too, it'll give us a better example of which elements within the container could accept styling.

e.g.

article h3{..}

article div{...}

hr {...}
Member Avatar for DTSCode

i actually got it figured out. it turns out i was googling wrong. this is what it looks like now

Member Avatar for Member #120589

Erm... like what?

Member Avatar for DTSCode

huh i thought i had uploaded a picture. oh well. its solved now. thanks

Member Avatar for JorgeM

i actually got it figured out. it turns out i was googling wrong. this is what it looks like now

If you post how you solved the issue, this would be helpful to others with a similar problem.

Member Avatar for DTSCode

sure thing. so here is the html:

        <div id="news">
            <div id="article">
                <h2 id="artheader">Header</h2>
                <p id="content">Here is some content</p>
            </div>
            <br /><div id="artsep"></div><br />
            <div id="article">
                <h2 id="artheader">Header</h2>
                <p id="content">Here is some content</p>
            </div>
            <br />
        </div>

here is the css:

#article {
    background: black;
    width: 100%;
    padding: 10px;
    border: 5px solid gray;
    margin: 0px;
}

#artheader {
    text-align: center;
}

#content {
    text-align: center;
}

#artsep {
    height: 1px;
    background: white;
    border-bottom: 1px solid white;
}

just insert that anywhere in body. how i use it:
when ever i want a new article i put in that code and each is seperated by the line (artsep) with the top one having no line above it and the bottom having a <br /> to put a margin on the bottom

Member Avatar for JorgeM

great-thank you for following up.

Edited by JorgeM
Member Avatar for Member #120589

Great, however I thought you were using the html5 <article> tag as opposed to the <div> with id="article"

One caveat - an ID should be unique to an element. If you need multiple elements with the same styling, you should use class="article" instead.

Member Avatar for DTSCode

i was going to use article, but i thought this would work better. and i was going to use class, but at some point im going to make it automated with dart and php

Member Avatar for Member #120589

That's fine, but if you have more than one article on a page, you still need to use class and not id.

Member Avatar for kavitha N

yes what he told is correct. ID means unique purpose and Class means no limitation.

Member Avatar for DTSCode

how do i select it with javascript or dart then?

Member Avatar for Member #120589

Select what? What are you going to do with js/dart?

Member Avatar for DTSCode

dynamically add content to the dom with it

Member Avatar for Member #120589

dynamically add content to the dom with it

I don't see why styling with CSS classes instead of ids should be a problem. In fact providing cases for unique ids in your CSS file would be a massive headache.

With regard to functionality of added elements to the DOM -
I'm not familiar with Dart, but I'm assuming it's a js framework/language of some description. jQuery allows binding of added DOM nodes with '.on' - I'm sure that Dart would have something similar. Again the 'class' trumps 'id' for this for a collection of similar elements.

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.