Style Storage
The four basic ways of storing rules
Intro
- H04a - (3:30)
- There are four primary methods for storing rules:
- Inline
- Embedded
- Link to an external css file
- Import an external css file
- Linking to and importing css files:
- Provides uniform site-wide formatting.
- Makes it easy to change styles site-wide.
- You can track down the css code I discuss in this file.
Inline styles: using the html style attribute
- H04b - (5:46)
- Avoid using it - it prevents easy changes in the future.
- Uses the HTML style attribute
- Do not confuse the style attribute with the style tag.
- The style attribute is an attribute, not a tag.
- <style> is different than style=
- The style attribute can be used in any tag.
- The style attribute's value uses CSS syntax including both the property and its value.
- Syntax:
- It’s an odd combination of coding because it uses an html attribute with the usual equal sign.
- But then the html style attribute has as a value that includes both a property and a value using css syntax.
- This is also unusual because an html attribute and value is fairly analogous to a css property and value. One might say that the code is written: attribute="attribute:value;"
- More than one declaration can be put into the style attribute's value.
- Syntax:
- style="property:value; property:value; property:value;"
- Example of actual use:
- If one of the property values contains quotes, it needs to be in single quotes if the entire attribute value is using quotes.
- This follows rules often used in programming:
- If you you have a series of characters and spaces that are to be treated as a group, they need to be in either single or double quotes.
- If that group uses double quotes and contains another group that also has characters and spaces, that included group must be in single quotes. This alternation of single and double quotes will continue as needed.
- Example of both multiple rules in a style attribute, and alternating quotes:
- <p style="color:red; font-family:Georgia, 'Times New Roman', Times, serif;">text</p>
Embedding a style sheet
- H04c - (3:57)
- Embedding a style sheet means putting one or more rules in the head of the html file inside style tags.
- The rules can only be applied in the current document; no other files will change if the rules are edited.
- The style tag is required, but do not use the style attribute:
- style - A tag for putting css code into the document head section ( it is not used as a link to an external .css file).
- <style type="text/css"> css rules go here </style>
- Two examples:
<style type=”text/css”> p {color:#F0F;} </style>
<style type="text/css">
#weeklyquote {
color:#020;
}
.interjection {
color:#777;
test-align:right;
}
</style>
Linking to an external .css File
- H04d - (6:39)
- Usually the best option.
- Provides global formatting control of an entire site or sections of a site.
- First, create a .css file.
- A .css file is a simple text file like an html file is, however:
- The file extension is .css
- The only code that goes in the file are css rules.
- It has no head, body, or other tags that html requires for page structure.
- You simply put the rules on the page in the same way they are listed in an embedded style sheet, but without the <style> tag.
- Do NOT use the style tag as it will cause the external file to fail.
- The only code that you might want to add is the following at the top which is helpful for language specification: @charset "UTF-8";
- Linking to an external css file.
- Use the <link>
tag in the head of the html file that will use the external css style sheet.
- Note that the link tag is used for other types of links, such as to a Favicon file.
- Example:
- <link href="/css/site.css" rel="stylesheet" type="text/css" media="screen">
- href= hypertext reference - the same attribute that is used in anchor and area tags.
- In the example above, the link is to a file named site.css that is in the folder css/ in the site root.
- Note that the path to the css file can be any of the standard link paths: absolute, document relative, or site root relative such as the example.
- rel=stylesheet – this is the relationship of the linked-to file to the html file.
- type=text/css – this specifies the type of information being linked to, in this case it is css text.
- media=screen – this is the medium that the style sheet is made for. Screen means a computer monitor.
- Other options are print (for printing), handheld, aural, braille, and more.
Importing an external style sheet
- H04e - (5:13)
- This method is typically used to import one style sheet file (.css) into another style sheet file.
- For example, you can have a style sheet file that specifies a particular background image for a page but needs to use the site's global css from a master style sheet file.
- If you import the master style sheet into page's style sheet it allows you to provide section or page-specific rules along with the site-wide styles.
- The code for importing one style sheet file into another css stylesheet file MUST be at the top of the css file doing the importing.
- Syntax:
- @import url(stylefilename.css);
- If you import a css stylesheet into an html file, use the <style> tag in the head of the html file and put the import code before any rules within that style tag.
<STYLE TYPE="text=css">
<!--
@import url(http://www.gottheknack.com/site.css);
@import url(http://www.gottheknack.com/dept.css);
/* Other css rules can go here, but imports must be at the top */
-->
</STYLE>
Regarding both imported and linked-to css files:
- H04f - (2:55)
- Do not include any html code in the external style sheet files, especially do not include <link> tags.
- Do not include anything other than css code.
- Exceptions are these, which are optional:
/*css comments*/
@import (always goes at the top of the .css file)
- There are subtle differences between using import vs. link to use external style sheet files.
- Information regarding using import or link for getting external style sheet rules.
- How to inspect external css, using UCLA Extension site:
- UCLA Extension site
- Look for a link tag that points to an external css file. Then put the address into the browser's address bar or simply click on the path if it is presented as a link in the source code.
- A .css file obtained by looking in the source code of the above html file for a link to a css file.
Assignment
- H04g - (2:54)
- Create the following:
- A new folder. Name it:
yourlastname_H04
- A new html file. Name the file:
yourlastname_H04.html
- A new text file. Name the file:
yourlastname-linked_H04.css
- A new text html. Name the file:
yourlastname-imported_H04.css
- Create examples of all four methods of applying styles discussed in this exercise:
- inline
- embedded
- external
- imported
- Please import the css file yourlastname-imported_H04.css into the yourlastname-linked_H04.css file.
- Use id selectors for all but the inline rule (which, of course, does not use a selector). Use these selector names:
- Create four paragraphs of Lorem ipsum text.
- Use only the color property.
- Give each example an easily discernible different color.
- Put the following text at the bottom of your html file (of course you will replace "Yourlastname" with yours, leave off the quotes):
- "Yourlastname found this css file on the web: click here "
- Make the words "click here" into a link to a css file that you have found on the web.
- But don't use any of the examples I have shown.
- Please test it all in your browser .
- Zip the folder and send it to me.