Cascading Style Sheets Basics Why use Cascading Style
Cascading Style Sheets Basics
Why use Cascading Style Sheets? • Allows you to set up a series of rules for all pages in a site. • The series may be changed by making a single change to the rule—without requiring changes to all the pages in the site. • A separate file can be defined for the rules. • Standards-compliant
How to add CSS to HTML Tags • You can use the tags <style> </style>to list a series of rules embedded in the header • The styles are used to define specific sets of characteristics for HTML tags, classes, or IDs. Classes can be added to tags by using a class attribute : <p class="fred">
Block vs. inline tags • Block-level tags such as <p> add a line break before and after the tag. – <div> is block-level • Inline tags such as <b> do not. – <span> is inline • Don't confuse these with inline styles, e. g. : – <p style="color: red; ">
Styles inline: in the Tag • CSS rules consist of selector {property 1: value 1; property 2: value 2; }. • (For inline styles, the rules are enclosed in quotes. ) • <h 1 style="font-family: 'Times New Roman', serif; font-variant: small-caps; color: red; "> Hello World </h 1>
Style Sheets Defined in <head> • Surround with <style> … </style> tags. For HTML include comments: <style rel="stylesheet"> /* CSS rules go here */ </style> • Selectors can be HTML tags (h 1), classes (. fred), ids (#fred), pseudo-classes (. fred: hover), pseudo-elements (. fred: first-letter) attributes (img[alt]), others. Ids can only be used once per HTML page.
Sample Style sheet in <head> <style rel="stylesheet"> h 1 {font-family: Georgia, 'Times New Roman', Times, serif; color: red; text-align: center; } h 2 {font-weight: bold; color: orange; }. dropcap {font: 100%/200% serif; color: blue; margin-top: 1 em; position: relative; left: 10 px; top: 10 px; } p {color: red; font-family: courier, monospace; padding: 1 em; } #fred {border: 2 px solid #cf 4; } </style> (Use vertical format as in Zeldman Chap. 9)
Using the Style Sheet • When you use the H 1, H 2 or P tags the styles defined in the style sheet are applied. • To use the. dropcap class you may – Either add the class to the tag • . dropcap and add the class name <p class="dropcap"> – Define a set of div or span tags and add the attribute class=" " • <span class="dropcap">
External Linking • You may also define a style sheet as a text file which includes the defined set of rules. • The file contains only the selectors and the property: value pairs. • The file is the same as the rules in the <head> element without the <style></style> tags.
• The external file is then connected to the HTML page by using the tag • <link rel="stylesheet" href="xxx. css" type="text/css" /> Note /> for XHTML; for HTML 5 just <link rel=“stylesheet” href=“xxx. css” > • The xxx. css is the name of the file path that contains the list of rules. • You should end the file with the extension css to be sure you know what the file contains. • You may also import one CSS file into another: <style type="text/css"> @import url(other. css)</style>.
Order of style rules (cascade) • The last definition is the one which is applied to the tag. • So if a css file is attached with a definition for p tags and there is an inline definition for the p tag after the reference to the embedded or external file, the inline definition will apply. In general inline>embedded>external. • If the user has a set of defined browser characteristics which conflict with the css, the user characteristics will override the css definition.
Defining Classes • You can define a set of specifics which may be applied to a series of tags. • The definition is prefaced with a. classname. You reference the class name in the HTML tag by using the attribute class="classname"
Defining IDs • In the style sheets, you may also define an ID, which acts like a class except there can be only one per page <div class="header">. Note in HTML 5 this would be replaced by <header> • The ID always starts with a pound/hash sign (#): #idname; don’t put digits at start of ID (id="part 2" is OK, id="2 part" or id="2" is not) • To apply the ID tag to the HTML tag, you add the attribute <p id="idname">
Example • #area 1 {color: red} • < div id="area 1">
Multiple Tags with the same Style (grouped selectors) • Separate the list of tags by commas and the place the set of style rules in parentheses for the entire group. • h 1, h 2, h 3 {color: blue; }
Descendant (contextual) Selectors • You can pass a style definition down a list of related selectors. E. g. #copy li p {font-size: 1. 5 em; } (Read this right to left. All p that are descendants of li that are descendants of an element with id="copy" get this rule. ) • The selectors are separated by a space. • The first selector in the list is the parent, the others are descendants. • Changes to the first selector will be inherited by the next selector.
CSS 2. 1 selectors • Child selectors li>p {color: red; } (all p that are children of an li) • Adjacent siblings li+li {color: #234; } (all li that are adjacent siblings of li) • Universal (wild card) selector * {color: red; } • #copy * i{color: #123456; } • Attribute selectors a[href="page 2. html"] {color: black; } OR div[align] {font-family: serif; }
Pseudo-classes • Most common are : link, : visited, : hover, : active. E. g. a: hover {text-decoration: underline; } • Also (2. 1) : first-child, : focus, : blur, : lang() • With IE 7+ can use the "whatever: hover" e. g. li: hover {text-decoration: underline; }
Pseudo-elements • Not often used, but Gillenwater uses : before and : after for "generated content. " • : first-letter, : first-line, : before, : after
Some other options • !important tag • Adding the !important to the style rule will override any other rule. • Media queries: in <link …> or <style> media="screen" media="print" media="handheld" media="all" etc. <style media="print"> • media="print" — used for a print page style sheet. (Resume project) • media="screen" – used for a browser display [but omit if only sending to a browser]
Competing rules • The cascade as described earlier • Inheritance (rules passed to descendants) • Specificity (id=100, class=10, tag=1) (sort of) • Lower rule in a style sheet or declaration wins h 1 {color: blue; } h 1 {color: red; } so h 1 will be red
Comments • CSS comments look like Java. Script: <style> /* Multiple lines of comment go here and can continue until the closing mark */ p {color: red; } </style> • Conditional comments are best way to serve IE rules. E. g. <!--[if IE 7]> <link type="text/css" rel="stylesheet" href="ie 7. css"> <![endif]--> OR <!--[if lte IE 7>. . . <![endif]--> Or <!--[if IE]>. . . <![endif]-->
Defaults for font-family • serif—small ornamentation at the end of the letters • sans-serif – not serif • monospace—all letters occupy same amount of space • cursive—resembles handwriting • fantasy—decorative fonts that are not the same as the other styles
Setting Font • font-family: font stack (give the one you prefer first); multiple word families need quotes font-family: "courier new", courier, monospace; • @font-face is used to define the name and location of a font to be downloaded to the user’s computer. • @font-face{font-family: nametodownload; src: url(filelocation); } • Best idea—use browser-safe screen fonts (Georgia, Verdana, Tahoma)
Other font properties • font-size: – Absolute (pt, in cm, mm) – Relative (sort of) (px, em, rem, %) – Absolute expression • xx-small, medium, large, x-large, xx-large (smaller, larger are relative) • font-style: – italic
• font-weight: – normal, bold, lighter. – Or use a value of 100 to 900 in increments of 100. • Creating smallcaps – font-variant • small-caps • normal • Shorthand: font options separated by spaces after the font: property. E. g. h 1 {font: bold italic small-caps 12 px/18 px verdana, sansserif; } • At a minimum, font: needs font-family, font-size. E. g. h 1 {font: 12 px georgia, "times new roman", times, serif;
- Slides: 26