SlideShare a Scribd company logo

CSS

•Download as PPT, PDF•
•
A
ARJUN

CSS (Cascading Style Sheets) is a language used to describe the presentation of HTML documents, including how elements are displayed on screen, paper, or in other media. It allows separation of document content from document presentation and styling. CSS properties specify features like text styling, backgrounds, borders, positioning, and layout. CSS can be applied to HTML documents as well as XML documents like SVG and XUL.

1 of 30
CSS Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL.
HISTORY Style sheets have existed in one form or another since the beginnings of SGML in the 1970s. Cascading Style Sheets were developed as a means for creating a consistent approach to providing style information for web documents. As HTML grew, it came to encompass a wider variety of stylistic capabilities to meet the demands of web developers. This evolution gave the designer more control over site appearance but at the cost of HTML becoming more complex to write and maintain. Variations in web browser implementations made consistent site appearance difficult, and users had less control over how web content was displayed.
CSS STYLING
STYLING BACKGROUNDS CSS properties used for background effects: CSS background properties are used to define the background effects of an element. background-color background-image background-repeat background-attachment background-position Background Color The background-color property specifies the background color of an element.The background color of a page is defined in the body selector: Example: body {background-color:#b0c4de;}
STYLING TEXT Text Color The color property is used to set the color of the text. The color can be specified by: name - a color name, like "red" RGB - an RGB value, like "rgb(255,0,0)" Hex - a hex value, like "#ff0000" The default color for a page is defined in the body selector. Example body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}
CSS FONT FAMILIES CSS Font Families In CSS, there are two types of font family names: generic family - a group of font families with a similar look (like "Serif" or "Monospace") font family - a specific font family (like "Times New Roman" or "Arial") Font Style The font-style property is mostly used to specify italic text. This property has three values: normal - The text is shown normally italic - The text is shown in italics oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
CSS BOX MODEL
BOX MODEL The CSS Box Model All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements. The image below illustrates the box model:
BORDER Border Width The border-width property is used to set the width of the border. The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick. Border Color The border-color property is used to set the color of the border. The color can be set by: name - specify a color name, like "red" RGB - specify a RGB value, like "rgb(255,0,0)" Hex - specify a hex value, like "#ff0000"
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.The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once. Possible Values:
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.The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once. Possible Values:
PADDING INDIVIDUAL SLIDES Padding - Individual sides In CSS, it is possible to specify different padding for different sides:
PADDING SHORT HAND PROPERTY To shorten the code, it is possible to specify all the padding properties in one property. This is called a shorthand property.The shorthand property for all the padding properties is "padding": Example: padding:25px 50px; The padding property can have from one to four values. padding:25px 50px 75px 100px; top padding is 25px right padding is 50px bottom padding is 75px left padding is 100px
CSS GROUPING AND NESTING SELECTORS
GROUPING SELECTORS Grouping Selectors In style sheets there are often elements with the same style. To minimize the code, you can group selectors. Separate each selector with a comma. In the example below we have grouped the selectors from the code above:
NESTING SELECTORS Nesting Selectors It is possible to apply a style for a selector within a selector. In the example below, one style is specified for all p elements, and a separate style is specified for p elements nested within the "marked" class:
CSS DISPLAY
CSS Display - Block and Inline Elements A block element is an element that takes up the full width available, and has a line break before and after it. Examples of block elements: <h1> <p> <div> An inline element only takes up as much width as necessary, and does not force line breaks. Examples of inline elements: <span> <a>
CSS POSITIONING
Positioning 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.
Static Positioning 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.
Fixed Positioning An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled:
CSS NAVIGATION BAR
Vertical Navigation Bar To build a vertical navigation bar we only need to style the <a> elements, in addition to the code above:
Horizontal Navigation Bar Horizontal Navigation Bar There are two ways to create a horizontal navigation bar. Using inline or floating list items. Both methods work fine, but if you want the links to be the same size, you have to use the floating method.
CSS MEDIA TYPES Media Types allow you to specify how documents will be presented in different media. The document can be displayed differently on the screen, on the paper, with an aural browser, etc. Different Media Types: all Used for all media type devices aural Used for speech and sound synthesizers braille Used for braille tactile feedback devices embossed Used for paged braille printers handheld Used for small or handheld devices print Used for printers projection Used for projected presentations, like slides screen Used for computer screens tty Used for media using a fixed-pitch character grid, like teletypes and terminals tv Used for television-type devices
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.
Turning off Float - Using Clear Elements after the floating element will flow around it. To avoid this, use the clear property. The clear property specifies which sides of an element other floating elements are not allowed. EXAMPLE: .text_line { clear:both; }
HOW ELEMENTS 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.The elements after the floating element will flow around it.The elements before the floating element will not be affected.
CSS FLOAT PROPERTIES Property Description Values CSS clear Specifies which sides of an element where other floating elements are not allowed left right both none inherit 1 float Specifies whether or not a box should float left right none inherit 1

More Related Content

