Download presentation
Presentation is loading. Please wait.
1
Madam Hazwani binti Rahmat
CHAPTER 3 STYLE SHEET Madam Hazwani binti Rahmat
2
WEB STYLE SHEETS HTML is limited in its ability to define the appearance, or style, of one or more web pages. (Ex: changing characteristics such as font family, font size, margins, and link specifications.) As a result, cascading style sheets (css) specifications were defined by W3C. CSS is a language used to enhance the display capabilities of HTML. A style is a rule that defines the appearance of an element on a web page. A style sheets is a series of rules that defines the style for a web page or an entire web site.
3
WEB STYLE SHEETS (2) Style sheets allow a web developer to control the style of elements on a web page by assigning several properties at once to several or single elements on a web page. For instance, you can change all of the text in a paragraph to a particular font family and font size using a style sheet. While you could use HTML to specify the font family and font size within each individual paragraph tag, using style sheets allows you to change styles such as font family, font size, and others more easily and consistently.
4
TYPES OF WEB STYLE SHEETS
CSS provides support for THREE types of style sheets: Embedded (internal) Is used to control the style for a single web page. Inline Is used to define a style for only a single HTML tag. External (linked) Is used to control the appearance of multiple pages in a web site.
5
EMBEDDED STYLE SHEETS How to apply:
Insert a start <style> tag at the top of the web page within the <head> tags of the HTML document. Put style statement within the <style> tag. End the embedded style sheet by adding an end </style> tag. Example: <style> p{ text-indent:8pt} a{ color: navy; font-size: 14 pt; } </style>
6
<h1 style=“font-family: Garamond; font-color: navy”>
INLINE STYLE SHEETS How to apply: Enter declaration within the HTML tag to which the style is to be applied. Example: <h1 style=“font-family: Garamond; font-color: navy”> The style changes only that specific tag and does not affect other tags in the document. Because they take precedence over the other types of style sheets and affect the style for individual HTML tags, inline style sheets are helpful when one section of a web page needs to have a different style than the rest of the web page. declaration declaration
7
EXTERNAL STYLE SHEETS (1)
Is a separate text file that contains the style statements that define how the web page elements will display. Ensures each page uses a consistent style. The format of the external style sheet is very similar to the format of the embedded style sheet. However, it does not need <style> tags to start and end the style sheet (it includes just the style statements).
8
EXTERNAL STYLE SHEETS (2)
How to apply : Involves a two step process: creating a text file that contains all of the styles to be applied, saved with a .css extension. Linking this external style sheet into any desired web page in the web site by adding<link> tag inserted within the <head> tags of the web page. To apply this style sheet to other pages in the web site, insert the same <link> tag within <head> tag of each web page.
9
EXTERNAL STYLE SHEETS (3)
Example: <link rel=“stylesheet” type=“text/css” href=“style1.css”> where; rel=“stylesheet” establishes that the linked document is a style sheet. type=“text/css” indicates the css language is used in the text file containing the style sheet. href=“style1.css” indicates the name and location of the linked style sheet. document type Language used in specified file url of the css file
10
STYLE SHEET PRECEDENCE
The three style sheets supported by CSS control the appearance of a web page at different levels. Each style sheet type also has a different level of precedence in relationship to the others. Because style sheets have different levels of precedence, all three types of style sheet can be used in a single web page. For example, you may want some elements of a web page to match the other web pages in the web site, you may also may want to vary the look of certain sections of that web page.
11
STYLE SHEET PRECEDENCE (2)
Embedded style sheet overrides or take precedence over any style defined in an external style sheet. An inline style sheet takes precedence over the styles defined in both embedded and external style sheet. TYPE LEVEL AND PRECEDENCE Inline Level : Change style within an individual HTML tag Precedence : Overrides embedded and external style sheets. Embedded Level : Change style of one web page Precedence : Overrides external style sheets External Level : Change style of multiple pages in a web site Table : Three Types of Style Sheets
12
STYLE STATEMENT FORMAT
A style statement format is made up of a selector and a declaration. A selector identifies the page elements. A declaration identifies how the elements should display. A declaration defines style for one or more properties, for selected element. For each property, the declaration includes a related value, which specifies the display parameters for that specific property.
13
STYLE STATEMENT FORMAT
Style sheets allow you to control many different property values for various elements in a web page. PROPERTY NAME OPTIONS THAT CAN BE CONTROLLED background Color, image, position border Color, style, width font Family, size, style, variant, weight list Image, position, type margin Length, percentage text Alignment, decoration, indentation, spacing, white space Table : Properties and Values
14
CLASSES IN STYLE SHEETS (1)
Class is a category defined for specific elements of HTML files. Once defined, a specific style can be created for each class. Classes in style sheets gives web developer more control over the style for different sections of a web page where they can apply styles to HTML tags selectively. Drawback: Classes can be defined for use only in embedded or external style sheets. Because the purpose of using classes is to format a group of elements at once, not individual elements, classes do not work in inline style sheets.
15
CLASSES IN STYLE SHEETS (2)
Defining and using classes in style sheet is a two-step process: Name the class and marking elements that belong to the class Assign a defined class name by adding the tag class=“classname” to elements which will apply the class defined. Example: <p class=“beginning”> where; beginning is the class name and the <p> tag indicates that the class is a specific type of paragraph style. element Class name
16
CLASSES IN STYLE SHEETS (3)
Define specific style for the class Within the <style> tags in embedded or external style sheet, enter style statement as the following format: p.beginning{ color:red } where; The p indicates that the classes applies to a specific category of the paragraph tag and beginning is the class name. The tag and class name are separated by a period. The declaration then lists the property-value statements that should be applied to elements in the class.
17
SETTING PARAGRAPH STYLE
Syntax of style statement: p{ property : value } Example: text-indent : 10% /* indent first word of each paragraph points from the left edge of browser window */
18
SETTING LINK STYLE Syntax of style statement: Example: a{
property : value } Example: text-decoration : underline /* underline links */
19
SETTING LINK STYLE Links have three common states (normal, visited, and active). Styles can be set for the states either individually or for all states at once. Syntax of style statement: a:state{ property : value } Example: a:visited{ color: blue /* change colors of visited links into blue */
20
SETTING BODY STYLE Syntax of style statement: Example: body{
property : value } Example: margin : 8pt /* change margin of web page body to 8 points */
21
SETTING TABLE STYLE Syntax of style statement: Example: table{
property : value } Example: font-family : Verdana; font-size : 11pt /* Set table content display to 11pt Verdana */
Similar presentations
