لکچر اول طراحی وب سایت

Web Design & Development 09- Introduction Cascading Style Sheet

Lecturer : Parisa Naimi

Introduction to CSS Anatomy and Syntax Types of CSS Class ID Example question

Agenda

By: Parisa Naimi Summer 2013

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. Its most common application is to style web pages written in HTML . With CSS, you can control the color of the text, the style of fonts,

the spacing between paragraphs, how columns are sized and what background images or colors are used, as well as a variety of other effects.

CSS Induction


CSS is combined with the markup languages HTML or XHTML. These markup languages contain the actual text you see in a web page—the paragraphs, headings, lists, and tables—and are the glue of a web document. They contain the web page’s data, as well as the CSS document that contains information about what the web page should look like.

Cont…


every Cascading Style Sheet (whether it is contained in a .css file, or embedded in the head element of an HTML document) is a series of instructions called statements. A statement does two things:

•It identifies the elements (paragraphs, links, list items and so on) in an HTML document that it affects •it tells the browser how to draw these elements

Anatomy and Syntax


The part of a statement which identifies page elements is called a selector. Selectors select page elements.

The part of a statement which tells a browser how selected elements should be drawn is called the declaration.

A declaration can contain any number of properties, the individual pieces of style to be applied to the selected element.


Syntax

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

Selector { property : value}

selector {property: value} selector {property: value}


Example

selector {property: value} selector {property: value} selector {property: value}

• body {color: black}

• p {font-family: "sans serif"}

• P {text-align: center;color:red}

• p { text-align: center; color: black; font-family: arial }


Grouping Selectors and Declarations

You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:

h1,h2,h3,h4,h5,h6 { color: red }


How to Insert a Style Sheet

There are three ways to insert a style sheet:

External Style Sheet

Inline Styles

Internal Style Sheet


To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property.

Inline Styles

<p style="color: green; margin-left: 20px"> This is a paragraph </p>


An internal style sheet should be used when a single document has a unique style. The internal styles define in the head section by using the <style> tag.


<style type="text/css">………………</style>



<head> <style type="text/css"> h1 {color: green} p {margin-left: 20px} </style> </head>



An external style sheet is use when the style is applied to many pages. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>



Rel= “ ”: define the relation between the external document and calling document. In this case ,the relation is that the external document is the style sheet for calling document. Href= “ ” : like the anchor tag <a>, href stand for hyperlink reference, it accepts an absolute path to the style sheet document. Type= “”: refers to the type of external file.


With the class selector we can define different styles for the same type of HTML element.

Class is specified by including a period (.) before the selector name. The syntax for declaring a Class selector is as follows:

.[Class Name] { property:value

...

}

.right {text-align: right}

<p class="right"> This paragraph will be right-aligned. </p>

class Selector


Cont… We can also specify different instances of a class selector. This is

achieved by using the following syntax:

[Type Selector].[Class Name] { property: value; ... }


ID ID is specified by including a number sign (#) before the selector

name.

The syntax for declaring an ID selector is as follows:

#[ID Name] { property :value; ... }


# right {text-align: right} <p Id="right"> This paragraph will be right-aligned. </p>

Class vs ID The difference between ID and class is that an ID selector can be called only once in a document, while a class selector can be called multiple times in a document.

The second difference is that ID can be called by Javascript's getElement ByID function.


لکچر اول طراحی وب سایت

Documents