Berkeley CSUA MOTD:Entry 32611
Berkeley CSUA MOTD
 
WIKI | FAQ | Tech FAQ
http://csua.com/feed/
2025/05/25 [General] UID:1000 Activity:popular
5/25    

2004/7/31-8/2 [Computer/SW/Languages/Misc] UID:32611 Activity:high
7/31    Using CSS, is there a way to make my text just take up the middle 700
        points of the webpage, similar to the way it would be done as if I
        had made a table with width="700" (using only HTML)? Thanks.
        \_ http://www.w3.org/TR/REC-CSS1#box-properties  -tom
        \_ http://www.w3.org/TR/REC-CSS1#box-properties  -tom
           \_ whoever keeps messing up this URL, stop.  -tom
        \_ here's a real world example of using CSS mixed w/ kludge to get
           the desired effect:
                http://creativecommons.org/licenses/by/2.0
                http://creativecommons.org/includes/deeds.css
2025/05/25 [General] UID:1000 Activity:popular
5/25    

You may also be interested in these entries...
2013/4/9-5/18 [Computer/SW/Mail, Academia/Berkeley/CSUA] UID:54647 Activity:nil
4/8     What's a good free e-mail provider? I don't want to use Gmail,
        Yahoo, Outlook, or any of those sites with features I never use that
        track my personal info and keep changing their interface. I want just
        simple e-mail without privacy issues or all the baggage these large,
        for-profit companies are adding. I might even be willing to pay.
        Recommendations?
	...
