1 / 13

Introduction to CSS syntax and selectors - lesson 2

CSS coding format is known as its Syntax. A CSS rule-set consists of a selector and a declaration block which is known as CSS selector. The selector points to the HTML element you want to style.

trainingdevelopment
Download Presentation

Introduction to CSS syntax and selectors - lesson 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to CSS Syntaxand Selectors - Lesson 2 Publisher : Attitude Academy

  2. What is CSS Syntax The syntax for CSS is different than that of HTML markup. Though it is not too confusing, once you take a look at it. A style rule is made of three parts: Example Here: Selector { Property: Value}

  3. Syntax Selector: A selector is an HTML tag at which a style will be applied. This could be any tag like <h1>or<table> etc. Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border, etc. Value: Values are assigned to properties. For example, color property can have the value either red or #F1F1F1 etc Example Here: H1 {color:#c20000;}

  4. Selector There are seven types of Selectors You can define selectors in various simple ways based on your comfort. We haveSeven type of selectorlet me Define these selectors one by one. • Class Selectors • Id Selectors • Descendant Selectors • Child Selectors • Attribute Selectors • Tag Selectors • Grouping Selectors (Note: Any selectors name should not be same or selector should not be written in numerical)

  5. The Class Selectors You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule. Example Here: .class-name {color: #c20000 ;} You can apply more than one class selectors to a given element. Consider the following example: Example Here: <div class="class-name" >Add your external file link on html document </div>

  6. Selector The Id Selectors You can define style rules based on the ID attribute of the elements. All the elements having that Id will be formatted according to the defined rule. Example Here: #id-name { font-siz:40px;} You can apply more than one Id selectors to a given element. Consider the following example: Example Here: <div id="id-name" >Add your external file link on html document </div>

  7. Selector The Descendant Selectors Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, the style rule will apply to <a>element only when it lies inside the<li>tag. Example Here: Li a { font-siz:40px;} You can apply more than one Descendant selectors to a given element. Consider the following example: Example Here: <li ><a>Add your external file link on html document </a></li>

  8. Selector The Child Selectors You have seen the descendant selectors. There is one more type of selector, which is very similar to descendants but have different functionality. Consider the following example: Example Here: .class-name p { color:#000;} You can apply more than one child selectors to a given element. Consider the following example: Example Here: <div class="class-name"><p >Add your external file link on html document </p></div>

  9. Selector The Attribute Selectors You can also apply styles to HTML elements with particular attributes. The style rule below will match all the input elements having a type attribute with a value of text: Example Here: Input [type="text"] { color:#000;} You can apply more than one child selectors to a given element. Consider the following example: Example Here: <input type="text" />

  10. Selector The Tag Selectors You have seen the descendant selectors. There is one more type of selector, which is very similar to descendants but have different functionality. Consider the following example: Example Here: p { color:#09a905;} You can apply more than one child selectors to a given element. Consider the following example: Example Here: <p >Add your external file link on html document </p>

  11. Selector The Grouping Selectors You can apply a style to many selectors if you like. Just separate the selectors with a comma, as given in the following example: Example Here: h1, h2, h3 { color: #36C; font-weight: normal; font-size:20px; }

  12. Selector This define style rule will be applicable to h1, h2 and h3 element as well. The order of the list is irrelevant. All the elements in the selector will have the corresponding declarations applied to them. Example Here: .class-name .class2 .class3 { color: #36C; font-weight: normal; font-size:20px; } #content, #footer, #supplement { color: #36C; font-weight: normal; font-size:20px; }

  13. Visit Us : Attitude Academy

More Related