IT online Exam

Friday 23 October 2020

Cascading Style Sheets - CSS Selectors

 CSS Selector

A selector is an HTML tag or id or class at which a style will be applied. 

Selector Types:

  • HTML Element selector
  • ID selector
  • Class selector
  • Universal selector
  • Group selector


HTML Element Selector

  • Tag selector or Element type Selector is the first Major selector in CSS. 
  • Tag Selectors are LEVEL 1 selectors in CSS. 
  • Any html element can be accessed in CSS using their tag name. 
  • The CSS properties will apply to all the html tag for that selector used in web page.




ID Selector

  • The id selector uses the id attribute of an HTML element to select a specific element.
  • The id of an element is unique within a page, so the id selector is used to select one unique element!
  • To select an element with a specific id, write a hash (#) character, followed by the id of the element.





Class Selector

  • The CSS class selector is specifies style for a group of elements. 
  • The class selector is used on several elements.
  • Using class you can use the same style for many HTML elements. 
  • The class selector selects HTML elements with a specific class attribute.
  • To select elements with a specific class, write a period (.) character, followed by the class name.



Class Selector – specific element

To specify only one specific HTML element   should be affected then you should use the  element name with class selector.




Universal Selector

  • The  universal  selector  is  used  as  a  wildcard  character (*).  
  • It  selects  all  the  elements on the Webpages.

Example :

*   {   color : #FF3E0C;  font-family: Verdana;}



Grouping Selector

  • The grouping selector selects all the HTML elements with the same style definitions.
  • It is used to group the html elements for applying of same styles.
  • To group selectors, separate each selector with a comma.








Attribute Selector

Attribute Selector select an html element based on their attributes name or value. Brackets [] are used to write attribute or attribute with value. 





Child Selector

A Child selector allows you to style only those elements which are direct descendants.

Example:

p>strong { color: red; }


<p>Web hosting is the service of providing <strong>storage space.</strong> The website  is made available on the Internet with the help of web hosting. </p>



Pseudo-class Selector

  • A CSS pseudo-class selector allows you to select and style an element with a special state specified by a keyword.
  • Pseudo Selectors are selectors used with colon selector
  • Top pseudo selectors and :hover, :focus, :active, :link, :visited etc.




No comments:

Post a Comment

Bitcoins