You may already know that CSS is a vital technology for styling your web pages. But you don’t need to use it, and your sites can still look good without it.
How Do CSS and HTML Work Together?
If you learned about the web a long time ago, or taught yourself the basics, you may be used to using HTML and CSS without really thinking about what they do.
HTML (HyperText Markup Language) is for meaning. It’s a descriptive language you use to annotate your content with tags like p and table. These tags define the structure and semantics of the text inside them:
p>
A simple paragraph
with em>slightly emphasized textem>
and strong>heavily emphasized textstrong>.
p>
CSS (Cascading Style Sheets) is a language for presentation. It specifies the formatting of your content, using properties like font-size and color:
p { color: rgb(100, 100, 100); }#advert { border-width: 4px; }
The clear separation between HTML and CSS brings several benefits:
- Each format is cleaner and easier to read than both combined.
- You can swap HTML and CSS files independently. This means you can change the entire design of your web pages with one tiny change, and you can use one single style sheet to apply the same design to many different pages.
- Because many HTML files can reference a single CSS file, redundancy is reduced and files are smaller.
- Experts in either HTML or CSS can work with the technology they know best. This work can be done in parallel, so larger projects can be much more efficient.
This separation also means a web page doesn’t need CSS to display. In fact, at one time, web pages didn’t use CSS. A web browser uses sensible defaults to display HTML based on the meaning of its tags.
For example, even without any explicit styling, an H1 element still has a default appearance. Because it’s the main heading on a page, it makes sense for it to be large and bold, with appropriate vertical space to breathe:
How You Can Build a Robust Site Using Progressive Enhancement
When you’re building a design, it’s important to bear in mind the semantics of your HTML. You should always use the tag that best describes your content, regardless of how that displays in your browser. If you use appropriate tags, your content should at least be readable, even without any CSS at all.
You might think that the CSS you provide will always be available, but there are exceptions you should cater for. These include network problems on the client end, server bugs or misconfiguration, browser bugs (including in extensions), or the visitor deciding to turn off CSS. Your visitor may even be using a text browser that doesn’t handle CSS at all. Also, consider visually impaired users; the more independent your HTML and CSS are, the easier they will find it to consume your content.
As an example, imagine you have a set of paragraphs that you want to turn into a bullet list:
p>lorem ipsum dolor sit ametp>
p>lorem ipsum dolor sit ametp>
p>lorem ipsum dolor sit ametp>
One approach is to use CSS to add a bullet character at the beginning of each paragraph:
p:before { content: '• '; }
This looks like a bullet list, so everything appears fine on the surface:
But when CSS is removed, a browser will simply revert to displaying a normal set of paragraphs:
Of course, in this case, the solution is simple: use the proper tag for bullet lists (ul) that HTML provides:
ul>
li>lorem ipsum dolor sit ametli>
li>lorem ipsum dolor sit ametli>
li>lorem ipsum dolor sit ametli>
ul>
This is a bit more complicated than the paragraph markup, but that extra detail brings benefits: your HTML is now more descriptive and communicates the meaning of the content. As a result, a browser can display your page as intended, even without CSS:
You can still use CSS to tweak the design, perhaps using a different bullet style, adding some extra spacing, or using a different font. But you should layer this styling on top of clean, robust HTML to provide the best foundation possible.
The above example is convoluted, so let’s explore another: links. Often, you’ll need to include a series of links on your page, maybe as a set of references or links in a footer:
a href="#about">Abouta>
a href="#contact">Contacta>
a href="#jobs">Jobsa>
a href="#terms">Termsa>
By default, links display as inline boxes, so a long set will display on one line until it wraps:
This might be what you want in a footer, so with a little CSS, you can achieve the look you’re after:
a {
text-decoration: none;
background-color: #eee;
color: black;
padding: 0.5em 1em;
font-family: helvetica;
font-size: 150%;
margin: 0 0.5em;
display: inline-block;
}
This basic styling makes the links look a bit like tabs, with font changes, a background, and spacing:
However, without CSS, the page will render as the original single-line block of text, which isn’t particularly readable. If the links have multiple words, they’re even harder to deal with:
The default inline display, spacing, and font size cause these links to run into one another, making them difficult to distinguish at a glance. However, this problem can be solved with more semantic HTML:
ol>
li>a href="#about">Abouta>li>
li>a href="#contact">Contacta>li>
li>a href="#jobs">Jobsa>li>
li>a href="#terms">Termsa>li>
ol>
Now, without CSS, even the list of longer links is easy to read:
You might need one or two extra CSS rules to undo the default list styling, but this is a small price to pay for cleaner HTML and a better no-CSS experience.
Techniques for Clean HTML and CSS
Using minimal, semantic HTML has many benefits, beyond just bulletproofing your pages for access without CSS. Search engines will often reward clean markup, and it also helps accessibility tools like screen readers work better.
Get to Know HTML Tags
Become familiar with the default HTML style for various tags. This GitHub project is a good sample that includes many different tags. You can view the resulting page to see their default rendering.
Avoid Deprecated Tags
Some tags—like font —are presentational in nature, because they are holdovers from the pre-CSS era, when they were the only means of changing the formatting of web pages. You should avoid these tags because they are purely stylistic, with no semantic value.
Validate Your Code
Make sure you validate your HTML and CSS, using a service like the W3C’s validator. This will warn you about obsolete tags and other errors that may make your HTML less robust.
You can also use a site like Can I use, which gives extensive details about browser support for different HTML tags and CSS properties.
Test Your Pages Without CSS
Consider using an extension like Web Developer, which makes it easy to turn CSS on and off. This is a great way of checking what the no-CSS version of your site will look like, at the press of a button.
You can also check your pages in a text browser, like Lynx, to check how readable they are without CSS.
