Random Recipes

Overview: Why Use CSS? You should code your web pages structurally, logically, not visually. Don’t think, “I want the text big, so I’ll u&#xh100;se h1.” (visual coding) &#xh100;Think instead, “This is a heading: h1; this is a &#xp000;paragraph: p; this&#xul00;&#xol00; is a list: ul or ol…” (structural or logical coding) Three Levels of CSS: “Cascading” means there are three levels of CSS, and they have a particular order of preference. Each level has its own pros and cons (advantages and disadvantages), and its best ways to be used. A separate file that contains only CSS styles, no html. CONS: Most generally applied: will apply to all Internal (also called “embedded”): A sty&#xhead;le section in the head section of an individual web page. PROS: All CSS is in one place in the web page: in sty&#xst5y;&#x-8le;le in th&#xhead;e head. Good to use when one page has different styles than all the other pages (w In-line (also called “local”): Inline CSS is embedded into individual html tags; they are “local” to a single tag. Inline CSS is a blend of CSS and HTML: it uses html syntax to define css styles as an attribute of the html tag. Inline CSS is first in order of preference; it overrides both internal and external styles. CONS: Defeats the purpose of separating the conten t and logical code from the style, because the CSS is “all mixed up” with the HTML code. You should try to avoid using inline CSS as much Syntax and How to Use CSS: General Syntax: selector {property:value; pr for example: h1 {text-align:center; colo r:red; font-size:28px;} Inline syntax is different (see blow) Two parts to external CSS; 1) &#xlink;&#xhead;The link tag in the head section of each web page file; and &#xhead;In head section add: name CSS syntax inside the external style sheet: selector {property:value; prope for example: font-size: 12px; { text-align:center; Internal css syntax: &#xhead;In the head section of an individual web page, include the following: selector {property:value; prope In-line css syntax: Inline CSS is embedded into individual html tags, like this: selector style="property:value; &#xsele;tor;&#x sty;&#xle=";&#xprop;rty;&#x:val;&#xue; ;ᙀ&#xprop;rty;&#x:val;&#xue"0;property:value" for example: gn:center;color:red" Learning CSS Property:Value Pairs: Just as there are hundreds of HTML attribute-value pairs, there are hundreds of CSS property:value pairs. Instead of trying to memorize them, learn to look them up: In HTMLPad’s CSS Reference on the Help menu, In a web design reference book, or Best suggestion for learning and using CSS in this class: Use HTMLPad CSS Reference! A few good websites to use: http://www.w3.org/MarkUp/Guide/Style http://www.westciv.com/style_master/academy/css_tutorial and many more… http://teacherjohn.com/resources/webdesignresources.html for more links