CSSMohamed Loey

Agenda

Part I: IntroductionPart II: CSSPart III: CSS Properties

Agenda

Part I: IntroductionWhat is CSS? History of CSSAdvantages of CSS

What is CSS?• CSS stands for Cascading Style Sheets• Styles define how to display HTML

elements• External Style Sheets can save a lot of

work

History of CSS• CSS was proposed in 1994 as a web styling

language. To helps solve some of the problems HTML.

• There were other styling languages proposed at this time, such as Style Sheets for HTML but CSS won.

• CSS2 became the recommendation in 1998 by W3C

• CSS3 was started in 1998 but it has never been completed. Some parts are still being developed and some components work on some browsers.

Advantages of CSS• Saves time• Easy to change• Give you more

control over layout• Make it easy to

create a common format for all the Web pages

Agenda

Part II: CSSCSS Syntax Inserting CSSCSS Selectors

CSS Syntax

inserting CSS• Three Ways to Insert CSS:

1. Inline style2. Internal style sheet3. External style sheet

Inline style• An inline style loses many of the

advantages of a style sheet

Inline style• On Chrome Browser:

Internal style sheet• An internal style sheet should be used

when a single document has a unique style.

• You define internal styles in the head section of an HTML page, inside the <style> tag.

Internal style sheet• Example :

External style sheet• An external style sheet is ideal when the

style is applied to many pages. • With an external style sheet, you can

change the look of an entire Web site by changing just one file.

• Each page must include a link to the style sheet with the <link> tag. The <link> tag goes inside the head section

External style sheet• An external style sheet can be written in

any text editor.• The style sheet file must be saved with a

.css extension.• "myStyle.css":

CSS Selectors• CSS selectors allow you to select and

manipulate HTML element(s).• CSS Selectors Consist of:

1. The element Selector2. The id Selector3. The class Selector4. Grouping Selectors

The element Selector• The element selector selects elements

based on the element name.• Example:

The id Selector• The id selector uses the id attribute of

an HTML tag to find the specific element.

• Example:

The class Selector• The class selector finds elements with

the specific class. • Example:

Grouping Selectors• To minimize the code, you can group

selectors.• Example:

Agenda

Part II: CSS PropertiesCSS TextCSS FontCSS BackgroundsCSS Links

CSS Text• Color• Text Align• Text Decoration• Text Transform

Colorcolor: value;

• Possible values are: 1. a HEX value - like "#ff0000"2. an RGB value - like "rgb(255,0,0)"3. a color name - like "red"

Example

Text Colortext-align: value;

• Possible values are:1. left2. right3. center4. justify

Example

Text Decoration text-decoration: value;

• Possible values are:1. none2. underline3. overline4. line through5. blink

Example

Text Transformtext-transform: value;

• Possible values are:1. none2. capitalize3. lowercase4. uppercase

Example

Text Indenttext-indent: value;

• Possible values are:1. length2. percentage

Example

CSS Font• Font• Font-Family• Font Size• Font Style

Fontfont: value;

• Possible values are:1. size2. type

Example

Font-Family font-family: value;

• There are 2 choices for values:1. family-name2. generic family

Example

Font Size   font-size: value;

• There are a lot of choices for values:• xx-large, x-large, larger, large • medium, small• Smaller, x-small ,xx-small• length• % (percent)

Example

Font Style    font-style: value;

• Possible values are1. normal2. italic3. oblique

Example

CSS Backgrounds• Background Color• Background Image

Background Color    background-color: value;

• Possible values:1. color name2. hexadecimal number3. RGB color code4. transparent

Example

Background Image    background-image:

url(path_to_image);• Possible Values:

1. url2. none

Example

CSS Links• Links can be styled with any CSS property (e.g.

color, font-family, background, etc.).• In addition, links can be styled differently

depending on what state they are in.• The four links states are:

1. a:link - a normal, unvisited link2. a:visited - a link the user has visited3. a:hover - a link when the user mouses over it4. a:active - a link the moment it is clicked

CSS Links• Example:

THANK U