Presentation is loading. Please wait.

Presentation is loading. Please wait.

TP 2543 WEB PROGRAMMING CASCADING STYLE SHEET (CSS)

Similar presentations


Presentation on theme: "TP 2543 WEB PROGRAMMING CASCADING STYLE SHEET (CSS)"— Presentation transcript:

1 TP 2543 WEB PROGRAMMING CASCADING STYLE SHEET (CSS)

2 Our objectives are… 2 Introducing Cascading Style Sheets Working with Selectors Using Inline Styles, Embedded Styles and External Style Sheet Understanding Cascading Order Working with the Box Model Using Pseudo-Classes and Pseudo-Elements Positioning Objects with CSS

3 Introduction 3  CSS is a instruction tag which are used to format text, object and layout  Advantages of CSS  Time effective  Easy to edit  Loading time

4 Element in CSS 4  Comment  Start with /* and end with */  HTML Comment Delimiters  Are use to make sure the browser know the style element.  Start with the selector and then by the properties (attributes and values)

5 5  H1 is a selector, followed by attribute and values. In between of attribute and values are separate with colon (:). And each attributes and values are separate with semicolon (;). H1 {background-color:gray; color:green; }

6 Types of Selector 6  simple selector simple selector  ID selector ID selector  class selector class selector  Grouped selector Grouped selector  contextual selector contextual selector

7 Simple Selector 7  Any HTML elements  For example… p {font-size:12pt; color:#6666ff}

8 ID Selector 8  The id selector is used to specify a style for a single, unique element.  The id selector uses the id attribute of the HTML element, and is defined with a "#". #para1{text-align:center;color:red } DESIGN USING CSS This paragraph is not affected by the style. Example

9 Class Selector 9  The selector can be owned by many classes.  Its allowed the element to have many style.  The class selector uses the HTML class attribute, and is defined with a "." H1.blue {color : blue} H1.red {color : red; font_weight : bold} A blue Header A Red Header Example

10 Class Selector 10  The class also can be create without combine with HTML tag.  This style will help the designer to use the class at different elements..bluetext {color:blue; font-weight:bold} paragraph with bold and blue text. Header with bold and blue text Example

11 Applying a style to a class 11

12 Applying a style to a class and element 12

13 Grouped Selector 13  The selector can be group if the properties and values are same. body {font-size: 12px; } body {font-family: arial, helvetica, sans-serif;} th {font-size: 12px; font-family: arial, helvetica, sans-serif;} td {font-size: 12px; font-family: arial, helvetica, sans-serif;} body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;} body, th, td{font:12px arial,helvetica,sans-serif;}

14 Contextual Selector 14  Two or more simple selector are combine to perform a style  So… all the selector can use the same style. OR P EM {font-weight:bold} H1 B, H2 B, H1 EM, H2 EM { color: red } H1 B { color: red } H2 B { color: red } H1 EM { color: red } H2 EM { color: red } equivalent to

15 Types of CSS 15  There are 3 types of CSS  Inline CSS – in the same HTML page as a properties of tag HTML. In …  Embedded CSS – in the same page but are located in …  External CSS – in the new page (.css)

16 Inline CSS 16  Inline styles are easy to use and interpret because they are applied directly to the elements they affect.  Can be use in many types of elements.  Located in between of HTML tag in … Teks

17 Example: Inline CSS 17 Inline Styles This text does not have any style applied to it. This text has the font-size style applied to it, making it 20pt. This text has the font-size and color styles applied to it, making it 20pt. and blue.

18 Using Embedded Styles 18  You can embed style definitions in a document head using the following form: style declarations Where style declarations are the declarations of the different styles to be applied to the document

