DHTML AND JAVASCRIPT Genetic Computer School LESSON 4 CASCADING STYLE SHEET G H E F
DHTML AND JAVASCRIPT Genetic Computer School Cascading Style Sheet, CSS A set of rules that determine how the styles are applied to the HTML tags in your documents.
DHTML AND JAVASCRIPT Genetic Computer School Three Types Of Style Sheets Embedded Inline Link
DHTML AND JAVASCRIPT Genetic Computer School Embedded Style The style properties are included (within the tags) at the top of the HTML document. A style assigned to a particular tag applies to all those tags in this type of document.
DHTML AND JAVASCRIPT Genetic Computer School <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> Embedded Style Write the Style here. Here are some texts, those are applied by style. Example: Embedded Style
DHTML AND JAVASCRIPT Genetic Computer School Inline Style The style properties are included throughout the HTML page. Each HTML tag receives its own style attributes as they occur in the page. The style properties are added to the HTML tag as the tag is entered.
DHTML AND JAVASCRIPT Genetic Computer School It is fine for documents in which you need to apply styles to only one or two elements, but you wouldn't want to do all that work when you have a lot of styles to add. When You Should Apply Inline Style
DHTML AND JAVASCRIPT Genetic Computer School The style properties are stored in a separate file. That file can be linked to any HTML document using a tag placed within the tags. Link Style
DHTML AND JAVASCRIPT Genetic Computer School <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> Link Style Here are some texts, those are applied by style. Linked style sheets hold all the style properties in a separate file. Example: Link Style
DHTML AND JAVASCRIPT Genetic Computer School Cascading Precedence 1)Inline styles, which appear as attributes within the tag itself, are most important. 2) Embedded styles, which appear at the top of the HTML file, are applied next. 3)Linked styles, which appear in another file altogether, are applied last. Web browsers give precedence to the style that appears closest to the tag.
DHTML AND JAVASCRIPT Genetic Computer School Working With Fonts font-family font-size font-variant font-weight short hand property- font
DHTML AND JAVASCRIPT Genetic Computer School Font-family Property A font family is simply a collection of fonts. Use this property to assign a list of specific and generic font families to any HTML block or element. Supply a list of specific fonts, separated from one another by commas, and end the list with a generic font that is to be used if none of the specific fonts are available Example: font-family: Helvetica, Arial, sans-serif; If the name of a font family that you want to specify contains embedded spaces, you will need to enclose that family name in quotation marks Example: font-family: “New Century Schoolbook”, Baskerville, serif;
DHTML AND JAVASCRIPT Genetic Computer School Font-size Property Absolute Font Size Relative Font Size
DHTML AND JAVASCRIPT Genetic Computer School Absolute Font Size xx-small x-small small medium large x-large xx-large. Define absolute font sizes is to specify a length value in units. By using pixels to set font size, the visitors will be unable to resize the font using the browser setting in Internet Explorer.
DHTML AND JAVASCRIPT Genetic Computer School Relative Font Size It can be defined in three ways: using the constants larger and smaller using the relative measurement of ems using a percentage value
DHTML AND JAVASCRIPT Genetic Computer School What is the base measurement? In the case of text that is contained directly in the body of a document, the base measurement is the browser’s default font size. Example: The default setting for text in a browser is 12 points A font-size setting of 1.5em Produces 18 point type For text inside other elements, the base measurement used by relative font sizing is the font-size of the element’s parent container, rather than the size of the element’s default font, as you may have expected.
DHTML AND JAVASCRIPT Genetic Computer School Font-style Property The font-style property determines whether the text inside an element is rendered in an italic, oblique, or roman (or normal) font style.
DHTML AND JAVASCRIPT Genetic Computer School font-variant property The font- variant property has only one effect: it determines whether text should be displayed in small- caps format. The only other value this property can take is normal.
DHTML AND JAVASCRIPT Genetic Computer School font-weight property Here weight refers to the boldness of the characters. The font-weight property can take two types of values: relative and absolutes. Relative values are bolder or lighter. Absolute values range from 100 (lightest) to 900 (boldest) in 100 units increment, and also include the shortcut names normal (= 400) and bold (=700).
DHTML AND JAVASCRIPT Genetic Computer School Shorthand property : font This short hand property allows you to set multiple font- related properties in one CSS declaration, separating the values by spaces from one another and using commas in multiple-value situations.
DHTML AND JAVASCRIPT Genetic Computer School Color Use style sheet rules to control the colour of any HTML element that can be displayed in colour.
DHTML AND JAVASCRIPT Genetic Computer School Elements That Can Be Displayed In Colour Text Headings Page Backgrounds Background Colour Of Text Background Colour Of Headings Borders Links Outlines
DHTML AND JAVASCRIPT Genetic Computer School Methods To Specify Colour Descriptive colour names System colour names RGB decimal values RGB hexadecimal values RGB percentage values color: blue; color: rgb(0, 0, 255); color: #0000ff; color: #00f; color: rgb(0%, 0%, 100%);
DHTML AND JAVASCRIPT Genetic Computer School The Selection Of Colours It becomes an important issue primarily in two situations: when you have adjacent objects with coloured backgrounds and you want to avoid a clash when you have coloured text on coloured backgrounds and you want to ensure readability
DHTML AND JAVASCRIPT Genetic Computer School Important If you set a foreground colour, always set a background colour, and vice versa.
DHTML AND JAVASCRIPT Genetic Computer School Colouring Alternative Rows in Data Tables......odd { background-color: lightgrey; }.even{background-color: yellow;} This is 1,1 This is 1,2 This is 1,3
DHTML AND JAVASCRIPT Genetic Computer School Background Images body { background-color: white; color: black; background-image: url(“money.jpg”); }
DHTML AND JAVASCRIPT Genetic Computer School It will appear underneath other content. Background Image You should specify an appropriate background colour. This colour will display while the image is loading, and will appear for site users who have disabled images in their browsers. If you define a graphic as the background for a page, that graphic will repeat, or tile, itself to fill up the entire browser viewport. As you scroll through the document, the image will also scroll along. This is the normal behaviour of backgrounds.
DHTML AND JAVASCRIPT Genetic Computer School Background Image Normal Behaviour As you scroll through the document, the image will also scroll along.
DHTML AND JAVASCRIPT Genetic Computer School Tiling And Scrolling Characteristics Use CSS to change both the tiling and scrolling characteristics of images.
DHTML AND JAVASCRIPT Genetic Computer School Fixed Background Image Position You can instruct the background graphic to remain in place while other objects that are placed on top of it, including text, effectively scroll over it.
DHTML AND JAVASCRIPT Genetic Computer School background-repeat: no-repeat stops the background image from tiling. only one instance of the image will appear in the background. repeat is the default value repeat-x and repeat-y repeat the image horizontally and vertically respectively.
DHTML AND JAVASCRIPT Genetic Computer School background-attachment: Controls whether or not the background image scrolls with the content. By default, it is set to scroll It can also be set to fix, background-attachment: fixed;.
DHTML AND JAVASCRIPT Genetic Computer School background-position: The background-position: (1 st value)(2 nd value) The first value controls the horizontal position and can be left, center, or right The second value controls the vertical position, which can be top, center, or bottom. The default value is left top. You can use percentage, instead of these keywords, for either value. Example: background-position:right bottom background-position: 80% 80%
DHTML AND JAVASCRIPT Genetic Computer School How Inheritance Works In CSS
DHTML AND JAVASCRIPT Genetic Computer School Parts Of CSS Style Rule a selector, which defines the type(s) of HTML element(s) to which the style rule applies a series of declarations, consisting of properties and values, those define the style
DHTML AND JAVASCRIPT Genetic Computer School Selector Universal Selector Element Type Selector Class Selector ID Selector Pseudo-element Selector Pseudo-class Selector Descendant Selector Parent-child Selector Adjacent Selector Attribute Selectors
DHTML AND JAVASCRIPT Genetic Computer School Universal Selector It matches every element in the document. Example: *{color: red;} All elements in the page are given a text colour of red.
DHTML AND JAVASCRIPT Genetic Computer School Element Type Selector It is the most common selector. It specifies one HTML element type with no qualifiers. In the absence of other style rules that might apply to the element type provided in the selector, this rule applies to all such elements on the page. Example: a{color: white; background-color: green; } All hyperlinks in the document will appear as white text on a green background.
DHTML AND JAVASCRIPT Genetic Computer School Class Selector To apply a style rule to a potential arbitrary group of elements in a web page Define a class in the style sheet Identify the HTML elements that belong to the class using the class attribute Must precede the class name with a period. No space is permitted between the period and the name of the class.
DHTML AND JAVASCRIPT Genetic Computer School Example:.special{font-family: Verdana, Helvetica, Arial, sans-serif;} A Special Heading This is a special paragraph. Example: p.special {font-family: Verdana, Helvetica, Arial, sans-serif;} Create the same special class, but this time it applies only to paragraph elements. Class Selector: Example
DHTML AND JAVASCRIPT Genetic Computer School ID Selector Used to target a single HTML element within a page. Must be defined in the style sheet and included explicitly in the HTML tag. Use the # symbol to identify an ID selector in the style sheet, and the id attribute to give an element an ID. IDs must be unique within a document. No two HTML elements in a single document should have the same id.
DHTML AND JAVASCRIPT Genetic Computer School ID Selector: Example Example: #unique {font-size: 70%;} This will be a very tiny headline.
DHTML AND JAVASCRIPT Genetic Computer School Pseudo-element And Pseudo-class They are supported by some older browsers Their implementations are not complete. They are unique among the CSS selectors in that they have no equivalent HTML tag or attribute
DHTML AND JAVASCRIPT Genetic Computer School Pseudo-element Selector Example: p:first-letter{font-face: serif; font-size:500%; float: left; color: gray;} A drop-caps effect for the first letter : The first letter in each paragraph will be five times larger than the usual type used in paragraphs. CSS specification has defined only three pseudo- elements: first-letter, first-line and first-child. To define a pseudo-element for a style rule, precede the pseudo-element name with a colon.
DHTML AND JAVASCRIPT Genetic Computer School Pseudo-class Selector A pseudo-class selector applies to a whole element, but only under certain condition. The pseudo-class selector comes into play only when the user interacts with the affected element. CSS2 defines hover, active, focus, link, visited and lang.
DHTML AND JAVASCRIPT Genetic Computer School Descendant Selector All HTML elements (except the html element) are descendants of at least one other HTML element. A descendant selector restricts the applicability of the rule of elements that are descendants of other elements. The scope of the descendant selector is determined by reading the rule from right to left. Spaces separate the element types. The descendant relationship need not be an immediate parent- child connection. Example: li em{color: green;} It will be applied to any text contained in an em, or emphasis, element only when the emphasized text is a descendant of a list item.
DHTML AND JAVASCRIPT Genetic Computer School Parent-child Selector To apply to element patterns that match a specific sequence of parent and child elements. It is a special case of the descendant selector. It must be related directly to one another in a strict inheritance sequence.
DHTML AND JAVASCRIPT Genetic Computer School Adjacent Selector Adjacency is not related to inheritance. Adjacency refers to the sequence in which elements appear in an HTML document. Adjacent elements are always siblings, but it is their placement in the document, rather than their inheritance relationship. The adjacent selector uses the +sign as its connector.
DHTML AND JAVASCRIPT Genetic Computer School Adjacent Selector: Example h1 + h2 {margin-top: 11px;} Put 11 extra pixels of space between the bottom of an h1 heading and an h2 heading that followed immediately.
DHTML AND JAVASCRIPT Genetic Computer School Attribute Selector It declares that the rule with which it is associated is applied only to elements that have a specific attribute defined, or have that attribute defined with specific value.
DHTML AND JAVASCRIPT Genetic Computer School Attribute Selector There are four levels of attribute matching: [attribute] matches if the attribute attribute is defined at all for the element(s) [attribute=”value”]matches only if attribute has a value of value [attribute~=”value”] matches only if the attribute is defined with a space- separated list of values, one of which exactly matches value. [attribute|=”value”] matches only if the attribute is defined with a hyphen- separated list of “words” and the first of these words begins with value.
DHTML AND JAVASCRIPT Genetic Computer School Measurements There are two types of measurements. Absolute Relative
DHTML AND JAVASCRIPT Genetic Computer School Absolute Measurement It tells the browser to render the affected content.
DHTML AND JAVASCRIPT Genetic Computer School Relative Measurement It instructs the browser to scale a value by some percentage or multiple, relative to the size of the object before the scaling take place. Units are em and percentage. Both the em and the percentage generate font sizes based on the inherited or default size of the font for the object to which they are applied. ems and percentages are 1:100 in equivalent.
DHTML AND JAVASCRIPT Genetic Computer School Relative Measurement [an optional sign] [a number] [a unit of measurement] [(+ or -)] [(integer or decimal point)] [(em or %)] No spaces are permitted between the number and the unit of measurement.
DHTML AND JAVASCRIPT Genetic Computer School Layout
DHTML AND JAVASCRIPT Genetic Computer School The display property It determines how a browser displays an element, whether it treats it as a block, an inline text fragment, or something else.
DHTML AND JAVASCRIPT Genetic Computer School Six Possible Values For The Display Property block inline list-item None table-footer-group table header-group The default value varies from element to element.
DHTML AND JAVASCRIPT Genetic Computer School The Box Model