Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Css from scratch

•
•
Ahmad Al-ammar
Ahmad Al-ammar

This CSS tutorial document provides information on CSS syntax, selectors, and properties for styling HTML elements. It discusses using CSS for text formatting, backgrounds, borders, positioning, and navigation bars. CSS allows control over color, fonts, size, spacing and layout of HTML elements to define how they are displayed on a webpage.

1 of 75
CSS Tutorial By : Ahmad Al-ammar
What is CSS?  CSS stands for Cascading Style Sheets  CSS defines how HTML elements are to be displayed
CSS Syntax  A CSS rule set consists of a selector and a declaration block:
CSS Selectors  CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute, and more.
The element Selector  The element selector selects elements based on the element name.  You can select all <p> elements on a page like this: (all <p> elements will be center-aligned, with a red text color).
The id Selector  To select an element with a specific id, write a hash character, followed by the id of the element.  The style rule below will be applied to the HTML element with id="para1“.
The class Selector  To select elements with a specific class, write a period character, followed by the name of the class:  In the example below, all HTML elements with class="center" will be center- aligned:
The class Selector  You can also specify that only specific HTML elements should be affected by a class.  In the example below, all <p> elements with class="center" will be center- aligned:
Three Ways to Insert CSS  External style sheet .  Internal style sheet.  Inline style.
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.  An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension .
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, like this:
Inline Styles  An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly .  The style attribute can contain any CSS property.
CSS Background  All CSS Background Properties :
Background Color  a color is most often specified by: 1. a HEX value - like "#ff0000" 2. an RGB value - like "rgb(255,0,0)" 3. a color name - like "red"
Background Image  The background-image property specifies an image to use as the background of an element.  By default, the image is repeated so it covers the entire element.  If the image is repeated only horizontally (repeat-x), the background will look better:
Background - Shorthand property  To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.  The shorthand property for background is simply "background":
CSS Text
Text Color  The color property is used to set the color of the text.
Text Alignment  The text-align property is used to set the horizontal alignment of a text.  Text can be centered, or aligned to the left or right, or justified.
Text Decoration  The text-decoration property is used to set or remove decorations from text.  The text-decoration property is mostly used to remove underlines from links for design purposes:
Text Transformation  The text-transform property is used to specify uppercase and lowercase letters in a text.  It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.
Text Indentation  The text-indent property is used to specify the indentation of the first line of a text.
CSS Font  All CSS Font Properties :
Font Family  The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
Font Style  This property has three values: 1. normal - The text is shown normally 2. italic - The text is shown in italics 3. oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Font Size  The font-size property sets the size of the text.  Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.
CSS Links  inks can be styled differently depending on what state they are in. 1. The four links states are: 2. a:link - a normal, unvisited link 3. a:visited - a link the user has visited 4. a:hover - a link when the user mouses over it 5. a:active - a link the moment it is clicked
CSS Links  The background-color property specifies the background color for links:
CSS Lists  The CSS list properties allow you to: 1. Set different list item markers for ordered lists 2. Set different list item markers for unordered lists 3. Set an image as the list item marker  All CSS List Properties :
CSS Lists  An Image as The List Item Marker :  List - Shorthand property :
CSS Tables  Table Borders : 1. To specify table borders in CSS, use the border property.
CSS Tables  Collapse Borders : 1. The border-collapse property sets whether the table borders are collapsed into a single border or separated .
CSS Tables  Horizontal Text Alignment : 1. The text-align property sets the horizontal alignment, like left, right, or center. 2. By default, the text in <th> elements are center-aligned and the text in <td> elements are left-aligned. 3. The following example left-aligns the text in <th> elements:
CSS Tables  Vertical Text Alignment : 1. The vertical-align property sets the vertical alignment, like top, bottom, or middle. 2. By default, the vertical alignment of text in a table is middle (for both <th> and <td> elements). 3. The following example sets the vertical text alignment to bottom for <td> elements:
CSS Tables  Table Padding : 1. To control the space between the border and content in a table, use the padding property on <td> and <th> elements:
CSS Tables  Table Color :
CSS Box Model  The box model allows us to add a border around elements, and to define space between elements.  The image below illustrates the box model:
CSS Border  The CSS border properties allow you to specify the style, size, and color of an element's border.
CSS Outlines  An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".  The outline properties specify the style, color, and width of an outline.
CSS Outlines
CSS Margin  The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.
CSS Padding  The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
CSS Positioning  Fixed Positioning : 1. An element with a fixed position is positioned relative to the browser window, and will not move even if the window is scrolled:
CSS Positioning  Relative Positioning : 1. A relative positioned element is positioned relative to its normal position:
CSS Positioning  Absolute Positioning : 1. An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:
CSS Float  All CSS Float Properties :
CSS Float  Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.  A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.
CSS Float  Turning off Float - Using Clear : 1. Elements after the floating element will flow around it. To avoid this, use the clear property.
CSS Combinators  A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.  There are four different combinators in CSS3: 1. descendant selector 2. child selector 3. adjacent sibling selector 4. general sibling selector
CSS Combinators  Descendant Selector : 1. The descendant selector matches all element that are descendants of a specified element. 2. The following example selects all <p> elements inside <div> elements:
CSS Combinators  Child Selector : 1. The child selector selects all elements that are the immediate children of a specified element. 2. The following example selects all <p> elements that are immediate children of a <div> element:
CSS Combinators  Adjacent Sibling Selector : 1. The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. 2. Sibling elements must have the same parent element, and "adjacent" means "immediately following". 3. The following example selects all <p> elements that are placed immediately after <div> elements :
CSS Combinators  General Sibling Selector : 1. The general sibling selector selects all elements that are siblings of a specified element. 2. The following example selects all <p> elements that are siblings of <div> elements :
CSS Pseudo-classes  A pseudo-class is used to define a special state of an element.  For example, it can be used to: 1. Style an element when a user mouse over it 2. Style visited and unvisited links differently  The syntax of pseudo-classes:
CSS Pseudo-classes  Links can be displayed in different ways:
CSS Pseudo-classes
CSS Pseudo-classes
CSS Pseudo-classes
CSS Pseudo-elements  A CSS pseudo-element is used to style specified parts of an element.  For example, it can be used to: 1. Style the first letter, or line, of an element 2. Insert content before, or after, the content of an element  The syntax of pseudo-elements:
CSS Pseudo-elements  All CSS Pseudo Elements :
CSS Navigation Bar  Having easy-to-use navigation is important for any web site.  With CSS you can transform boring HTML menus into good-looking navigation bars.
CSS Navigation Bar  Navigation Bar = List of Links : 1. A navigation bar needs standard HTML as a base. 2. In our examples we will build the navigation bar from a standard HTML list. 3. A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:
CSS Navigation Bar  Horizontal Navigation Bar : 1. There are two ways to create a horizontal navigation bar. Using inline or floating list items. 2. Both methods work fine, but if you want the links to be the same size, you have to use the floating method.
CSS Attribute Selectors  It is possible to style HTML elements that have specific attributes or attribute values.  CSS [attribute=value] Selector : 1. The [attribute=value] selector is used to select elements with a specified attribute and value.
CSS Attribute Selectors  CSS [attribute~=value] Selector : 1. The [attribute~=value] selector is used to select elements with an attribute value containing a specified word. 2. The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower":
CSS Attribute Selectors  Styling Forms : 1. The attribute selectors can be useful for styling forms without class or ID:
CSS3  CSS3 is the latest standard for CSS.  CSS3 is completely backwards-compatible with earlier versions of CSS.
CSS3  CSS3 Modules : 1. Some of the most important CSS3 modules are: 2. Selectors 3. Box Model 4. Backgrounds and Borders 5. Image Values and Replaced Content 6. Text Effects 7. 2D/3D Transformations 8. Animations 9. Multiple Column Layout 10. User Interface
CSS3 Borders  In CSS3, the border-radius property is used to create rounded corners:
CSS3 The box-shadow Property
CSS3 Backgrounds  CSS3 Background Properties :
CSS3 Backgrounds  CSS3 The background-origin Property : 1. The background-origin property specifies the positioning area of the background images. 2. The background image can be placed within the content-box, padding-box, or border-box area.
CSS3 Gradients  CSS3 gradients let you display smooth transitions between two or more specified colors .  CSS3 defines two types of gradients: 1. Linear Gradients (goes down/up/left/right/diagonally) 2. Radial Gradients (defined by their center)
CSS3 Text Effects
CSS3 Web Fonts

