Learn X in Y minutes

/* css இல் குறிப்புகளை இப்படி இடலாம் */

/* ####################
   ## SELECTORS
   #################### */

/* ஒரு HTML பக்கத்தில் இருக்கும் உறுப்பை நாம் selector மூலம் தெரிவு செய்யலாம் */
selector { property: value; /* more properties...*/ }

/*
கிழே ஒரு உதாரணம் காட்டப்பட்டுள்ளது:

<div class='class1 class2' id='anID' attr='value' otherAttr='en-us foo bar' />
*/

/* நீங்கள் அந்த உறுப்பை அதன் CSS class மூலம் தெரியலாம் */
.class1 { }

/* அல்லது இவ்வாறு  இரண்டு  class மூலம் தெரியலாம்! */
.class1.class2 { }

/* அல்லது  அதன்  பெயரை பாவித்து தெரியலாம் */
div { }

/* அல்லது  அதன் id ஐ  பயன்படுத்தி  தெரியலாம்*/
#anID { }

/* அல்லது ஒரு  உறுப்பின்   பண்பு ஒன்றின்  மூலம்! */
[attr] { font-size:smaller; }

/* அல்லது அந்த  பண்பு ஒரு  குறிப்பிட்ட  பெறுமானத்தை கொண்டு இருப்பின் */
[attr='value'] { font-size:smaller; }

/* ஒரு  பெறுமதியுடன் ஆரம்பமாகும் போது (CSS 3) */
[attr^='val'] { font-size:smaller; }

/* அல்லது  ஒரு பெறுமதியுடன் முடிவடையும் போது  (CSS 3) */
[attr$='ue'] { font-size:smaller; }

/*  அல்லது  காற்புள்ளியால் பிரிக்கப்பட்ட  பெறுமானங்களை கொண்டு இருப்பின் */
[otherAttr~='foo'] { }
[otherAttr~='bar'] { }

/* அல்லது  `-` பிரிக்கப்பட்ட  பெறுமானங்களை கொண்டு இருப்பின், உ.ம்:-, "-" (U+002D) */
[otherAttr|='en'] { font-size:smaller; }


/* நாம் இரண்டு selectors ஐ ஒன்றாக உபயோகித்தும் ஒரு உறுப்பை அணுக முடியும்  , 
அவற்றுக்கு இடயே இடைவெளி காணப்படகூடாது
 */
div.some-class[attr$='ue'] { }

/*அல்லது ஒரு உறுப்பினுள் இருக்கும் இன்னொரு உறுப்பை (child element) அணுக */
div.some-parent > .class-name { }

/* ஒரு  ஒரு  பிரதான உறுப்பில் உள்ள உப உறுப்புகளை அணுக*/
div.some-parent .class-name { }

/* மேலே  குறிபிட்ட அணுகுமுறையில் இடைவெளி காணப்படாது விடின் 
    அந்த selector வேலை செய்யாது
 */
div.some-parent.class-name { }

/* அல்லது ஒரு உறுப்புக்கு அடுத்துள்ள  */
.i-am-just-before + .this-element { }

/* or அல்லது அதற்கு முந்தய உறுப்பின்  மூலம் */
.i-am-any-element-before ~ .this-element { }

/* 
    சில selectors ஐ pseudo class மூலம் அணுக முடியும் , எப்போது எனில் அவை
    குறித்த ஒரு நிலையில் இருக்கும் போது ஆகும்
   */

/* உதாரணமாக நாம் ஒரு  உறுப்பின் மீதாக cursor ஐ நகர்த்தும் போது */
selector:hover { }

/* அல்லது ஒரு
பார்வையிட்ட இணைப்பு */
selector:visited { }

/* அல்லது ஒரு  பார்வையிடபடாத இணைப்பு */   
selected:link { }

/* அல்லது  ஒரு element ஐ  focus செய்யும் போது */
selected:focus { }

/* 
    எல்லா elementகளையும் ஒரே நேரத்தில் அணுக `*`
*/
* { } /* all elements */
.parent * { } /* all descendants */
.parent > * { } /* all children */

/* ####################
   ## பண்புகள்
   #################### */

selector {

    /*  நீளத்தின் அலகுகள் absolute அல்லது relative ஆக இருக்கலாம். */

    /* Relative units */
    width: 50%;       /* percentage of parent element width */
    font-size: 2em;   /* multiples of element's original font-size */
    font-size: 2rem;  /* or the root element's font-size */
    font-size: 2vw;   /* multiples of 1% of the viewport's width (CSS 3) */
    font-size: 2vh;   /* or its height */
    font-size: 2vmin; /* whichever of a vh or a vw is smaller */
    font-size: 2vmax; /* or greater */

    /* Absolute units */
    width: 200px;     /* pixels */
    font-size: 20pt;  /* points */
    width: 5cm;       /* centimeters */
    min-width: 50mm;  /* millimeters */
    max-width: 5in;   /* inches */


    /* Colors */
    color: #F6E;                 /* short hex format */
    color: #FF66EE;              /* long hex format */
    color: tomato;               /* a named color */
    color: rgb(255, 255, 255);   /* as rgb values */
    color: rgb(10%, 20%, 50%);   /* as rgb percentages */
    color: rgba(255, 0, 0, 0.3); /* as rgba values (CSS 3) Note: 0 < a < 1 */
    color: transparent;          /* equivalent to setting the alpha to 0 */
    color: hsl(0, 100%, 50%);    /* as hsl percentages (CSS 3) */
    color: hsla(0, 100%, 50%, 0.3); /* as hsla percentages with alpha */

    /* Images as backgrounds of elements */
    background-image: url(/img-path/img.jpg); /* quotes inside url() optional */

    /* Fonts */
    font-family: Arial;
    /* if the font family name has a space, it must be quoted */
    font-family: "Courier New";
    /* if the first one is not found, the browser uses the next, and so on */
    font-family: "Courier New", Trebuchet, Arial, sans-serif;
}

<!-- உங்கள் css file ஐ  <head>. உள் குறிப்பிட வேண்டும் 
     சரியான முறையை பார்க்க  http://stackoverflow.com/questions/8284365 -->
<link rel='stylesheet' type='text/css' href='path/to/style.css' />

<!-- நீங்கள் css ஐ html உள்ளும் எழுத முடியும் -->
<style>
   a { color: purple; }
</style>

<!-- அல்லது css ஐ நேரடியாக அந்த element இல் எழுத முடியும் -->
<div style="border: 1px solid red;">
</div>

/* A */
p.class1[attr='value']

/* B */
p.class1 { }

/* C */
p.class2 { }

/* D */
p { }

/* E */
p { property: value !important; }

<p style='/*F*/ property:value;' class='class1 class2' attr='value' />

/* அனைத்து டேவிஸ்களுக்கும் பொதுவான விதி */
h1 {
  font-size: 2em;
  color: white;
  background-color: black;
}

/* பிரிண்ட் செய்யும்போது h1 கலர் மாற்ற */
@media print {
  h1 {
    color: black;
    background-color: white;
  }
}

/* 480 பிஸேல்ளுக்கு மேல் சிகிரீன் அளவு உள்ள சாதனத்தில் எழுத்து அளவு மிகை படுத்த   */
@media screen and (min-width: 480px) {
  h1 {
    font-size: 3em;
    font-weight: normal;
  }
}

<head>
  <meta name="viewport" content="width=device-width; initial-scale=1.0">
</head>