Notes on CSS

Sample of the pdf document :

Three CSS Styles

1. Inline styles—inserted directed into html code

2. Embedded or global styles—style defined for one document within the <head> tags

3. Linked or external style sheets—a separate file called in one or several html documents

Inline Styles

<tag style=“attribute1:value1; attribute2:value2;…”>

e.g., <h1 style=“font-family:sans-serif; font-size:12; color:gold”>

Embedded Styles

Inserted within the head section of the html file:

<style>

h1 {font-family:sans-serif; font-size:18; color:gold}

p {font-family: serif; font-size:12}

</style>

External Style Sheet

1. Use any text editor and open a new document.

2. Type the style code, e.g.,

h1 {font-family:sans-serif; font-size:18; color:gold}

p {font-family: serif; font-size:12}

3. Save your document as “filename.css.”

Linking to Style Sheets with the <link> Tag

In your html document where you want to apply the styles defined in the style sheet, insert the following code with the head section:

Linking to Style Sheets with @import

To link to a style sheet within the embedded <style> tags:

<style>

@import url(filename.css);

other style declarations

</style>

To link to a style sheet within another style sheet:

@import url(filename.css);

other style declarations.......

Click here for Download PDF / FREE