CSS Syntax and Selectors

CSS Syntax and Selectors Tutorial

Select Language

Marathi


css वापरायचे नियम आणि पद्धती शिकू ::

  • Selector − css हे html च्या सगळ्या tag ला apply होऊ शकत. उदाहरण :<div <p>, <h1>, <table>
  • Property – css attribute चा उपयोग html चे tag ला coloring kiwa designing करण्यासाठी वापर करतात . त्यात color, border, etc. attribute पाहायला मिळतील
  • Value -css च्या Values आपण #f1f1f1 मध्ये use करू शकतो. आणि rgba color मध्ये सुद्धा use करू शकतो rgba(0,0,0,1). value म्हणजे property ला दिल्या गेलेली संख्या.

इथे काही निवडक css selector वापरलेत आहेत. आपण आता आपण त्यांचा वापर HTML मध्ये कसा करावा हे बघू ..

The weights CSS

  • The weight of a Tag is 1
  • The weight of a class is 10.
  • The weight of an ID is 100.
  • The weight of a style attribute is 1000.

ID selectors

आपण ID ला CSS use करू शकतो. त्या साठी # हा code वापरतो. ID च CSS वजन 100 आहे..म्हणजे ID हा Class च्या 10 पटीने मोठा आहे.. जेव्हा एक DIV ला ID आणि Class वापरतो तेव्हा तो DIV प्रथम ID ची CSS प्रॉपर्टी वापरेल. आणि ID हा आपण एका div ला एकच वापरू शकतो. किंवा HTML च्या tag ला एकदाच वापरू शकतो.

<style>#header { color:#ddd; }</style>
<div id="header">My Name is Simplycode</div>

Class Selector

आपण CLASS ला CSS use करू शकतो. त्या साठी “.” हा code वापरतो. CLASS च CSS वजन 10 आहे..म्हणजे CLASS हा Tag च्या 10 पटीने मोठा आहे. CLASS हा आपण एका div ला खूप वेळा वापरू शकतो त्याला अश्या काही मर्यादा नाहीत, CLASS वापरताना प्रत्येक CLASS मध्ये जागा सोडून नवीन CLASS नमूद करावा. उदाहरण :

<style>
.header { color:#ddd; } 
.content{ background:#000; padding:5px; }</style>
<div class="header content">My Name is Simplycode</div>

Attribute Selectors

तुम्ही HTML च्या विशिष्ट attributes ला सुद्धा style apply करू शकता. खालील दिल्या प्रमाणे आपण पाहू शकता कोण कोणत्या attributes ला CSS Style Apply होते.

input[type = "text"]{ color:#ddd; }
[disabled]
Selects all elements with a “disabled” attribute. :

input:disabled{ color:#ddd; } <input type="text" value="Simplycode" disabled />
[type=’button’]
Selects elements with a “button” type.:

input[type='button']{ color:#ddd; } <input type="button" value="Disneyland" disabled />
[class~=key]
Selects elements with the class “key” (but not e.g. “keyed”, “monkey”, “buckeye”). Functionally equivalent to .key.
[class^="simple"] {background: yellow;} <p class="simple">My name is simplycode.in</p>
[title*=”example” i]
Selects elements whose title contains “example”, ignoring case. In browsers that don’t support the “i” flag, this selector probably won’t match any element.

<style>
[title~=line] {  border: 5px solid yellow;}
</style>
<img src="http://www.simplycode.in/wp-content/uploads/2016/06/cherry.png" alt="cherry" class="alignnone size-full wp-image-341" height="128" title="line" width="128" />
a[href^=”https://”]
Selects secure links.
img[src$=”.png”]
Indirectly selects PNG images; any images that are PNGs but whose URL doesn’t end in “.png” (such as when there’s a query string) won’t be selected.

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.

.header h2{ color:#ddd; }

Grouping Selectors

You can apply a style to many selectors if you like. Just separate the selectors with a comma.

.header h2, h1, Div.content, #header { color:#ddd; font-size:12px; }

Universal Selectors

Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type.

*{ color:#ddd;}

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, style rule will apply to <em> element only when it lies inside <ul> tag.

Ul em { color:#000;}

Pseudo-classes Selectors

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.

a:hover { color:#000;}

List of pseudo-classes

  • :link
  • :visited
  • :active
  • :hover
  • :focus
  • :first-child
  • :last-child
  • :nth-child
  • :nth-last-child
  • :nth-of-type
  • :first-of-type
  • :last-of-type
  • :empty
  • :target
  • :checked
  • :enabled
  • :disabled

English


A CSS rule-set consists of a selector and a declaration block:

  • Selector − A selector is an HTML tag at which a style will be applied. Css applied Any tag like <div>, <p>, <h1>. <table>
  • 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 value either red or #F1F1F1 etc.

here is a few selectors: CSS selectors are used to “find” (or select) HTML elements based on their element name, id, class, attribute, and more.

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.

#header { color:#ddd; }

 	 	

class Selector

The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the class.

In the example below, all HTML elements with class=”center” will be red and center-aligned:

.header { color:#ddd; }

 	 	

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.

input[type = "text"]{ color:#ddd; }

 	 	
[disabled]
Selects all elements with a “disabled” attribute.
[type=’button’]
Selects elements with a “button” type.
[class~=key]
Selects elements with the class “key” (but not e.g. “keyed”, “monkey”, “buckeye”). Functionally equivalent to .key.
[lang|=es]
Selects elements specified as Spanish. This includes “es” and “es-MX” but not “eu-ES” (which is Basque).
[title*=”example” i]
Selects elements whose title contains “example”, ignoring case. In browsers that don’t support the “i” flag, this selector probably won’t match any element.
a[href^=”https://”]
Selects secure links.
img[src$=”.png”]
Indirectly selects PNG images; any images that are PNGs but whose URL doesn’t end in “.png” (such as when there’s a query string) won’t be selected.

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.

.header h2{ color:#ddd; }

 	 	

Grouping Selectors

You can apply a style to many selectors if you like. Just separate the selectors with a comma.

.header h2, h1, Div.content, #header { color:#ddd; font-size:12px; }

 	 	

Universal Selectors

Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type.

*{ color:#ddd;}

 	 	

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, style rule will apply to <em> element only when it lies inside <ul> tag.

Ul em { color:#000;}

Pseudo-classes Selectors

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.

a:hover { color:#000;}

List of pseudo-classes

  • :link
  • :visited
  • :active
  • :hover
  • :focus
  • :first-child
  • :last-child
  • :nth-child
  • :nth-last-child
  • :nth-of-type
  • :first-of-type
  • :last-of-type
  • :empty
  • :target
  • :checked
  • :enabled
  • :disabled