Your SlideShare is downloading. ×
Introduction 2 css
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction 2 css


Published on

Published in: Technology, Education

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Starting with CSSWhat You Should Already KnowBefore you continue you should have a basic understanding of thefollowing:HTML / XHTMLWhat is CSS?•CSS stands for Cascading Style Sheets•Styles define how to display HTML elements•Styles were added to HTML 4.0.•External Style Sheets can save a lot of work•External Style Sheets are stored in CSS files What the benefit of CSS?
  • 2. Contents of Style Sheet• A style sheet consists of a set of rules.• Each rule consists of one or more selectors and a declaration block.• A declaration block consists of a list of declarations in curly braces ({}).• Each declaration consists of a property, a colon (:), a value, then a semi-colon (;).
  • 3. Three Different Scopes of CSS• Local – confined to a single element (tag)• Internal – affect elements in an entire page• External – can affect multiple pages• Precedence – Local > Internal > External
  • 4. CSS SelectorThe id Selector The class Selector•The id selector is used to •The class selector is used tospecify a style for a single, specify a style for a group ofunique element. elements. Unlike the id selector,•The id selector uses the id the class selector is most oftenattribute of the HTML used on several elements.element, and is defined with a •This allows you to set a particular"#". style for many HTML elements with the same class. •The class selector uses the HTML class attribute, and is defined with a "."Demo on a real HTML file in browser.
  • 5. BackgroundProperty Description Sets all the background properties in onebackground declarationbackground- Sets whether a background image is fixed orattachment scrolls with the rest of the pagebackground-color Sets the background color of an elementbackground-image Sets the background image for an elementbackground- Sets the starting position of a backgroundposition imagebackground-repeat Sets how a background image will be repeated
  • 6. TextProperty Descriptioncolor Sets the color of texttext-align Specifies the horizontal alignment of texttext- Specifies the decoration added to textdecorationtext-transform Controls the capitalization of text
  • 7. FontCSS font properties define the font family, boldness, size, and the styleof a text. Difference Between Serif and Sans-serif Fonts Generic family Font family Description Times New Serif fonts have small lines at the Serif Roman ends on some characters Georgia "Sans" means without - these Arial Sans-serif fonts do not have the lines at the Verdana ends of characters
  • 8. All CSS Font PropertiesProperty Descriptionfont Sets all the font properties in one declarationfont-family Specifies the font family for textfont-size Specifies the font size of textfont-style Specifies the font style for text Specifies whether or not a text should befont-variant displayed in a small-caps fontfont-weight Specifies the weight of a font
  • 9. Links & Lists The four links states are: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked List :In HTML, there are two types of lists: •unordered lists - the list items are marked with bullets •ordered lists - the list items are marked with numbers or letters The CSS list properties allow you to: •Set different list item markers for ordered lists •Set different list item markers for unordered lists •Set an image as the list item markerDemo on a real HTML file in browser.
  • 10. The CSS Box ModelMargin - Clears an area around the border. The margin does not havea background color, it is completely transparentBorder - A border that goes around the padding and content. Theborder is affected by the background color of the boxPadding - Clears an area around the content. The padding is affectedby the background color of the boxContent - The content of the box, where text and images appear
  • 11. CSS Grouping & Nesting Selectors h1 p { { color:green; } color:blue; h2 text-align:center; { } color:green; .marked } { p { background- color:green; color:red; } } .marked p h1,h2,p { { color:white; color:green; } }
  • 12. CSS Display and VisibilityThe display property specifies if/how an element is displayed, andthe visibility property specifies if an element should be visible orhidden.Hiding an element can be done by setting the display property to"none" or the visibility property to "hidden".visibility:hidden hides an element, but it will still take up the samespace as before. The element will be hidden, but still affect thelayout.display:none hides an element, and it will not take up anyspace. The element will be hidden, and the page will bedisplayed as if the element is not there
  • 13. CSS PositioningName DescriptionStatic HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.Relative A relative positioned element is positioned relative to its normal position.Absolute 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>Fixed An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled.Demo on a real HTML file in browser.
  • 14. Stepping into CSS3 Important Features: CSS3 Borders CSS3 Backgrounds CSS3 Text Effects CSS3 2D Transforms CSS3 3D Transforms CSS3 Transitions CSS3 Animations CSS3 Multiple ColumnsDemo on a real HTML file in browser.
  • 15. Some Demos in PracticalReference : This presentation slide containsthe contents links from W3SCHOOL.Link: