Volunteer Work
Categories
0
Comment
There’s an update to this entry:
Elements of CSS V2
—
- Nature
- Inherent characteristics of an element (display)
- Layout
- Positioning (float, position)
- Dimension (padding, width, height)
- Spacing (margin)
- Theme
- Colors (color, background-color)
- Typography (font-size, font-family)
Categories
In this basic HTML and CSS tutorial, we are going to demonstrate the following:
- the separation of HTML (content structure) and CSS (visual design)
- how to position a secondary element (like a graphic element or a label) thru CSS
position: absoluteandpadding
And some disclaimers:
- while it discusses semantics, it does not tackle accessibility attributes (say, ARIA)
- it does not show any SEO / screenreader test results regarding the benefits of an HTML markup with intentions on content structure or semantic HTML markup
- it only translates into HTML and CSS a specific component (from a much complicated whole), although the HTML and CSS process remains the same if applied to a whole
Categories
Your content will flow through various containers (called regions) which you specify.
The CSS regions module allows content to flow across multiple areas called regions. The regions are not necessarily contiguous in the document order. The CSS regions module provides an advanced content flow mechanism, which can be combined with positioning schemes as defined by other CSS modules such as the Multi-Column Module [CSS3COL] or the Grid Layout Module [CSS3-GRID-LAYOUT] to position the regions where content flows.
Imagine a magazine layout where you could have multiple columns in your article or where the cut of a paragraph continues to the next page.
With all these CSS developments going on, one could really build a web app based on HTML and CSS as its front-end.
We’re really in the 21st century.
Also, checkout Adobe & HTML’s page on CSS Regions.
Categories
I’m being confounded about an article I’ve read about your logo being an image (and not a background image). You would notice about the differences between the two wherein img puts your actual image on the page and h1 replaces the text with a background image of your logo.
You may be using one method over the other — and to calm your nerves down, Facebook and WordPress use h1 approach while Google and Firefox use img approach (and a whole lot of different combinations for other sites out there).
Now, I won’t go into details about both methods because I’m sure you’re already using one — even different from the two mentioned. What’s important is the answer to “why are we using what we use?”
The answer lies on your priorities.
- You like the underlying text to be the document title of your webpage
- You like the logo to be presented as is — an image of a logo
If you’ve answered the former, then most likely you’re using h1 approach and the latter, img approach.
Personally, the way I test if I’m writing a web document properly is I strip it off everything — images and CSS — and see if it still makes sense from having semantic HTML elements to its document outline. And one of the natural steps in this test is having a heading on top of your document — usually the title of the site — it could be a logo or an photograph with an inscription — but what it represents is more important.
There are lots of combinations in putting up a logo on your webpage — just be conscious of why you’re choosing one approach over the other.
Categories
Designing HTML emails is just like designing a webpage. You go planning your page’s width and length of content and consider its appearance in your target browsers. Only that one of the browsers to consider is IE6! This is just an analogy to the fact that not all email clients have wide support for HTML and CSS.
Popular email clients include: Microsoft Outlook, Gmail, Yahoo! Mail, Hotmail, and email clients used by specific platforms like iPhone, iPad, and Android. All of these top clients should be considered for the simple fact that it just might be the one your recipients are using. You wouldn’t want to send a “broken” email, would you?
Here are two important things to remember in designing your HTML emails.