Techniques for extending your website with CSS
Style Tricks

© graphic designer, Fotolia
Cascading Style Sheets (CSS) can do much more than define the color and font of your web text. We'll show you how to build the power of CSS into your web creations.
If you ever work with HTML, you are probably familiar with the stylesheet language known as Cascading Style Sheets (CSS). The purpose of CSS is to let you separate the presentation of a web page from the content. The content is described through a markup language such as HTML or XHTML. The presentation is managed through CSS.
Separating content from presentation makes the HTML cleaner and easier to read, and it also means that you can change the presentation across a whole site much more easily. Do you want to change all your h1 headers from centered blue 20-pt to left-aligned red 24-pt? With CSS, you can do that by changing a single file. CSS also improves accessibility; users with special needs can easily create custom style rules for easier access.
CSS Rules
Although it is possible to put CSS rules in an HTML file, it is better to create a separate CSS file, because it gives you a central point for managing the style. In a typical CSS scenario, the HTML header will look like that shown in Listing 1, and the CSS file will look like Listing 2.
Note that you can apply styles to all instances of a particular HTML tag (as with <h1>) or only to certain instances by labeling them with a class type.
Listing 1
sample.html
Listing 2
site.css
Artful Expression
CSS does far more than allow you to change the color, size, or background. Artful use of CSS lets you add interesting new elements to your site, and CSS can even help you replace difficult-to-use tables and Javascript. This article goes beyond the headings and fonts to show how you can easily add new features to your website with CSS. Read on for a look at how you can employ the expressive power of CSS in your own environment. This article assumes you have some basic familiarity with CSS.
For additional information, try the W3C Cascading Stylesheets homepage [1]. You'll also find several CSS tutorials on the web [2].
A very common page layout is one that has multiple columns on a page. Previously, you might have handled multiple columns with the use of a table, but the table option is frowned upon from an accessibility point of view, and a table can be difficult to maintain. It's easy to get confused about what part of the page is where, and to forget to close off your tables, cells, and rows properly, which might confuse some browsers.
Float
CSS to the rescue: You can use the float property to make your layout multi-columned but clear and easy to use.
Listing 3 shows the HTML for a two-column layout with a full-page-width header and footer; Listing 4 shows the CSS. Listing 3 uses id to identify the containers rather than name or class, although these options work in similar ways.
Listing 3
columns.html
Listing 4
columns.css
The class is best used when you have more than one example of the type on a page. With this column layout, you should have only one columnone per page. The id is better for identifying a particular type of an element, whereas name is good for identifying a particular instance of an element – for example, a specific menu item on a page. In this case, I want to identify a generic type of element (e.g., a columnone sort of div), so I use id.
The width of column 1, plus the width of column 2, plus twice the padding of column 1 (once for the left side, once for the right side), plus twice the padding of column 2 need to add up to 100% or less for the float to work correctly.
The footer uses the clear property to make sure it stays below both the previous floats. This means that the container element will extend around all of the other elements.
To explain that last statement a bit further: Floating elements don't "count" in the page layout. When the browser is laying out the page, floated elements are put "on top" of other elements, rather than placed in the regular flow of the page. If you don't have an element after your floats that uses clear, then they won't be within any container element – they look like they're floated on top of the container element, instead. This almost certainly isn't what you need, so here I use a footer. (It doesn't have to have any content!)
If you want to add a third column, you can add another float: left <div>, or you can float one column left and another one right, if you prefer, with a static central column. Again, make sure the width of all three columns plus their padding on each side adds up to less than 100% of the page width; otherwise, one of the columns will be forced below the others.
The use of percentages means that as people shrink or enlarge their browser windows, the columns and other elements will shrink and grow accordingly. This approach is more flexible than hard-coding the width of the elements. However, you can use min-width or max-width if you don't want them to be shrunk below a particular size. If you put min-width on the container element, scrollbars will appear if the user tries to shrink the browser window below this size. This technique can be useful if you want a fairly narrow column on one side and you don't want it to shrink beyond the width of, say, a menu item title.
The other attributes – background and font-style, for example – set other properties of the containers.
See Figure 1 for a look at this basic layout.
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
News
-
Another New Linux Laptop has Arrived
Slimbook has released a monster of a Linux gaming laptop.
-
Mozilla VPN Now Available for Linux
The promised subscription-based VPN service from Mozilla is now available for the Linux platform.
-
Wayland and New App Menu Coming to KDE
The 2021 roadmap for the KDE desktop environment includes some exciting features and improvements.
-
Deepin 20.1 has Arrived
Debian-based Deepin 20.1 has been released with some interesting new features.
-
CloudLinux Commits Over 1 Million Dollars to CentOS Replacement
An open source, drop-in replacement for CentOS is on its way.
-
Linux Mint 20.1 Beta has Been Released
The first beta of Linux Mint, Ulyssa, is now available for downloading.
-
Manjaro Linux 20.2 has Been Unleashed
The latest iteration of Manjaro Linux has been released with a few interesting new features.
-
Patreon Project Looks to Bring Linux to Apple Silicon
Developer Hector Martin has created a patreon page to fund his work on developing a port of Linux for Apple Silicon Macs.
-
A New Chrome OS-Like Ubuntu Remix is Now Available
Ubuntu Web looks to be your Chrome OS alternative.
-
System76 Refreshes the Galago Pro Laptop
Linux hardware maker has revamped one of their most popular laptops.