19 Embedded CSS 19  Suitable to the text with multiple format.  Create in … Style Sheets em { background-color: #8000ff; color: white } h1 { font-family: arial, sans-serif } p { font-size: 14pt }.special { color: blue }

20 Embedded CSS 20 Deitel & Associates, Inc. Deitel & Associates, Inc. is an internationally recognized corporate training and publishing organization specializing in programming languages, Internet/World Wide Web technology and object technology education. Deitel & Associates, Inc. is a member of the World Wide Web Consortium. The company provides courses on Java, C++, Visual Basic, C, Internet and World Wide Web programming, and Object Technology. Clients The company's clients include many Fortune 1000 companies, government agencies, branches of the military and business organizations. Through its publishing partnership with Prentice Hall, Deitel & Associates, Inc. publishes leading-edge programming textbooks, professional books, interactive CD-ROM-based multimedia Cyber Classrooms, satellite courses and World Wide Web courses. Example em { background-color: #8000ff; color: white } h1 { font-family: arial, sans-serif } p { font-size: 14pt }.special { color: blue }

21 Using an External Style Sheet 21  Because an embedded style sheet only applies to the content of the start.html file, you need to place a style declaration in an external style sheet to apply to the headings in the rest of the Web site  An external style sheet is a text file that contains style declarations  It can be linked to any page in the site, allowing the same style declaration to be applied to the entire site

22 Using an External Style Sheet 22  You can add style comments as you develop an external style sheet  Use the link element to link a Web page to an external style sheet  You can import the content of one style sheet into another  You can link a single style sheet to multiple documents in your Web site by using the link element or element  You can also link a single document to several style sheets

23 External CSS 23  Advantages  Easy to edit  Time consuming  Type of this files is (.css)  To link to the.css file need to define in

24 Example of external CSS 24 Linking External Style Sheets Shopping list for Monday : Milk Bread Rice Potatoes Pizza with mushrooms Go to the Grocery store

25 25 /* styles.css */ /* An external stylesheet */ a { text-decoration: none } a:hover { text-decoration: underline; color: red; background-color: #ccffcc } li em { color: red; font-weight: bold; background-color: #ffffff } ul { margin-left: 2cm } ul ul { text-decoration: underline; margin-left:.5cm }

26 Example of external CSS 26 Linking External Style Sheets Shopping list for Monday : Milk Bread Rice Potatoes Pizza with mushrooms Go to the Grocery store /* styles.css */ a { text-decoration: none } a:hover { text-decoration: underline; color: red; background-color: #ccffcc } li em { color: red; font-weight: bold; background-color: #ffffff } ul { margin-left: 2cm } ul ul { text-decoration: underline; margin-left:.5cm } Example

27 Applying a single style sheet to multiple documents 27

28 Applying multiple sheets to a single document 28

29 Style Precedence External style sheet 2. Embedded styles 3. Inline styles Less precedence More precedence

30 Pseudo Class 30  A pseudo-class is a classification of an element based on its status, position, or current use in the document  Same as other class, but the different is it will represent just for one element. Involved of element A (anchor). Selector : pseudo-class {property : value} selector.class : pseudo-class {property : value}

31 31 A:link {color:red} A:active {color:blue; font-size:125%} A:visited {color:navy; font-size :85%} This is a link Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Note: a:active MUST come after a:hover in the CSS definition in order to be effective. Example

32 Pseudo- Element 32  This are use to format a part of document without know the content.  Pseudo-elements are elements based on information about an element’s content, use or position  CSS pseudo-elements are used to add special effects to some selectors.  There are 2 types  First line  First letter Selector : pseudo-element {property : value} selector.class : pseudo-element {property : value}

33 33 P:first-line {font-weight:bold} P:first-letter {font-size:300%; float:left; color:red} You can use the :first-letter pseudo-element to add a special effect to the first letter of a text and :first-line pseudo-element to add a special effect to the first line of a text. Example

34 Elemen DIV 34  Use to change style in one section  Suitable to be use in inline style Text and or image Sentence or two of text

35 35  Can be combine with class selector in embedded style.boldblue {color:blue; font-weight:bold} Text

36 Element SPAN 36  SPAN tag allowed to create style to certain words or to certain character. You can use the SPAN tag with the CLASS attribute to apply a Style to a few words or even a few letter s within a word. You can use the SPAN tag with the CLASS attribute to apply a Style to a few words or even a few letters within a word.

37 Font Style 37 PropertyDescriptionValuesCSS fontSets all the font properties in one declaration font-style, font-variant, font-weight font-size/line-height, font-family caption, icon, menu, message-box small-caption, status-bar, inherit 1 font-familySpecifies the font family for textfamily-name, generic-family, inherit1 font-size Specifies the font size of text xx-small, x-small, small, medium large, x-large, xx-large, smaller larger, length, %, inherit 1 font-style Specifies the font style for textnormal, italic, oblique,inherit1 font-variant Specifies whether or not a text should be displayed in a small- caps font normal, small-caps, inherit1 font-weight Specifies the weight of a font normal, bold, bolder, lighter 100, 200, 300, 400, 500, …, 900 inherit 1

38 Text Formating Style 38 PropertyDescriptionValuesCSS colorSets the color of a textcolor1 directionSets the text directionltr, rtl2 line-heightSets the distance between linesnormal, number, length,%1 letter-spacing Increase or decrease the space between characters normal, length1 text-alignAligns the text in an elementleft, right,,center, justify1 text-decorationAdds decoration to text none, underline, overline line-through, blink 1 text-indentIndents the first line of text in an elementlength, %1 text-shadow none, color, length text-transformControls the letters in an elementnone, capitalize, uppercase, lowercase1 unicode-bidi normal, embed, bidi-override2 vertical-alignSets the vertical alignment of an element baseline, sub,super,top,text-top, middle, bottom text-bottom length, % 1 white-space Sets how white space inside an element is handled normal, pre, nowrap1 word-spacing Increase or decrease the space between words normal, length1

39 Background Style 39 PropertyDescriptionValuesCSS background Sets all the background properties in one declaration background-color background-image background-repeat background- attachment background-position inherit 1 background- attachment Sets whether a background image is fixed or scrolls with the rest of the page Scroll, fixed, inherit1 background- color Sets the background color of an element color-rgb, color-hex, color-name transparent, inherit 1 background- image Sets the background image for an element url(URL),,none, inherit1 background- position Sets the starting position of a background image top left, top center, top right,center left, center center, center right, bottom left, bottom center, bottom right, x% y%, xpos ypos, inherit 1 background- repeat Sets if/how a background image will be repeated Repeat, repeat-x, repeat-y, no- repeat, inherit 1

40 Background 40 Background Images body { background-image: url(ukm_logo.jpg); background-position: bottom right; background-repeat: no-repeat; background-attachment: fixed; } p { font-size: 18pt; color: #aa5588; text-indent: 1em; font-family: arial, sans-serif; }.dark { font-weight: bold; color:blue} This example uses the background-image, background-position and background -attachment styles to place the Universiti Kebangsaan Malaysia logo in the bottom, right corner of the page. Notice how the logo stays in the proper position when you resize the browser window. Example

41 List Style 41 PropertyDescriptionValuesCSS list-style Sets all the properties for a list in one declaration list-style-type, list-style- position, list-style-image inherit 1 list-style-image Specifies an image as the list-item marker URL, none, inherit1 list-style-position Specifies if the list-item markers should appear inside or outside the content flow Inside, outside, inherit1 list-style-type Specifies the type of list-item marker None, disc, circle, square decimal,decimal-leading- zero, armenian, georgian lower-alpha, upper-alpha lower-greek, lower-latin upper-latin, lower-roman upper-roman, inherit 1

42 Text Flow and Box Model 42  Value measurement  Px-pixels  Pt-point  In-inches  Cm-centimetres

43 Text Flow and Box Model 43

44 Text Flow and Box Model 44 div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; } The line above is 250px wide. The total width of this element is also 250px. Important: This example will not display correctly in IE! However, we will solve that problem in the next example. Example

45 Text Flow and Box Model 45 For more example :  examples.html examples.html

46 Border Styles 46

47 Border Styles 47 Solid border Double border Groove border Ridge border Inset border Outset border Example

48 More Border Styles Example 48 body { background-color: #ccffcc } div { text-align: center; margin-bottom: 1em; padding:.5em }.thick { border-width: thick }.medium { border-width: medium }.thin { border-width: thin }.groove { border-style: groove }.inset { border-style: inset }.outset { border-style: outset }.red { border-color: red }.blue { border-color: blue } This text has a border A thin red line... And a thicker blue line Example

49 Positioning Objects with CSS 49 The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P To place an element at a specific position on a page use: position: type; top: value; right: value; bottom: value; left: value;

50 Stacking Elements 50 Specify stacking order with: z-index: value z-index: 3 z-index: 1 z-index: 2

51 51  The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.  Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.  Type of positioning 1. Static Positioning 2. Fixed Positioning 3. Relative Positioning 4. Absolute Positioning

52 Static Positioning 52  HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.  Static positioned elements are not affected by the top, bottom, left, and right properties.

53 Fixed Positioning 53  An element with fixed position is positioned relative to the browser window.  It will not move even if the window is scrolled: p.pos_fixed { position:fixed; top:30px; right:5px; } Note: Internet Explorer 7 (and higher) supports the fixed value if a !DOCTYPE is specified. Some text Some text Some text Some text Example

54 Relative Positioning 54  Places the object in the specified area, using “where it would have been normally” positioning.  The object is placed on the page where is would normally go, then it gets moved to the specified position area.

55 Relative Positioning 55 p { font-size: 1.3em; font-family: verdana, arial, sans-serif } span { color: red; font-size:.6em; height: 1em }.super { position: relative; top: -1ex }.sub { position: relative; bottom: -1ex }.shiftleft { position: relative; left: -1ex }.shiftright { position: relative; right: -1ex } The text at the end of this sentence is in superscript. The text at the end of this sentence is in subscript. The text at the end of this sentence is shifted left. The text at the end of this sentence is shifted right. Example

56 Absolute Positioning 56  Are use to locate an object in absolute positioning.  It makes H3 is located at 200px from left and 100px from top. Some text here.

57 Absolute Positioning 57.trlogo { position:absolute; left:0px; top:0px; z-index:1; width: 200; height: 100; }.header {position: absolute; left:0;top:5; z-index:100; font-size: 20pt; font-face:Arial;font-weight:bold;color: blue; }.link {position: absolute; left:175;top:90; z-index:0; font-size: 10pt; font-face:Arial;font-weight:bold; } Thanks for reading. Web Development Newsletter Archive Example

58 58 Absolute, Relative, Fixed Positioning: How Do They Differ?

59 CSS Float 59  With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.  Float is very often used for images, but it is also useful when working with layouts.

60 CSS Float 60.thumbnail { float:left; width:110px; height:90px; margin:5px; } Image Gallery Try resizing the window to see what happens when the images does not have enough room. Example

61 CSS Float 61 More Example and Tutorial on Float CSS 

62 CSS Image Opacity / Transparency 62  Firefox uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).  Tip: The CSS3 syntax for transparency is opacity:x.  In Firefox (opacity:x) x can be a value from A lower value makes the element more transparent.  In IE (filter:alpha(opacity=x)) x can be a value from A lower value makes the element more transparent.

63 Image Transparency - Mouseover Effect 63 W3c School Example

64 Media Type 64  rule allows different style rules for different media in the same style sheet. Media TypeDescription allUsed for all media type devices auralUsed for speech and sound synthesizers brailleUsed for braille tactile feedback devices embossedUsed for paged braille printers handheldUsed for small or handheld devices printUsed for printers projectionUsed for projected presentations, like slides screenUsed for computer screens tty Used for media using a fixed-pitch character grid, like teletypes and terminals tvUsed for television-type devices Example

65 Conclusion … 65  Interactive Example Interactive Example  CSS Zen Garden: The Beauty of CSS Design CSS Zen Garden: The Beauty of CSS Design  Three-column layout with drop-down menus formatted solely with CSS. Three-column layout with drop-down menus formatted solely with CSS.

66 THE END


Download ppt "TP 2543 WEB PROGRAMMING CASCADING STYLE SHEET (CSS)"

Similar presentations


Ads by Google