0
Starting with CSSWhat You Should Already KnowBefore you continue you should have a basic understanding of thefollowing:HTM...
Contents of Style Sheet• A style sheet consists of a set of rules.• Each rule consists of one or more selectors and a  dec...
Three Different Scopes of CSS• Local   – confined to a single element (tag)• Internal   – affect elements in an entire pag...
CSS SelectorThe id Selector                        The class Selector•The id selector is used to            •The class sel...
BackgroundProperty           Description                   Sets all the background properties in onebackground            ...
TextProperty        Descriptioncolor           Sets the color of texttext-align      Specifies the horizontal alignment of...
FontCSS font properties define the font family, boldness, size, and the styleof a text.             Difference Between Ser...
All CSS Font PropertiesProperty       Descriptionfont           Sets all the font properties in one declarationfont-family...
Links & Lists The four links states are: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover...
The CSS Box ModelMargin - Clears an area around the border. The margin does not havea background color, it is completely t...
CSS Grouping & Nesting Selectors     h1             p     {              {     color:green;     }                    color...
CSS Display and VisibilityThe display property specifies if/how an element is displayed, andthe visibility property specif...
CSS PositioningName               DescriptionStatic             HTML elements are positioned static by default. A         ...
Stepping into CSS3    Important Features:    CSS3 Borders    CSS3 Backgrounds    CSS3 Text Effects    CSS3 2D Transforms  ...
Some Demos in PracticalReference : This presentation slide containsthe contents links from W3SCHOOL.Link: http://www.w3sch...
Upcoming SlideShare
Loading in...5
×

Introduction 2 css

369

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
369
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction 2 css"

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. Some Demos in PracticalReference : This presentation slide containsthe contents links from W3SCHOOL.Link: http://www.w3schools.com/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×