CSS

  • 1. CSS Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL.
  • 2. HISTORY Style sheets have existed in one form or another since the beginnings of SGML in the 1970s. Cascading Style Sheets were developed as a means for creating a consistent approach to providing style information for web documents. As HTML grew, it came to encompass a wider variety of stylistic capabilities to meet the demands of web developers. This evolution gave the designer more control over site appearance but at the cost of HTML becoming more complex to write and maintain. Variations in web browser implementations made consistent site appearance difficult, and users had less control over how web content was displayed.
  • 4. STYLING BACKGROUNDS CSS properties used for background effects: CSS background properties are used to define the background effects of an element. background-color background-image background-repeat background-attachment background-position Background Color The background-color property specifies the background color of an element.The background color of a page is defined in the body selector: Example: body {background-color:#b0c4de;}
  • 5. STYLING TEXT Text Color The color property is used to set the color of the text. The color can be specified by: name - a color name, like &quot;red&quot; RGB - an RGB value, like &quot;rgb(255,0,0)&quot; Hex - a hex value, like &quot;#ff0000&quot; The default color for a page is defined in the body selector. Example body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}
  • 6. CSS FONT FAMILIES CSS Font Families In CSS, there are two types of font family names: generic family - a group of font families with a similar look (like &quot;Serif&quot; or &quot;Monospace&quot;) font family - a specific font family (like &quot;Times New Roman&quot; or &quot;Arial&quot;) Font Style The font-style property is mostly used to specify italic text. This property has three values: normal - The text is shown normally italic - The text is shown in italics oblique - The text is &quot;leaning&quot; (oblique is very similar to italic, but less supported)
  • 8. BOX MODEL The CSS Box Model All HTML elements can be considered as boxes. In CSS, the term &quot;box model&quot; is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements. The image below illustrates the box model:
  • 9. BORDER Border Width The border-width property is used to set the width of the border. The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick. Border Color The border-color property is used to set the color of the border. The color can be set by: name - specify a color name, like &quot;red&quot; RGB - specify a RGB value, like &quot;rgb(255,0,0)&quot; Hex - specify a hex value, like &quot;#ff0000&quot;
  • 10. 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.The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once. Possible Values:
  • 11. 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.The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once. Possible Values:
  • 12. PADDING INDIVIDUAL SLIDES Padding - Individual sides In CSS, it is possible to specify different padding for different sides:
  • 13. PADDING SHORT HAND PROPERTY To shorten the code, it is possible to specify all the padding properties in one property. This is called a shorthand property.The shorthand property for all the padding properties is &quot;padding&quot;: Example: padding:25px 50px; The padding property can have from one to four values. padding:25px 50px 75px 100px; top padding is 25px right padding is 50px bottom padding is 75px left padding is 100px
  • 14. CSS GROUPING AND NESTING SELECTORS
  • 15. GROUPING SELECTORS Grouping Selectors In style sheets there are often elements with the same style. To minimize the code, you can group selectors. Separate each selector with a comma. In the example below we have grouped the selectors from the code above:
  • 16. NESTING SELECTORS Nesting Selectors It is possible to apply a style for a selector within a selector. In the example below, one style is specified for all p elements, and a separate style is specified for p elements nested within the &quot;marked&quot; class:
  • 18. CSS Display - Block and Inline Elements A block element is an element that takes up the full width available, and has a line break before and after it. Examples of block elements: <h1> <p> <div> An inline element only takes up as much width as necessary, and does not force line breaks. Examples of inline elements: <span> <a>
  • 20. Positioning 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.
  • 21. Static Positioning 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.
  • 22. Fixed Positioning An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled:
  • 24. Vertical Navigation Bar To build a vertical navigation bar we only need to style the <a> elements, in addition to the code above:
  • 25. Horizontal Navigation Bar Horizontal Navigation Bar There are two ways to create a horizontal navigation bar. Using inline or floating list items. Both methods work fine, but if you want the links to be the same size, you have to use the floating method.
  • 26. CSS MEDIA TYPES Media Types allow you to specify how documents will be presented in different media. The document can be displayed differently on the screen, on the paper, with an aural browser, etc. Different Media Types: all Used for all media type devices aural Used for speech and sound synthesizers braille Used for braille tactile feedback devices embossed Used for paged braille printers handheld Used for small or handheld devices print Used for printers projection Used for projected presentations, like slides screen Used for computer screens tty Used for media using a fixed-pitch character grid, like teletypes and terminals tv Used for television-type devices
  • 27. 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.
  • 28. Turning off Float - Using Clear Elements after the floating element will flow around it. To avoid this, use the clear property. The clear property specifies which sides of an element other floating elements are not allowed. EXAMPLE: .text_line { clear:both; }
  • 29. HOW ELEMENTS 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.The elements after the floating element will flow around it.The elements before the floating element will not be affected.
  • 30. CSS FLOAT PROPERTIES Property Description Values CSS clear Specifies which sides of an element where other floating elements are not allowed left right both none inherit 1 float Specifies whether or not a box should float left right none inherit 1