Just a few years ago, people in the technology industry might have said that cascading style sheets (CSS) were a minor factor in web design. You needed to know a little bit about how to use CSS, but there was no need to be an expert on the topic. Your time, they would have told you, was better spent learning JavaScript and its myriad libraries like jQuery. Today, CSS is a more important web standard than ever and we have mobile devices to thank for that. Here is a mini guide that covers some of the newest tweaks and additions to CSS as well as some of the basics for beginners.
External, Internal, and Inline
Modern CSS: The Exciting Future of Web Style
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.
-
External Code:
<link rel=”stylesheet” type=”text/css” href=”style.css”>
-
Internal Code:
<head> <style> body background-color: linen; h1 color: maroon; margin-left: 40px; </style> </head>
-
Inline Code:
<h1 style=”color:blue;margin-left:30px;”>This is a heading.</h1>
Using Identifiers
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.
-
Code:
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.
-
HTML
Code:
<p id=”yellow”>This text is yellow.</p>
-
CSS
Code:
#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.
-
HTML
Code:
<p class=”yellow”>This text is yellow.</p>
-
CSS
Code:
.yellow color: yellow;
Note that rather than use a “#” symbol, the class selector requires a “.” in CSS.
Beyond Basics
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.
CSS3
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.
- Box Shadows – This may sound simple, but the ability to create depth on a webpage can go a long way to improving aesthetics and usability. In the past, shadows were done either by hand in the graphics or through the use of a cumbersome JavaScript plugin. Now, shadows are as easy as a single CSS statement.
- 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.
- Transitions – Animations in HTML/CSS can be a real nightmare. In CSS3, simple animations called transitions will allow an element to gradually change from one style to another. There is no need for complicated JavaScript or tricks to get the job done now.
Bright Future
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.
