Style Sheets, Cascading Style Sheets and CSS are all mean the same thing and are the modern way of defining the design and layout of your web page(s). An ideal way of replacing the deprecated tags and attributes, such as the FONT tag. Show
In this tutorial you will learn how to change the look of your pages, background, text and link colours, the look of tables, headings borders and many other aspects of a pages appearance, using CSS. With CSS you can either
Defining a StyleA style is defined with two sections: one or more selectors and one or more declarations enclosed in {Curly Brackets} Each declaration is made up of a Property: Value; pair CSS SyntaxThe above image shows the use of one selector and two Declarations. Note the use of { } : ; which are essential. A simple style rule syntax with one selector and one declaration (property: value; pair}selector {property: value;} Example of defining a HTML tag: p {font-size: 10pt}
Using more than one Selectorh1, h2, p {color: #000033} The elements h1, h2 and p will all be coloured blue Using more than one DeclarationWe could use the following p {font-size: 10pt;} or a shorter way is: selector {property: value; property: value; } p {font-size: 10pt; color: green; } Example: body {
Applying Style SheetsThere are 3 types of style sheets. The difference is where the style is defined and the area where that style is applied.
Note that more than one of these 3 types can be used on a page, and you can link more than one External style sheet to a page. 1. Inline style sheet Within a tagUse forInline style sheet are should only be used where a particular style is not going to be repeated elsewhere on the page/site. Where to defineThe definition is defined within the HTML tag in the body section of the HTML code. It must be redefined every time it is required SyntaxThe syntax for inline styles is slightly simpler than that of Internal and External styles in that there is no selector and no curly brackets. Using style example 2. Internal style sheetWhere to defineThe definition is written once in In the head part of a page. It must be written on every page that requires that style. Use forBecause of the above it is ideal if only 1 page is going to be used for this style. The styles can then be used more than once throughout the page. The Internal style sheet is defined within the head section.
Example:
3. Create a separate style sheet fileUse forThis is the best method if you wish to control the design of more that one page. Where to defineThe style definitions are only written once and saved into a file. Each page that wishes to use that file places a link to the file in the HEAD section. Section of your pages Link to the Style file with thetagPlace the following link into the section of your page, use the name you have selected for the CSS file in place of yourStyleFileName.css Note: The link tag does not have a closing tag in HTML CSS external fileCSS files are ordinary text files and can be written in a simple text editor such as notepad. The file must be given the extension .css The term Cascading is used because more than 1 style sheet can be used on any particular page. Order of precedenceIf the same style is defined with different values in the different style sheets then the order of precedence is Inline Style Sheets Internal Style Sheets The last External Style sheet moving in order to the first External Style Sheet linked in the head section, BODY tagThe Body tag has properties and values that control the appearance of the page. The following code example code has the more popular properties and values BODY { font-family:As stated earlier the font that is selected by you can not be used unless that font is on the users computer. Therefore only popular fonts should be used. As a safeguard more that 1 font can be defined. This allows alternative fonts to be stated, in case your first choice is unavailable on the users computer. It is better to list more than 1 font to ensure that the user views your page as intended. The selection should end with a generic font e.g. serif, sans-serif, cursive, fantasy, or monospace. What is an embedded style?An embedded style sheet is declared within the <head> element of an XHTML document. It applies to the whole document, rather than just one element. Each style declaration (or CSS rule) gets applied to everything in the document that matches that rule.
What is inline style?An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element.
What is the difference between inline style and embedded styles explain with examples?Embedded styles are set in the HEAD section of your web page. Similar to an inline style rule, embedded styles allow you to override the rules of an external style sheet. The difference is that with an embedded rule, you don't have to create a rule with each use of an HTML element.
What is embedded internal style?Internal CSS
Internal or embedded CSS requires you to add <style> tag in the <head> section of your HTML document. This CSS style is an effective method of styling a single page. However, using this style for multiple pages is time-consuming as you need to put CSS rules on every page of your website.
|