Styling HTML5 Elements

Proper way to apply CSS to HTML5 custom elements

You can apply CSS to custom elements just like you can to standard HTML elements.

There's nothing wrong with scroll-content { ... }, as written in your code.

---

A Little Background

The browser, at a basic level, has no clue what elements exist. It doesn't recognize anything... until it is exposed to the default style sheet (sample).

The default style sheet introduces the browser to HTML elements.

Custom elements can therefore be defined as elements that are not included in the default style sheet. (Elements that exist, but are unsupported by the browser, could share this definition.)

Custom elements could, however, be introduced to the browser in author styles.

Here's something important to consider:

If the browser doesn't recognize an element (i.e., it's not in the default style sheet), it will apply CSS initial values.

6.1.1 Specified
values

User agents must first assign a specified value to each property based
on the following mechanisms (in order of precedence):

1. If the cascade results in a value, use it.

2. Otherwise, if the property is inherited and the element is not the root of the document tree, use the computed value of the parent
   element.

3. Otherwise use the property's initial value. The initial value of each property is indicated in the property's definition.

As outlined above, if an element is unrecognized (#1 & #2 don't apply), use the initial value from the property definition (#3 applies).

So in your case:

• Your custom element is: <scroll-content>

• Your CSS is: scroll-content { overflow: hidden; }

• You say in your question that this code does what it's supposed to do. But unless the framework you mention provides additional styles for custom elements, it cannot work (demo).

Here's why:

• Since <scroll-element> is not in the default style sheet it will use CSS initial values.

• Well, the initial value of the display property is inline.

• But the overflow property only works on block elements.

So there's no way this HTML/CSS combination could work – the overflow property would be ignored, as would height, width and any other properties that don't apply to inline elements.

A custom element would need to have display: block applied for overflow to work (demo).

Similarly, the only reason body, div, h1, p, ul exist as block elements is because they are defined this way in the default style sheet (sample).

So, putting aside the arguments for and against custom elements, here's the bottom line:

Add display: block to your custom elements and you're good-to-go.

Styling HTML5 Elements

Nothing in the spec says you can't or shouldn't style HTML5 elements such as <section> or <article>. It only says that you shouldn't place a semantic HTML5 element somewhere 'for the sake of' styling something. Use a <div> instead.

So if you have a semantic reason to add the <section> or <article> somewhere, then by all means add it AND also feel free to style it as well. But if you have to wrap a section of your mark-up for styling purposes (eg. to add a border, or float left etc.), but that section does not have any semantic meaning in your mark-up, then use a <div>.

For instance:

<div class="mainBox">
    <nav class="breadcrumbs">
        <ol>
            <li>...list of links (snip)....</li>
        </ol>
    </nav>

    <section>
        <h1>Latest Tweets From Twitter</h1>

        <article>
            //... a Tweet (snip)... //
        </article>

        <article>
            //... a Tweet (snip)... //
        </article>

        //... lots more Twitter posts (snip)... //

    </section>

</div>

The <section> element is the main part of your page (ie. your list of tweets) and also has a heading at the start which is required. But it's wrapped in a div.mainBox element because maybe you want to wrap a border around the both the breadcrumbs and section parts, ie. it's purely for styling. But there's nothing to stop you styling the <section> and <article> elements also.

Can I add style elements to semantic tags?

It is much better to use classes rather than hard-coding styles into your HTML. This allows separation of content from presentation, and makes it much easier to make changes. So I would recommend something like

.article {
    font-size:1.2em; 
    color:#ccc;
}

and

<article class="article">text text </article>

Style custom elements in HTML5

HTML Custom Elements by default are defined as an undefined element, similar to a span. As an undefined element which the browser has never seen before, they have no default user agent styling and will be given inherited values and will be seen as an inline element which is the default for all elements apart from when a user agent stylesheet overrides it due to conforming with the W3C Recommendated defaults.

Your only option is to really have all of the elements at the top of your CSS style defined as a block level element.

customelement, customelement2 {  display: block;  }div {  background-color:green;}
customelement {  background-color:blue;}
customelement2 {  background-color: red;}  

<div>  <h1>Not Custom  </div><div>  <customelement>    <h1>Custom Element</h1>  </customelement></div>
<div>  <customelement2>    <h1>Custom Element 2</h1>  </customelement2></div>

Is it right to add style in css to semantic elements of HTML 5?

I agree. Avoid adding styles to semantic elements. This is because these elements add nothing new when we are speaking about how things 'look'.

Remember that you want to avoid redundancy. If you need a block element, you are thinking about the 'look', and so use a div and style that. Then immediately inside that div, add your semantic element if you wish. Leave the semantic elements as hidden as possible from your css, and even from your selectors, whether in the css, or the javascript. However, adding a custom class that marks these semantic elements is good for clarity. And so, instead of:

div > * h1,

you would write like this:

div > .semanticElement h1. 

This should be better for clarity, while avoiding referencing the semantic element.

If the reason for some of the above is not clear, think of it this way. The semantic changes for one element, and now suddenly I also have to make a change in the css and javascript, which is absurd.

Add style to elements inside HTML5 canvas

Setting CSS styles only affects elements, here the image element.

When you draw the image to canvas you don't draw the element but the image's bitmap. Canvas is just that, a bitmap and is not related to CSS or DOM per-SE (it's a DOM element but everything that happens inside it is "low-level" bitmap manipulation).

To simulate border for an image drawn to canvas you can draw it on top:

context.drawImage(image, 5, 5);
context.lineWidth = 3;
context.strokeStyle = '#00f';
context.strokeRect(5, 5, image.width, image.height);

(offset the x and y position by 0.5 pixel to make the border sharp).

Modified fiddle

PS: Also remember to handle image loading properly using the onload handler as loading images is asynchronous (updated fiddle with this as well).

Problems styling HTML5 semantic elements such as section, nav and article

You need to add display:block to all block level HTML5 elements:

article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }

None of them have default CSS styling in most browsers, and unknown elements are treated as inline in Firefox.

Styling HTML5 Elements and W3C

The HTML5 spec does not state that you shouldn't apply CSS styles to the section tag, but rather that you shouldn't include section tags simply for styling/scripting purposes, as that affects the semantic layout of your document.

From the section about section:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. [emphasis added]

Compare to the section about div:

div elements can be useful for stylistic purposes or to wrap multiple paragraphs within a section that are all to be annotated in a similar way. [emphasis added]

Styling the `html` element in CSS?

Quite often you'll find people styling the HTML element since it does have an affect on the way the page is rendered.

The most notable style you're likely to see is

html,body{
   min-height:101%;
}

This is used to ensure that the scroll bars in browsers like Firefox, always show on the page. This stops the page shifting left and right when changing between long and short pages.

---

Related Topics