CSS

CSS (Cascading Style Sheets) is the dominant style sheet language used to style HTML and XML files. CSS offers tremendous power to control the appearance of HTML files and entire websites.

This page provides a very brief and simple introduction to CSS and its relationship to HTML, to help orient those who haven’t worked with CSS before. Since TypeMetal works with industry-standard HTML and CSS files, you can look to any reasonably current book or website on HTML and CSS to learn more.

CSS in its entirety encompasses some complex parts, but the basics are very simple.

• An HTML file describes your content (text, image references, containing document structure, etc.)
• A CSS file specifies how the parts of that content should be sized, positioned, and styled

By centralizing style decisions for a body of work in one or more CSS files, you separate styling from content, and enable the same content to be flexibly styled and restyled in a wide variety of ways.

What’s in a CSS File

A CSS file is a plain-text file, that consists of a list of rules that a Web browser will apply to HTML elements and their content.

A CSS rule can specify, for example, that every image (<img>) element in your HTML document(s) should be shown with a 1-pixel-wide black border around it:

img {
    border: 1px solid black;
}

Or, maybe you only want <img> elements marked with the class “illustration” to be styled that way:

img.illustration {
    border: 1px solid black;
}

Maybe you want any element marked with the class “illustration” to use that styling, regardless of whether it’s an <img> element:

.illustration {
    border: 1px solid black;
}

Or, maybe you only want to apply the border to every <img> element that’s wrapped in an enclosing <figure> element:

figure img {
    border: 1px solid black;
}

These are examples of using different CSS “selectors” to “select” the HTML elements your rules will be applied to. TypeMetal uses a subset of CSS’ “selector” syntax as a shorthand for labeling snippets and path bar segments.

You can include more than one style rule between the { } brackets:

figure img {
    border: 1px solid black;
    padding: 12px;
    background-color: white;
}

Learning the rest of CSS’ syntax is a matter of learning the other kinds of selectors you can use, and the other kinds of style rules you can associate with those selectors. You can accomplish a great deal, however, using only the basic kinds of selectors introduced above.