Cache (8192 bytes)
www.w3.org/TR/REC-CSS1#box-properties
org/) Members and general consensus that the specification is appropriate for use has been reached. It is a stable document and may be used as reference material or cited as a normative reference from another document. W3C promotes widespread deployment of this Recommendation. org/Style/CSS/Errata/REC-CSS1-19990111-errata Abstract This document specifies level 1 of the Cascading Style Sheet mechanism (CSS1). CSS1 is a simple style sheet mechanism that allows authors and readers to attach style (eg fonts, colors and spacing) to HTML documents. The CSS1 language is human readable and writable, and expresses style in common desktop publishing terminology. One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. The rules for resolving conflicts between different style sheets are defined in this specification. terminology contextual selector a selector that matches elements based on their position in the document structure. A contextual selector consists of several simple selectors. CSS Cascading Style Sheets CSS1 Cascading Style Sheets, level 1 This document defines CSS1 which is a simple style sheet mechanism for the web. terminology fictional tag sequence a tool for describing the behavior of pseudo-classes and pseudo-elements font size The size for which a font is designed. Typically, the size of a font is approximately equal to the distance from the bottom of the lowest letter with a descender to the top of the tallest letter with an ascender and (optionally) with a diacritical mark. The "FONT", "CENTER" and "BLINK" elements are examples of HTML extensions, as is the "BGCOLOR" attribute. One of the goals of CSS is to provide an alternative to HTML extensions. inline element an element which does not have a line break before and after (eg 'STRONG' in HTML) intrinsic dimensions the width and height as defined by the element itself, not imposed by the surroundings. In this specification it is assumed that all replaced elements -- and only replaced elements -- come with intrinsic dimensions. terminology pseudo-element pseudo-elements are used in CSS selectors to address typographical items (eg the first line of an element) rather than structural elements. pseudo-class pseudo-classes are used in CSS selectors to allow information external to the HTML source (eg the fact that an anchor has been visited or not) to classify elements. property a stylistic parameter that can be influenced through CSS. This specification defines a list of properties and their corresponding values. reader the person for whom the document is rendered replaced element an element that the CSS formatter only knows the intrinsic dimensions of. In HTML, 'IMG', 'INPUT', 'TEXTAREA', 'SELECT' and 'OBJECT' elements can be examples of replaced elements. CSS1 does not define how the intrinsic dimensions are found. rule a declaration (eg 'font-family: helvetica') and its selector (eg 'H1') selector a string that identifies what elements the corresponding rule applies to. A selector can either be a simple selector (eg 'H1') or a contextual selector (eg 'H1 B') which consists of several simple selectors. One needs only to know a little HTML and some basic desktop publishing terminology. A rule consists of two main parts: selector ('H1') and declaration ('color: blue'). The declaration has two parts: property ('color') and value ('blue'). While the example above tries to influence only one of the properties needed for rendering an HTML document, it qualifies as a style sheet on its own. Combined with other style sheets (one fundamental feature of CSS is that style sheets are combined) it will determine the final presentation of the document. The selector is the link between the HTML document and the style sheet, and all HTML element types are possible selectors. properties and their possible values is defined in this specification. HTML authors need to write style sheets only if they want to suggest a specific style for their documents. Each User Agent (UA, often a "web browser" or "web client") will have a default style sheet that presents documents in a reasonable -- but arguably mundane -- manner. H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Headline is blue</H1> <P STYLE="color: green">While the paragraph is green. The latter option mixes style with content and loses the corresponding advantages of traditional style sheets. The 'LINK' element references alternative style sheets that the reader can select, while imported style sheets are automatically merged with the rest of the style sheet. As a result, old UAs will ignore the 'STYLE' element, but its content will be treated as part of the document body, and rendered as such. To set a "default" style property for a document, one can set the property on an element from which all visible elements descend. In HTML documents, the 'BODY' element can serve this function: BODY { color: black; The example above sets the text color to be black and the background to be an image. The background will be white if the image is not available. Often, the value of a property is a percentage that refers to another property: P { font-size: 10pt } P { line-height: 120% } /* relative to 'font-size', ie 12pt */ For each property that allows percentage values, it is defined what property it refers to. pastoral { color: #00FF00 } </STYLE> </HEAD> <BODY> <H1 CLASS=pastoral>Way too green</H1> </BODY> </HTML> The normal inheritance rules apply to classed elements; they inherit values from their parent in the document structure. pastoral { color: green } /* all elements with CLASS pastoral */ Only one class can be specified per selector. Relying on this power is not recommended, since it removes the level of structure that has a universal meaning (HTML elements). A structure based on CLASS is only useful within a restricted domain, where the meaning of a class has been mutually agreed upon. also introduces the 'ID' attribute which is guaranteed to have a unique value over the document. It can therefore be of special importance as a style sheet selector, and can be addressed with a preceding '#': #z98y { letter-spacing: 03em } H1#z98y { letter-spacing: 05em } <P ID=z98y>Wide text</P> In the above example, the first selector matches the 'P' element due to the 'ID' attribute value. The second selector specifies both an element type ('H1') and an ID value, and will therefore not match the 'P' element. By using the ID attribute as selector, one can set style properties on a per-element basis. While style sheets have been designed to augment document structure, this feature will allow authors to create documents that present well on the canvas without taking advantage of the structural elements of HTML This use of style sheets is discouraged. Instead of setting all style properties, one can create defaults and then list the exceptions. To give 'EM' elements within 'H1' a different color, one may specify: H1 { color: blue } EM { color: red } When this style sheet is in effect, all emphasized sections within or outside 'H1' will turn red. Probably, one wanted only 'EM' elements within 'H1' to turn red and this can be specified with: H1 EM { color: red } The selector is now a search pattern on the stack of open elements, and this type of selector is referred to as a contextual selector. Contextual selectors consist of several simple selectors separated by whitespace (all selectors described up to now have been simple selectors). Only elements that match the last simple selector (in this case the 'EM' element) are addressed, and only if the search pattern matches. Contextual selectors in CSS1 look for ancestor relationships, but other relationships (eg parent-child) may be introduced in later revisions. In the example above, the search pattern matches if 'EM' is a descendant of 'H1', ie if 'EM' is inside an 'H1' element. UL LI { font-size: small } UL UL LI { font-size: x-small } Here, the first selector matches 'LI' elements with at least one 'UL' ancestor. The second selector matches a subset of the first, ...
Cache (300 bytes)
creativecommons.org/licenses/by/2.0 -> creativecommons.org/licenses/by/2.0/
Creative Commons Creative Commons Deed Attribution 20 You are free: * to copy, distribute, display, and perform the work * to make derivative works * to make commercial use of the work Under the following conditions: by Attribution. Your fair use and other rights are in no way affected by the above.
Cache (916 bytes)
creativecommons.org/includes/deeds.css
body { margin: 0px; padding: 0px; font-family: verdana, arial, helvetica, sans-serif; color: black; background-color: white; text-align: center; font-size:11px; /* part 1 of 2 centering hack */ } #deed { width: 620px; padding: 15px; margin-top: 20px; margin-bottom: 20px; margin-right: auto; margin-left: auto; /* opera does not like 'margin:20px auto' */ background: #ffc; border: 3px groove #333; text-align:left; /* part 2 of 2 centering hack */ width: 620px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: 584px; } html>body #content { width: 584px; /* ie5win fudge ends */ } .fineprint { border:1px solid black; padding:8px; background:#ffffff; text-align:justify; } .text, li { font-family:verdana, sans-serif; font-size:11px; margin-left:20px; margin-right:20px; line-height:140%; text-align:left; } .tiny { font-family:verdana, sans-serif; font-size:11px; margin-bottom:10px; }