Simple CSS Tips for improving your ebook formatting files as well as dressing up your Author Blogs
There are several options available for linking your Cascading Style Sheet (CSS) to an HTML file. An external style sheet links to an HTML document using the LINK tag or the @import statement. Less efficient forms of using CSS include embedding the style sheet directly into individual HTML pages or using inline styles.
External CSS <link>
To link an external CSS file to the HTML you use the <link> tag, which is placed in the HTML document head and includes required and optional attributes such as HREF, TYPE, REL and MEDIA.
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
The required HREF attribute specifies the location of a link or stylesheet. The styles cannot display if the location of the style sheet is not properly linked.
The TYPE attribute is used to specify a media type allowing browsers to ignore style types they do not support. Using the configuration text/css as the Content-type for your CSS file is a good idea.
The REL attribute defines the relationship between the HTML document and the linked file and is commonly REL=”stylesheet”, which specifies a persistent or preferred style.
The optional MEDIA attribute specifies the type of medium or media the style sheet should be applied. Possible values include screen, print, Braille and tv.
Embedding A Style Sheet
An internal style sheet is used when a single HTML document requires a unique style. Using the same embedded style sheet across multiple HTML pages is less efficient as it makes it harder to modify styles across an entire site.
You define the internal styles in the head section of the HTML page using the STYLE <style> tag.
<head>
<style type="text/css">
body {background-image:url("images/back.gif">; }
</style>
</head>
Importing a Style Sheet
Using the @import statement enables an external sheet may to be imported into a document. The statement may be used in for an external CSS file or for an embedded style sheet on an HTML page. All CSS rules may be included in the STYLE element but all @import statements must occur at the beginning of the style sheet.
Any rules specified in the style sheet override conflicting rules in the imported styles. In addition, the order the style sheets are imported determines how they cascade. In other words, if the first style sheet specifies bold text to be in blue, and the second style sheet (other.css) specifies bold type as red, the bold type in red would prevail.
<style type="text/css" media="screen">
@import url(http://www.DOMAINNAME.com/style.css);
@import url(/stylesheets/other.css);
</STYLE>
Inline Styles
Inline styles are far less flexible than the other methods. As well, inline styles implicitly apply to all media, since there is no way to specify the intended medium. Inline styles use the STYLE attribute in relevant tags within the BODY tag, including the BODY itself. It may also contain any number of CSS declarations, each separated by a semicolon.
<p style="color:red;margin-left:30px">A paragraph style in red and indented 30 pixels from the left.</p>
A paragraph style in red and indented 30 pixels from the left.
Extended Reading
W3schools.com: HTML <link> Tag http://www.w3schools.com/tags/tag_link.asp
W3schools.com: Introduction to CSS http://www.w3schools.com/css/css_intro.asp
htmlhelp.com: Linking Style Sheets to HTML http://htmlhelp.com/reference/css/style-html.html
