media@

 @media screen and (max-width: 960px) { }

تگ media@ فقط به شما اجازه نمیده که بطور مشخص استایل دهی رو برای صفحه ی وب انجام بدید, امروزه کوئری های media همراه ساخت صفحات واکنش گرا یا طراحی وبسایت بر اساس شرایط دستگاه مورد استفاده, هستند. با استفاده از کوئری media به همراه پراپرتی هایی مثل min-width شما میتونید عناصر صفحه ی وب رو به شکل بهتری و با توجه به شرایط موجود به نمایش کاربر در بیارید.

background-size

 body { background: url(image.jpg) no-repeat; background-size: 100%; }

یک پراپرتی فوق العاده از CSS3 هست که با پشتیبانی مرورگرهای معروف, گسترش پیدا کرده. اوایل استفاده از بک گراند ها با سایز مورد نظر و در مکان دلخواه بسیار سخت و شایدم غیرممکن بود اما امروزه با استفاده از یک خط کد میشه سایز بک گراند رو عوض کرد و به شکل دلخواه درآورد. با بهره بردن از این نکته میتونید بک گراند های تمام قد با افکت های تصویری بسازید.

font-face@

 @font-face { font-family: Blackout; src: url("assests/blackout.ttf") format("truetype"); }

یکی از پراپرتی های CSS3 که درسال های اخیر باعث اتفاقات جذابی در بخش طراحی وب شده, font-face@ هست. این گزینه به شما امکان میده هر فونتی که مد نظرتون هست رو به راحتی با فرمت های مختلف و تنظیمات دلخواه در هر بخش از کد CSS استفاده کنید. از font-face@ استفاده کنید و از بین چندین هزار فونت رایگان, دلخواه تان را در صفحه ی وب قرار دهید. برای اینکار میتونید از سرویس هایی مثل Google Webfonts یا Typekit هم استفاده کنید.

;margin: 0 auto

 #container { margin: 0 auto; }

تعریف margin: 0 auto یکی از نکات اولیه ای هست که شما باید برای سر و کله زدن با CSS بدانید. این شگفت انگیزه که هیچ تعریف خاصی برای وسط چین کردن یک عنصر به تعاریف css اضافه نشده. اما برای اینکار میتونید کد margin : 0 auto رو به عنصر مورد نظرتون اضافه کنید و اون رو در بلاک موجود وسط چین کنید.

overflow:hidden

 .container { overflow: hidden; }

راه های زیادی برای پاک کردن float ها وجود داره, اما یکی از بهترین و ساده ترین راه ها برای پاک کردن float ها, استفاده از overflow: hidden در container عنصری که float شده هست. این کد بار اضافی به استایل شما اضافه نمیکنه و در 90 درصد مواقع بدرستی کار می کنه.

clearfix.

 .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

برای مواقعی که overflow: hidden کار نمیکنه, بهترین جایگزین استفاده از تکنیک clearfix هست. به یاد داشته باشید حتما نباید از نام کلاس clearfix استفاده کنید, فقط کافیه کد بالا رو در یکی از عناصر html مورد نظر اعمال کنید.

;()color:rgba

 .btn { color: rgba(0,0,0,0.5); }

تصاویر PNG معمولا برای ساخت افکت های transparency در طراحی وب استفاده می شوند, اما یکی از قابلیت های مهم CSS یعنی حالت رنگ RGBa باعث شده قابلیت transparency به راحتی وارد CSS بشه. استفاده از RGBa به جای مقدار hex به شما اجازه میده یک رنگ رو با استفاده از کانال های قرمز, سبز و آبی انتخاب کنید و به راحتی میزان تاری یا opacity رنگ رو مشخص کنید, مثلا از 0.5 برای 50% opacity استفاده میشه.

[input["type="text

 input[type="text"] { width: 200px; }

استفاده از سلکتورهایی مثل این یا حتی پیشرفته تر از این باعث می شوند میزان مهارت CSS شما از متوسط به حرفه ای رشد کنه. سلکتورهای attribute ها برای استایل دهی عناصر بدون نیاز به کلاس های اضافی, مفید هستند. 

(transform:rotate;(30deg

 .title { transform: rotate(30deg); }

اگرچه پراپرتی transform در پروژه های معمول استفاده خاصی ندارند. اما قابلیت دستکاری کردن عناصر html بدون کد جاوا اسکریپت بسیار جذاب هست. استفاده ی ترکیبی از این قابلیت میتونه برای وبسایت شما افکت های جدیدی رو خلق کنه.

{a{outline:none

 a {outline: none;} 

در طراحی سایت هیچ چیزی نمیتونه به اندازه ی طرح نقطه گذاری دور یک لینک وقتی روش کلیک می کنید, قدیمی باشه. کد بالا این نقطه گذاری رو حذف میکنه. فراموش نکنید در قسمت focus: لینک هم این کد رو قرار بدید.