Transcript
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
top related