Css3 Presetation
•Download as PPTX, PDF•
1 like•602 views
Presentation on the wonders of CSS3
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Css3 Presetation
Similar to Css3 Presetation (20)
Recently uploaded
Recently uploaded (20)
Css3 Presetation
- 1. CSS3
- 2. CSS Basics CSS is used to control the style and layout of web pages. CSS3 is the latest standard for CSS. Selector { declaration: } Property: Value Imagine there is an invisible box around every HTML element. CSS allows you to create rules that control the way that each individual box (and the contents of that box) is presented. Block level elements <h1>-<h6>, <p> and <div> elements Inline elements <b>, <i>, <img>, <em> and <span>.
- 3. Important Selectors to Know * #X .X X Y X X:visited and X:link . X + Y X > Y
- 4. External and Internal CSS Link The link element can be used in an HTML document to tell the browser where to find the CSS file used to style the page. Ex: <link href =“css.styles.css” type=“text/css” rel=“stylesheet” Style CSS rules are included within an HTML page by placing them inside a style element. The value should be text/CSS
- 5. Pseudo-Classes: Attribute Selectors E[foo^="bar"] an element whose "foo" attribute value begins exactly with the string "bar" E[foo$="bar"] an element whose "foo" attribute value ends exactly with the string "bar" E[foo*="bar"] an element whose "foo" attribute value contains the substring "bar"
Editor's Notes
- Block level elements look like they start on a new line, while inline elements flow within the text and do not start on a new line. Example styles: width and height, borders (color, width, and style), background color and images.Selectors indicate which element the rule applies to. The same rule can apply to more than one element if you separate the element names with commas.Declarations indicate how the elements referred to in a selector should be styled. Properties indicate the aspects of the element you want to change, and values specify the settings you want to use for the chosen properties. (ie color: yellow;)
- #X=id.X= classX Y= descendent selector (ie: li a)X = type selectorWe use the :link pseudo-class to target all anchors tags which have yet to be clicked on.Alternatively, we also have the :visited pseudo class, which, as you’d expected, allows us to apply specific styling to only the anchor tags on the page which have been clicked on, or visitedThis is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each ul will have red text.The difference between the standard X Y and X > Y is that the latter will only select direct children. For example, consider the following markup.
- Block level elements look like they start on a new line, while inline elements flow within the text and do not start on a new line. Example styles: width and height, borders (color, width, and style), background color and images.Selectors indicate which element the rule applies to. The same rule can apply to more than one element if you separate the element names with commas.Declarations indicate how the elements referred to in a selector should be styled. Properties indicate the aspects of the element you want to change, and values specify the settings you want to use for the chosen properties. (ie color: yellow;)
- :nth-child pseudo-class selectorEver want to style a table so that every other row was a different color?Or have a gallery of images so that each row is 3 images wide?:nth-child pseudo-class is used to style every 2nd, 3rd, 4th, or "nth" element
- Slide 15-20Slide 31-36