More Related Content

Css from scratch

  • 1. CSS Tutorial By : Ahmad Al-ammar
  • 2. What is CSS?  CSS stands for Cascading Style Sheets  CSS defines how HTML elements are to be displayed
  • 3. CSS Syntax  A CSS rule set consists of a selector and a declaration block:
  • 4. CSS Selectors  CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute, and more.
  • 5. The element Selector  The element selector selects elements based on the element name.  You can select all <p> elements on a page like this: (all <p> elements will be center-aligned, with a red text color).
  • 6. The id Selector  To select an element with a specific id, write a hash character, followed by the id of the element.  The style rule below will be applied to the HTML element with id="para1“.
  • 7. The class Selector  To select elements with a specific class, write a period character, followed by the name of the class:  In the example below, all HTML elements with class="center" will be center- aligned:
  • 8. The class Selector  You can also specify that only specific HTML elements should be affected by a class.  In the example below, all <p> elements with class="center" will be center- aligned:
  • 9. Three Ways to Insert CSS  External style sheet .  Internal style sheet.  Inline style.
  • 10. 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.  An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension .
  • 11. 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, like this:
  • 12. Inline Styles  An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly .  The style attribute can contain any CSS property.
  • 13. CSS Background  All CSS Background Properties :
  • 14. Background Color  a color is most often specified by: 1. a HEX value - like "#ff0000" 2. an RGB value - like "rgb(255,0,0)" 3. a color name - like "red"
  • 15. Background Image  The background-image property specifies an image to use as the background of an element.  By default, the image is repeated so it covers the entire element.  If the image is repeated only horizontally (repeat-x), the background will look better:
  • 16. Background - Shorthand property  To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.  The shorthand property for background is simply "background":
  • 18. Text Color  The color property is used to set the color of the text.
  • 19. Text Alignment  The text-align property is used to set the horizontal alignment of a text.  Text can be centered, or aligned to the left or right, or justified.
  • 20. Text Decoration  The text-decoration property is used to set or remove decorations from text.  The text-decoration property is mostly used to remove underlines from links for design purposes:
  • 21. Text Transformation  The text-transform property is used to specify uppercase and lowercase letters in a text.  It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.
  • 22. Text Indentation  The text-indent property is used to specify the indentation of the first line of a text.
  • 23. CSS Font  All CSS Font Properties :
  • 24. Font Family  The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
  • 25. Font Style  This property has three values: 1. normal - The text is shown normally 2. italic - The text is shown in italics 3. oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
  • 26. Font Size  The font-size property sets the size of the text.  Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.
  • 27. CSS Links  inks can be styled differently depending on what state they are in. 1. The four links states are: 2. a:link - a normal, unvisited link 3. a:visited - a link the user has visited 4. a:hover - a link when the user mouses over it 5. a:active - a link the moment it is clicked
  • 28. CSS Links  The background-color property specifies the background color for links:
  • 29. CSS Lists  The CSS list properties allow you to: 1. Set different list item markers for ordered lists 2. Set different list item markers for unordered lists 3. Set an image as the list item marker  All CSS List Properties :
  • 30. CSS Lists  An Image as The List Item Marker :  List - Shorthand property :
  • 31. CSS Tables  Table Borders : 1. To specify table borders in CSS, use the border property.
  • 32. CSS Tables  Collapse Borders : 1. The border-collapse property sets whether the table borders are collapsed into a single border or separated .
  • 33. CSS Tables  Horizontal Text Alignment : 1. The text-align property sets the horizontal alignment, like left, right, or center. 2. By default, the text in <th> elements are center-aligned and the text in <td> elements are left-aligned. 3. The following example left-aligns the text in <th> elements:
  • 34. CSS Tables  Vertical Text Alignment : 1. The vertical-align property sets the vertical alignment, like top, bottom, or middle. 2. By default, the vertical alignment of text in a table is middle (for both <th> and <td> elements). 3. The following example sets the vertical text alignment to bottom for <td> elements:
  • 35. CSS Tables  Table Padding : 1. To control the space between the border and content in a table, use the padding property on <td> and <th> elements:
  • 37. CSS Box Model  The box model allows us to add a border around elements, and to define space between elements.  The image below illustrates the box model:
  • 38. CSS Border  The CSS border properties allow you to specify the style, size, and color of an element's border.
  • 39. CSS Outlines  An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".  The outline properties specify the style, color, and width of an outline.
  • 41. CSS Margin  The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.
  • 42. CSS Padding  The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
  • 43. CSS Positioning  Fixed Positioning : 1. An element with a fixed position is positioned relative to the browser window, and will not move even if the window is scrolled:
  • 44. CSS Positioning  Relative Positioning : 1. A relative positioned element is positioned relative to its normal position:
  • 45. CSS Positioning  Absolute Positioning : 1. An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:
  • 46. CSS Float  All CSS Float Properties :
  • 47. CSS Float  Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.  A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.
  • 48. CSS Float  Turning off Float - Using Clear : 1. Elements after the floating element will flow around it. To avoid this, use the clear property.
  • 49. CSS Combinators  A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.  There are four different combinators in CSS3: 1. descendant selector 2. child selector 3. adjacent sibling selector 4. general sibling selector
  • 50. CSS Combinators  Descendant Selector : 1. The descendant selector matches all element that are descendants of a specified element. 2. The following example selects all <p> elements inside <div> elements:
  • 51. CSS Combinators  Child Selector : 1. The child selector selects all elements that are the immediate children of a specified element. 2. The following example selects all <p> elements that are immediate children of a <div> element:
  • 52. CSS Combinators  Adjacent Sibling Selector : 1. The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. 2. Sibling elements must have the same parent element, and "adjacent" means "immediately following". 3. The following example selects all <p> elements that are placed immediately after <div> elements :
  • 53. CSS Combinators  General Sibling Selector : 1. The general sibling selector selects all elements that are siblings of a specified element. 2. The following example selects all <p> elements that are siblings of <div> elements :
  • 54. CSS Pseudo-classes  A pseudo-class is used to define a special state of an element.  For example, it can be used to: 1. Style an element when a user mouse over it 2. Style visited and unvisited links differently  The syntax of pseudo-classes:
  • 55. CSS Pseudo-classes  Links can be displayed in different ways:
  • 59. CSS Pseudo-elements  A CSS pseudo-element is used to style specified parts of an element.  For example, it can be used to: 1. Style the first letter, or line, of an element 2. Insert content before, or after, the content of an element  The syntax of pseudo-elements:
  • 60. CSS Pseudo-elements  All CSS Pseudo Elements :
  • 61. CSS Navigation Bar  Having easy-to-use navigation is important for any web site.  With CSS you can transform boring HTML menus into good-looking navigation bars.
  • 62. CSS Navigation Bar  Navigation Bar = List of Links : 1. A navigation bar needs standard HTML as a base. 2. In our examples we will build the navigation bar from a standard HTML list. 3. A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:
  • 63. CSS Navigation Bar  Horizontal Navigation Bar : 1. There are two ways to create a horizontal navigation bar. Using inline or floating list items. 2. Both methods work fine, but if you want the links to be the same size, you have to use the floating method.
  • 64. CSS Attribute Selectors  It is possible to style HTML elements that have specific attributes or attribute values.  CSS [attribute=value] Selector : 1. The [attribute=value] selector is used to select elements with a specified attribute and value.
  • 65. CSS Attribute Selectors  CSS [attribute~=value] Selector : 1. The [attribute~=value] selector is used to select elements with an attribute value containing a specified word. 2. The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower":
  • 66. CSS Attribute Selectors  Styling Forms : 1. The attribute selectors can be useful for styling forms without class or ID:
  • 67. CSS3  CSS3 is the latest standard for CSS.  CSS3 is completely backwards-compatible with earlier versions of CSS.
  • 68. CSS3  CSS3 Modules : 1. Some of the most important CSS3 modules are: 2. Selectors 3. Box Model 4. Backgrounds and Borders 5. Image Values and Replaced Content 6. Text Effects 7. 2D/3D Transformations 8. Animations 9. Multiple Column Layout 10. User Interface
  • 69. CSS3 Borders  In CSS3, the border-radius property is used to create rounded corners:
  • 71. CSS3 Backgrounds  CSS3 Background Properties :
  • 72. CSS3 Backgrounds  CSS3 The background-origin Property : 1. The background-origin property specifies the positioning area of the background images. 2. The background image can be placed within the content-box, padding-box, or border-box area.
  • 73. CSS3 Gradients  CSS3 gradients let you display smooth transitions between two or more specified colors .  CSS3 defines two types of gradients: 1. Linear Gradients (goes down/up/left/right/diagonally) 2. Radial Gradients (defined by their center)