Modern CSS: The Exciting Future of Web Style
External, Internal, and Inline
CSS is so useful because it is so versatile. It can be written as an external style sheet, which is linked to the HTML, or it can be directly written into the HTML itself. If it is written into the HTML, then it can be either in the header of the document (internal) or in the tag of a specific element (inline). Here are examples of all three methods.
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<head> <style> body background-color: linen; h1 color: maroon; margin-left: 40px; </style> </head>
<h1 style=”color:blue;margin-left:30px;”>This is a heading.</h1>
In external style sheets, you refer to elements in HTML by their identifier. There are two ways to do this. You can refer directly to the inbuilt identifiers of HTML, like headers, paragraphs, and divisions. Referring to classes this way requires only that you use HTML tag in your CSS as follows.
pfont: 12px Georgia;
The trouble with the above approach is that it can be overly generic. Perhaps you want just one paragraph out of several to be yellow. To do that, you simply use the “id” attribute in your HTML to give the specific paragraph you are interested in a unique identifier. Then, you use that identifier in your CSS, with a “#” to ensure that your code applies only to HTML element with that ID. Here is what that looks like.
<p id=”yellow”>This text is yellow.</p>
#yellow color: yellow;
Finally, if you want to apply a style to a few elements, rather than all of them or just one, you can use the “class” attribute. It works much like the ID attribute, with just one difference.
<p class=”yellow”>This text is yellow.</p>
.yellow color: yellow;
Note that rather than use a “#” symbol, the class selector requires a “.” in CSS.
The above are the very basics of CSS, but they hardly do the language justice in terms of its complexity and utility. CSS can be used to control everything from backgrounds to padding to positioning to images and media of all types. What makes CSS so useful is that the HTML content remains the same while style and display change. This is especially useful in a world where users can access content on desktops, laptops, tablets, and phones. By detecting the device a person is using, you can make sure that your website design and hosting or your sales page design look perfect on any device. The freedom is astounding.
CSS has undergone a number of changes since its inception in 1996. In fact, the world wide web consortium (W3C), the group that sets standards for the Internet, is currently transitioning from its second major iteration of CSS to its third. This newest version of CSS, known as CSS3, comes with a variety of new features that make it even more useful than its predecessors. I came across this newest version when working on has a variety of Church Website Design projects.
Here are just a few of those features.
- Rounded Corners – Believe it or not, creating rounded corners on boxes and images is a bit of a pain in web development. CSS3 aims to make this easier by adding a “border-radius” element.
- RGBA Colors – Past iterations of CSS have forced developers to use complex hexidecimal or “hex” coloring if they wanted anything more than the basics (e.g white, red, yellow). CSS3 now makes the whole process easier by giving developers the ability to control RGB channels as well as the alpha channel of all elements.
CSS3 is being rolled out right now, but it isn’t complete yet. The W3C is releasing it in stages, getting features out as quickly as possible, but not before they are ready. This means that now is a great time to start learning CSS3. You’ll have time to perfect your technique before everything is finalized.
Angela is a Christian, wife, mother of two amazing kids with 1 cat, and 4 dogs. In her free time she enjoys spending time with family and friends, reading, or enjoying music. She is also a self taught programmer and web designer.