Cascading Style Sheets (CSS)
The Contents of The Style Sheet
Cascading style sheets (CSS) has a type style that can be used in a page or page element. Any definition of a style or style rule contains a selector followed by property and the value of the selector. Below is described an example that is easy on the style rules defined in a style sheet:
H1 {font-size: x-large; color: green}
H2 {font-size: large; color: blue}
. note {font-size: small}
#footer {font-family: serif}
In the example above, H1 and H2 is a selector that can modify the formatting properties of standard HTML tags. Property selector and its value and values are given boundaries braces {} - font-size is an a property, and x-large is the value of the property font size. You can specifically separating the existing property by separating them with a semicolon (;). In the example above,. Note is a class selector, and #footer is an ID selector.
How to use Style Sheets in a Web Page
There are three ways you can use style sheets on your web site pages:
How to use Style Sheets in a Web Page
There are three ways you can use style sheets on your web site pages:
- Link a page to an external style sheet.
- Creating a style sheet embedded in a web page.
- Create inline styles on individual elements of the site.
Each method has advantages and disadvantages:
- Use external style sheet when you want to make the same style consistently on all pages of your website. By making styles in one or more external style sheets and link it to the page, you can certainly have the consistency of the overall appearance of pages. If you decide to change a style, you only make one change in the external style sheet and you have this change will affect the pages that have a relationship with a style sheet. Typically, an external style sheet using the file extension .css, such as styles.css.
- Use an embedded style sheet when you want to create styles only for the current page only. An embedded style sheet is one type of cascading style sheets are "integrated" with the tag <HEAD> on a page. This style can only be used on the same page.
- Use inline styles to give the cascading style sheet properties for page elements that stand-alone (individual).
If a page has a link to an external style sheet, embedded or inline styles that you created for that page will be rejected at the external style sheet.
Style Attribute
First of all add the style in your web page to write in the HTML tags. Type the attribute style = "" in HTML tags. To add style properties as below:
Style Attribute
First of all add the style in your web page to write in the HTML tags. Type the attribute style = "" in HTML tags. To add style properties as below:
style = "property: value"
Example:
To make the text color to red is: style = "color: red"
Property style sheet is "color". And the value is "red". Notice there is a colon (:) between color and red, and flanked with quotation marks.
Now you enter this style to HTML tags using the tag <DIV>. DIV is part of the page.
<DIV Style="color:red"> red font</ DIV>
The results will make the red font
You can also add more than one property in the style attribute. Place a semicolon after the first property and value, and add others. For example if we wanted red text and italics, you can write:
You can also add more than one property in the style attribute. Place a semicolon after the first property and value, and add others. For example if we wanted red text and italics, you can write:
<DIV Style="color:red; font-style:italic"> Red and Italic Text</DIV>
Now the results will make the text red and italic
For more property, you need a semicolon after the style made:
For more property, you need a semicolon after the style made:
<DIV Style="color:red; font-style:italic; font-weight:bold;font-family:Arial">Now I'm Also bold and have an Arial font!
</ DIV>
0 comments:
Post a Comment