 |
|
CSS (Cascading Style Sheets) is an important web development topic. Knowing CSS will set you apart from many people who use code that other people have written to build websites. In fact, there are many people who build websites that don't really understand how it works because many systems, such as WordPress, have a lot of pre-built CSS. That works just fine, until you want to make a change that requires going into the code.
CSS is a type of code that tells a browser how a website should look. CSS also has "best practices" principles that will make your site easier to maintain over the long run. Compared to formatting with HTML, CSS has more options and the code is much cleaner. On the down side, CSS may also take you longer to learn than the old HTML formatting code. This article introduces a few of the underlying principles of CSS and what it looks like.
History of CSS
While the use of CSS is now considered "best practices," the idea of a "style sheet" has been around for a long time. Programs, such as Microsoft Word, Adobe PageMaker, and other desktop publishing programs allow users to create styles for uniform formatting in one document or throughout a group of documents. Even for the web, there were design documents of how CSS should work years before the browsers caught up. For many years, web developers didn't use CSS because they couldn't count on the browsers to show the web pages correctly. Instead, it was easier for web developers to use HTML tags for design.
More information about the history of CSS
CSS Concepts
- Content and formatting are separate functions - and separate code. Ideally, they are in separate files.
- Formatting is uniform throughout the site through the use of external style sheets (files.)
- There are two types of structure: 1) the structure that determines the layout of a page, 2) a definition of the content areas.
- Inline styles: The code for a style can exist right in an HTML tag.
For example, the code to take the underline off a link (links default to under line) is <a href="link address" style="text-decoration: none;">Words or image to click</a>. The "style" property allows CSS styles to be added "inline". - Internal styles: The code for styles can exist in the <head> of a web page file.
The zinkwazi.com slideshow works this way. There is only one HTML file in the program, and alll the styles are right at the top of the code. While this is a good example of a place to use "internal" styles, they are generally a problem because there is no uniformity to a site - each page can have a different set of styles, even if the same style names are used. - External style sheets: The code for styles is in its own file - or set of files.
This is "best practices." The whole site is formatted from one file or set of files. To change the visual design, just change these files, and the appearance of the site changes, without affecting the content.
Levels or Types of Styles
- ID Styles
- Rewriting HTML tags
- Class styles
Presentational Markup v. Semantic Markup
Please note that this example has been adapted from an example given in CSS Zen Garden pages 18, 19
Traditional HTML Markup
<center><b><font size=4 color="#990000">Presentational Markup v. Semantic Markup</font><br>
<font size=2 color="#000000">Please note that this example has been adapted from an example given in CSS Zen Garden pages 18, 19</font></b></center>
This would look like:
Please note that this example has been adapted from an example given in CSS Zen Garden pages 18, 19
While this method of coding makes the information look good, it doesn't include information about how it fits into the general structure of the information. It is not possible to tell if this is the title of the web page, or a subsection of information.
CSS Markup
<div id="MarkupComparison">
<h2>Presentational Markup v. Semantic Markup</h2>
<div id="Credits">Please note that this example has been adapted from an example given in CSS Zen Garden pages 18, 19</div>
</div>
Notice that "Markup Comparison, h2 and Credit indicate what the significance of the text is. Of course these styles will only work if someone has defined what they will look like in an external style sheet. The <h2> is an example of rewritting a traditional HTML tag. This is the second level of heading.
CSS Coding Grammar
The coding for CSS is very different from HTML, but it works inside your HTML file because browsers can still interpret the code. The code is based on the idea that you should "define" a style. Each style has a name and the pieces of code that describe what that style should look like. For example, this text is formatted with a style called SmallText. This style could be named anything, but that was the name chosen. In the block of code, SmallText is described as being Verdana, 12 point font with leading of 24, full justification (so that it lines up on both sides) and bolding level of 400. No color has been chosen for SmallText; so, it will pick up the browser's default color, which is usually black. The code for SmallText looks like this:
.SmallText
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
text-align: justify;
font-weight: 400;
}
Notice that the lines of lettering for the description of .SmallText are closer together than the lines for this text is. That is because those lines are a style called SmallTextTight, which is the same as SmallText in everything except the leading. The Subtitles of this article use a style called Subtitle. It is important to plan and name your styles appropriately. SmallText and SmallTextTight say more about what the style looks like than where it will be used. SmallText could be called BodyText because that is how it is being used on this page. The name Subtitle says more about where the sytle will be used on each page.
© 2011, Nora McDougall-Collins