Flash يا XHTML؟!!

در راستاي تغييرات جديد GMail، به سايت Matthew Paul، طراح يكي از تمهاي گوگل (Gmail، iGoogle و ...) سر زدم!

خوب! با نگاه اول به اين سايت، مي توان حدس زد كه در حبابهاي در حال حركت، در مربع سمت راست، ازقالب گرافيكي فلش استفاده شده است. اين حبابها، همراه با پس زمينه تاريك سايت و رنگهاي ديگري كه استفاده شده اند، اعماق اقيانوس را در ذهن بيننده تداعي مي كنند. با آنكه طراحش مي توانست در بقيه قسمتها از عناصر html استفاده كند، اما نه تنها منوي سمت چپ، بلكه ستون مياني كه ديناميك هست (يعني مطالبش - مانند وبلاگها - قابل آپديت شدن است!) نيز در قالب فلش آمده است؛ اين سايت، يك سايت تمام فلش است!

تنها دليلي كه براي آن به نظرم مي رسد اين است كه طراح خواسته حس بصري سايتش را حفظ كند! مثلاً حالت تدريجي در لود و آنلود شدن مطالب و صفحات سايت و حالت پرشدن ميله اي در منوي كناري و استفاده نكردن از اسكرول بار در قاب ميان صفحه!

نكته ي جالبتر ديگري هم وجود دارد كه من در جاي ديگري نديده بودم. شايد شما مطالب آن را بخوانيد و لينكهايش را باز كنيد اما متوجه فلش بودنش نشويد! چرا؟!... چون در منويي كه بر روي لينكها باز مي كنيد همانند لينك در صفحات معمولي گزينه هاي Open و Open in new window را خواهيد ديد!

به نظرم سايت كوچك و با نكته هاي ظريفي بود...
... يا من اينقدر حساس شدم؟!

HTML تگهایی که بلاگرها باید بدانند! (1)

اگر مدت زیادی باشد که وبلاگ می‌نویسید، حتماً مواردی پیش آمده است که برای برطرف کردن مشکلتان در قالب و یا پست، به دنبال راه حل HTML آن بگردید و برای رفع مشکل از تگها یا کدهای HTML استفاده کنید. اگر هم مدت کمی باشد که وبلاگ می‌نویسید، با این مشکلات برخورد خواهید کرد. اگر هم به هرآنچه هست، راضی باشید و اهل کنجکاوی نباشید و حساسیتی به نوع نمایش پستتان نداشته باشید هم که نیازی به دانستن این‌ها نخواهید داشت!

معمولاً ادیتورهای سرویس‌دهنده‌های وبلاگ، سه قسمت دارند:

1. قسمتی که معمولاً به طور پیش‌فرض باز می‌شود، ادیتوری است که امکانات اصلی ویرایش متن از قبیل راست‌چین، چپ‌چین، متن توپر و کج و قراردادن تصویر و ... در آن وجود دارد و نیازی به دانستن HTML نیست. اما اگر بخواهید کارهای خاصی در پستتان انجام دهید...
2. قسمت دومی در ادیتور وجود دارد که می‌توانید کدهای HTML مربوط به پستتان را در آن ببینید. اگر قصد استفاده از کدهایی که در ادامه می‌آید را دارید، باید آنها را در جای مناسب و در این قسمت از ادیتور وارد کنید.
   
3. قسمت سوم، امکان پیش‌نمایش(Preview) پستتان را به شما می‌دهد.

در برخی از ادیتورهای کامنت، مثل وردپرس و بلاگر، اجازه‌ی استفاده از برخی تگهای HTML داده شده است؛ مثلاً بدون دانستن این تگها، در نوشتن کامنت در بلاگر، نمی‌توانید برای یک عبارت، لینک بگذارید و آن را توپر(Bold) یا کج(Italic) کنید.
در این پست تعدادی از تگهای پرکاربرد در وبلاگ‌نویسی را با توضیحات آن، آورده‌ام.

یادآوری: تگهای HTML دو گونه‌اند:
نوع اول. که تگهای دوتایی هستند و ابتدا و انتها دارند. تگ انتهایی با علامت / بسته می‌شود. مانند: <a> در ابتدا، و <a/> که در انتها قرار می‌گیرد و تگ لینک را می‌سازند.
نوع دوم. که تگهای تنها هستند مانند تگ <img> (برای قراردادن تصاویر).



چگونه لینک بگذارم؟!

تعجب نکنید! در حالت عادی، ادیتورها، متنی را که انتخاب کرده‌اید، با آدرسی که به آن می‌دهید، لینک می‌کنند، اما غیر از این، لینکها خصوصیات جالب‌تری هم دارند. تگ HTML ٍ یک لینک به طور معمول، به صورت زیر است:

<a href="http://www.google.com/">Google</a>

نتیجه:
Google

که در کد بالا، روبروی href (مخفف hypertext refrence)، نشانی صفحه یا فایل خاصی قرار می‌گیرد که کلمه Google را به آن صفحه یا فایل مرتبط می‌کند.
اما خصوصیات دیگر تگ <a>:
به نظر من، مفیدترین خصوصیت جالب تگ <a>، خصوصیت title آن است. حتماً عکسهایی را دیده‌اید که وقتی موس را بر روی آن قرار می‌دهید، متنی بر روی آن ظاهر می‌شود... خوب! چنین امکانی برای لینکهای متنی نیز وجود دارد، اگرچه بسیار کم دیده‌ام که کسی از این خصوصیت استفاده کند. نمونه زیر را ببینید:

<a href="http://mail.yahoo.com/" title="Unlimited Storage with 100 Megabyte Attachements!">Yahoo! Mail</a>

نتیجه:
Yahoo! Mail

به قول Jackob Nielsen از w3c، یکی از بزرگترین مشکلاتی که در وب وجود دارد این است که کاربران نمی‌دانند به کجا می‌روند! با استفاده از Title، می‌توانید اطلاعاتی در مورد صفحه‌ای که آن مراجعه می‌شود، بدهید. آقای Nielsen می گوید بهتر است که در موارد زیر از خصوصیت Title استفاده کنید:

نام سایت که به آن لینک می‌دهید (اگر با عبارتی غیر از آن و به سایت اصلی لینک می‌دهید)؛
نام زیرمجموعه سایت (اگر به آدرس قسمتی از یک سایت لینک می دهید)؛
نوع اطلاعاتی که کاربر در صفحه‌ی مورد نظر به آن دسترسی پیدا می‌کند؛
عبارات آگاهی‌دهنده؛ مثلاً در مواقعی که نیاز به ثبت نام برای استفاده از آن سایت یا دسترسی به صفحه‌ی موردنظر است.
در مورد همه‌ی لینکها از title استفاده نکنید!

خصوصیت دیگر این تگ، خصوصیت Target است، یعنی صفحه چگونه باز شود؛ متوجه نشدید؟! الان توضیح می‌دهم. فرض کنید شما تعداد زیادی لینک در پستتان دارید و یا به سایتی لینک می‌دهید، اما نمی‌خواهید در صورت کلیک کاربر، لینک در همین صفحه باز شود، یعنی می‌خواهید لینک در صفحه جداگانه‌ای باز شود! در این صورت از Target استفاده می‌کنیم:

<a href="http://mail.google.com/mail/" title="Unlimited Storage with 100 Megabyte Attachements!" target="_blank" >GMail</a>

نتیجه:
GMail

به جای blank_، گزینه‌های دیگری نیز وجود دارند که کاربردشان، بیشتر در قابها است و به توضیح آنها نمی‌پردازم.

نکته: در صورتی که می خواهید تمامی لینک‌های صفحه، در صفحه جدید باز شود، در بین تگ <head> صفحه‌تان، کد زیر را قرار دهید:
<base target="_blank">




چگونه تصویر بگذارم؟!

تعجب کردید؟!... در مورد استفاده از تصاویر هم، نکاتی وجود دارد که با ادیتور برخی وبلاگها، امکان استفاده از آن وجود ندارد! برای استفاده از تصاویر شما از تگ <img> استفاده می‌کنید. به صورت زیر:

<img src="http://www.divshare.com/img/3146850-85f.gif">

نتیجه:


که در روبروی src (مخفف Source)، آدرس عکس قرار می‌گیرد. تمام این کد، برای نمایش عکس موردنظرتان کافی است، اما...
1. در صورتی که عکستان لود نشود (به دلیل تنظیم مرورگر و ...) چه؟! آنگاه خصوصیت alt (مخفف Alternative Text) تصویر، کمکتان می‌کند تا متنی را به جای عکس نشان دهید.

<img src="http://www.divshare.com/img/3146850-85f.gif" alt="Google">

نتیجه(آدرس را اشتباه دادم تا لود نشود!):


2. تگ <img> هم خصوصیتی به نام Title دارد که برای اضافه کردن توضیح به عکس بهتر است از این خصوصیت استفاده کنید.
نکته: Firefox از alt، تنها زمانی استفاده می‌کند که عکس لود نشود و برای توضیح عکس تنها به خصوصیت title تگ، نگاه می‌کند، اما در اینترنت اکسپلورر، در جایی که title استفاده نشده باشد، از متن مربوط به alt، برای نمایش توضیح تصویر استفاده می‌شود.
کاربرد آن به صورت زیر است:

<img src="http://www.divshare.com/img/3146850-85f.gif" alt="Google" title="Put this logo into your sidebar and support Google!">

نتیجه:



ادامه دارد...

Roundpic؛ گوشه‌های گرد عکس

به نظر من، در وب، پس از متن، عکس، اهمیت فوق‌العاده‌ و با کاربری قوی -و در بعضی اوقات حتی قوی‌تر از متن- دارد. هرچقدر که بخواهید از کاربرد عکس دوری کنید(به هر دلیل)، باز هم در بسیاری از مواقع، به کارگیری یک عکس کوچک و مناسب، به تفهیم و مفیدبودن مطلب شما کمک خواهد کرد.

ادیتورهای آنلاین متعددی برای عکس‌ها وجود دارد که هر کدام ویژگی‌های مختلفی دارند و اعمال خاصی را انجام می‌دهند. Roundpic یکی از آنها است که همانطور که از نامش پیداست، گوشه‌های عکستان را به حالت گرد در می‌آورد.
همه‌چیز، بسیار ساده است! عکستان را از روی کامپیوتر و یا آدرسی در وب، انتخاب می‌کنید و Round it را می‌فشارید.

در صفحه بعد، با پیش فرض‌های موجود، گوشه‌های عکستان گرد شده است. در این صفحه می‌توانید میزان انحنا و رنگ پس زمینه(در گوشه‌ها) را تغییر دهید و تغییراتتان را دوباره اعمال کنید.
گوشه‌های گرد در عکس‌ها، در بسیاری از سایت‌های وب 2.0، کاربرد یافته است.

شبیه سازی آیکون Feed با استفاده از CSS!

حتما در بسیاری از وبلاگها و وبسایتها، آیکون های کوچک نارنجی و مستطیلی شکلی که نشان دهنده آدرس خروجی فید RSS یا XML آنها هستند را دیده اید. معمولاً در این مواقع از آیکونهای(عکسها) کوچک با فرمت GIF یا PNG استفاده می شود. بدون استفاده از عکس هم می توان این نشانگرهای کوچک را ساخت:
با استفاده از CSS!
در مورد عکسها این امکان وجود دارد که گاهی اوقات لود نشوند، اما در مورد CSS معمولاً اینطور نیست. ضمن اینکه حجم عکسها معمولاً چند برابر کدی است که اینجا می نویسیم، ضمن اینکه ساختن این قبیل آیکونها با CSS هم تفریح جالبی است!
در این پست می خواهیم با استفاده از CSS و با نوشتن مقداری کد، این آیکونهای کوچک را شبیه سازی می کنیم!

1. ابتدا لازم است که بدانیم که رنگ و فونت مناسب برای قسمتهای مختلف این آیکون CSS (!)، چیست. خوب! اگر یکی از این آیکونها را در برنامه ای مثل فتوشاپ کالبد شکافی کنیم، می توانیم به تمام خصوصیات موردنظرمان پی ببریم.
2. کلاسی که برای آن انتخاب میکنم feed است، بنابراین در جایی که می خواهید این آیکون را استفاده کنید، باید از این کلاس استفاده کنید (توجه کنید که از div استفاده نکردم).
   برای استفاده از آن، باید از کدی به صورت زیر استفاده کنید:
   <a href="http://yourblog.serverblog.com/rss/" class="feed">rss</a>
   مشخصاتی را که در مرحله قبلی به دست آوردیم، با CSS می نویسیم:
   .feed {
color:#FFF;
background-color:#F60;
}
   نتیجه:
   rss
   


3. فونتی که برایش استفاده کردم، Verdana است که جزء فونتهای موجود در تمام سیستم هاست و معمولاً در این آیکونها هم استفاده می شود. نوشته مربوطه، باید Bold (تو پر) باشد. اندازه متن را 10px در نظر می گیرم. برای اینکه حروف، به صورت حروف بزرگ دربیاید خاصیت text-transform را uppercase قرار می دهیم. بنابراین تا اینجا، کد CSS ما به صورت زیر در می آید:
   .feed {
color:#FFF;
background-color:#F60;
font-family: verdana,sans-serif;
font-style:bold;
font-size: 10px;
text-transform: uppercase;
}
   نتیجه:
   rss
   


4. خوب! بهتر نیست که نوشته ما از داخل (فاصله نوشته با حاشیه) و خارج (فاصله آیکون ما با آیکونها یا نوشته های احتمالی اطرافش) کمی فاصله داشته باشد؟!... برای اینکار از خصوصیات margin و padding استفاده می کنیم:
   .feed {
color:#FFF;
background-color:#F60;
font-family: verdana,sans-serif;
font-style:bold;
font-size: 10px;
text-transform: uppercase;
margin:3px;
padding:0 3px;
}
   نتیجه:
   rss
   
   اینطوری بهتر نشد؟!


5. برای نشان دادن حالت برجستگی آیکون (سایه روشن اطراف آیکون)، از رنگهای مختلفی -که در مرحله اول به دست آورده ایم- برای Border استفاده می کنیم.
   .feed {
color:#FFF;
background-color:#F60;
font-family: verdana,sans-serif;
font-style:bold;
font-size: 10px;
text-transform: uppercase;
margin:3px;
padding:0 3px;
border:1px solid;
border-color:#FC9 #630 #330 #F96;
}
   نتیجه:
   rss
   
   خاصیت border-color، رنگ حاشیه را به ترتیب در قسمت بالا، راست، پایین و چپ (به صورت ساعتگرد) مشخص می کند. اندازه حاشیه را 1px و به صورت خط (solid) در نظر گرفتیم (توجه: همانطور که می دانید خطور حاشیه می تواند به صورتهای مختلفی مثل نقطه چین/dotted، خط چین/dashed و ... باشد).
   


6. فکر می کنم دیگه کار آیکون ما تمام شده است... جز اینکه: از آنجا که آیکون ما در واقع یک لینک است، بنابراین از دستورات مربط به لینکها (مثل زیرخط دار بودن و ...) پیروی می کند. برای اینکه از این کار جلوگیری کنیم تنها کافی است که خصوصیت text-decoration آن را none قرار دهیم. بنابراین کد نهایی ما به صورت زیر در خواهد آمد:
   .feed {
color:#FFF;
background-color:#F60;
font-family: verdana,sans-serif;
font-style:bold;
font-size: 10px;
text-transform: uppercase;
margin:3px;
padding:0 3px;
border:1px solid;
border-color:#FC9 #630 #330 #F96;
text-decoration:none;
}
   نتیجه:
   RSS
   


7. چیز دیگری هم مانده است؟... با تمام دستورات بالا، آیکون مورد نظر ما به خوبی در تمام مرورگرها نشان داده می شوند. اما هدف ما، فقط این نیست!
   یک طراحی خوب، طرحی است که علاوه بر ظاهر، کدنویسی بهینه ای هم داشته باشد. یعنی چی؟... بگذارید یک مثال بزنم. کدی که ما در چند خط برای نمایش نام و حالت فونت نوشتیم را می توان در یک خط هم نوشت به این صورت:
   font:bold 10px verdana,sans-serif bold;
   چنین کاری، هنگامی اثر واقعی خود را نشان می دهد که تمامی Style خود را بهینه کنید. وب سایتهایی مثل Clean CSS این کار را برایتان انجام می دهند.
   کد بهینه شده بالا به صورت زیر است:
   .feed {
color:#FFF;
background-color:#F60;
font:bold 10px verdana,sans-serif bold;
text-transform:uppercase;
border:1px solid;
text-decoration:none;
border-color:#FC9 #630 #330 #F96;
margin:3px;
padding:0 3px;
}
   
   و نتیجه نهایی:
   RSS
   

حالا احتمالاً تشخیص اینکه کدام آیکون، عکس و کدام آیکون، آیکونی هست که باهم (با کمک CSS!) ساختیم کمی سخت است؛ اینطور نیست؟!

rss 2 XML RSS

طریقه گذاشتن FavIcon برای صفحات وب

حتماً تا به حال هنگام بازدید از بسیاری از سایتها و وبلاگها، متوجه آیکون کوچکی (معروف به FavIcon) که در کنار آدرس سایت، در addressbar، قرار می گیرد، شدید. بلاگر و ... به طور پیش فرض از آیکون خودشان که - معمولاً لوگوی آنهاست - به عنوان Favourite Icon استفاده می کنند، اما می توان این آیکون را تغییر داد. کافی است کد زیر را در قالبتان، در جایی بین <head> و <head/> قرار دهید و به جای آدرس آن، آدرس آیکون مورد نظر خودتان را وارد کنید.

<link href="http://www.yourhost.com/favicon.png" rel="shortcut icon">

همانطور که می بینید، آیکونی که در آدرس بالا استفاده کردیم، دارای فرمت png است. آیکونهای با فرمت png توسط مرورگر Internet Explorer 6 و قبل از آن، نمایش داده نمی شود، اما در مرورگرهای اپرا و فایرفاکس (تا آنجایی که من می بینم!) مشکلی ندارند. اما اگر حساسیت زیادی به این مساله دارید، می توانید با برنامه هایی مثل IconArt و IconShop و ... آیکون مورد نظر خودتان را بسازید.

برای به دست آوردن آیکونی با فرمت png می توانید عکس موردنظر (سعی کنید کوچک باشد؛ مثل لوگو یا عکس کوچک شده خودتان!) را در برنامه ACDSee، باز کنید و از منوی Modify و Convert File Format، فرمت فایلتان را به png تغییر دهید.

آیا من نمی توانم از فرمت دیگری استفاده کنم؟!
چرا! شما می توانید از فرمتهای دیگری مثل gif هم استفاده کنید!
با کمی جستجو، می توانید آیکونهای زیبایی برای صفحه وب خودتان بیابید.

All about CSS

خوب! همين الان يك وبلاگ در مورد آموزش CSS عزيز!!! پيدا كردم كه مجموعه مقالات فارسي كه در مورد CSS موجود هست رو جمع آوري كرده و براي كساني كه دنبال يادگيري CSS و طراحي وب هستن فوق العاده مفيده!
دست آقا افشين عزيز هم درد نكنه كه كار ما رو راحت كردن!

وبلاگ: All about CSS

اچ.تی.ام.ال، سی.اس.اس و طراحی وب

از این پست به بعد، هر از چند گاهی (گفتم گاهي!) نکات و درسهایی درباره CSS می نویسم؛ فكر مي كنم كم بهش پرداخته شده. از ابتدا و پایه شروع مي کنيم و پله پله پیش ميريم تا به نکات پیشرفته ی CSS برسیم.

بد نیست که در ابتدا با مقدمه ای درباره CSS و دلیل به وجودآمدن و فواید استفاده از آن شروع کنیم و اینکه اصلاً CSS چيه؟!!

اصلاً CSS چیست؟

CSS مخفف عبارت Cascading Style Sheets (شیوه نامه آبشاری؛ دلیل آبشاری بودنش به نوع متداول نوشتن کدها برمی گردد که در درسهای بعدی خواهیم دید!) است و وظیفه ی آن، چگونگی نمایش کدها و تگهای HTML هستند. استایلها در حالت عادی در برگه های استایل (Style Sheets) نوشته می شوند. این برگه ها معمولاً(و نه همیشه!) در فایلهای جداگانه ای با فرمت css. ذخیره می شوند. برگه های استایل (که به آنها «شیوه نامه» هم گفته می شود) از HTML 4.0 به این زبان اضافه شدند. مفیدترین خاصیت استفاده از استایلها صرفه جویی در وقت است! برای مثال شما یک وب سایت را در نظر بگیرید که از 100 صفحه ی مختلف تشکیل شده است. شما می توانید رنگ لینکها و نوشته ها و پس زمینه و فونت و اندازه ی آنها و ... را در هر کدام از این صفحات و به طور جداگانه تصحیح کنید، اما اگر بدانید که تنها با تعریف یک فایل CSS و لینک کردن صفحات به این فایل می توانید تنها با ویرایش این استایل، تاثیر آن را در تمام 100 صفحه ببینید، از کدام روش استفاده می کنید؟!
علاوه بر خصوصیت بالا، همچنین می توان برای چند جزء (مثلا فونت و رنگ ستون اصلی و ستون کناری) از یک کد استفاده کرد.

استفاده از CSS برای حل یک مشکل بزرگ!!!

HTML مخفف عبارت Hyper Text Mark-up Language است که اصولاً تگهای (Tags یا همان دستورات زبان HTML) مختلف این زبان برای تعریف محتویات یک صفحه به وجود آمدند. ساختار کلی یک سند HTML به صورت زیر است:

به تگهای head، body و html دقت کنید!
درون تگ head، معمولاً متاتگها که برای توضیح خصوصیات کلی صفحه از قبیل زبان و انکود صفحه و البته توضیحات و اطلاعاتی که برای موتورهای جستجو مفید است و همچنین عنوان صفحه قرار می گیرند. یکی از محلهایی که میتوان استایلها را در آن جای داد همین جاست!
آنچه شما از یک صفحه وب می بینید، آن محتویاتی است که درون تگ body قرار گرفته است! (توجه: مواظب باشید در شکل بالا تگ body را با خصوصیاتی که برای این تگ در css تعریف شده است، اشتباه نگیرید!)

برای مثال برای اینکه به برازر (Browser مثل اینترنت اکسپلورر یا اپرا و ...) بفهمانند که این جمله، یک تیتر است یا یک پاراگراف است و یا درون یک جدول است، دستورات (اول کلمه ی header؛ 1 نشان دهنده ی بزرگترین عنوان است) یا (اول کلمه پاراگراف) یا (به معنی جدول) و ... به وجود آمدند (همانطور که متوجه شدید اغلب(و نه همه!) تگهای HTML درون علامتهای<> قرار می گیرند و با بسته می شوند).

اینترنت اکسپلورر و نت اسکیپ (Netscape) - به عنوان دو پرچمدار برازرها - تگهای HTML مختلف زیادی را به این زبان اضافه کردند (مانند تگ ) که به تدریج باعث مشکل شدن تشخیص ساختار صفحات وب از محتوای آنها می شد. این واقعاً تبدیل به یک مشکل بزرگ شده بود!
برای حل این مشکل، W3C یا کنسرسیوم وب گستر جهانی (نترسید!!! منظورم همان World Wide Web یا www خودمان است!) که کار بررسی و تصویب استانداردهای HTML و زبانهای تحت وب را بر عهده دارد، استایلها را به HTML 4.0 اضافه کردند. در حالی که در HTML 4.0 می توانستیم به نحوه ی نمایش اغلب اجزاء HTML بپردازیم، در HTML 3.2 تنها فونت ها و رنگها قابل ویرایش بودند.
نسخه های Netscape 4.0 و Internet Explorer 4.0 هم دیگر از این شیوه نامه های آبشاری پشتیبانی می کردند.


استفاده از CSS مساوی است با صرفه جویی در وقت

همانطور که پیش از این گفتم، استایلها را میتوانیم در فایلی جداگانه قرار دهیم و با اتصال تمام صفحات یک سایت به همان یک استایل، خصوصیات اجزای مختلف صفحات را کنترل کنیم. این برای طراحان و گسترش دهندگان وب، فوق العاده بود، چرا که تنها با ویرایش یک فایل می توانستند خصوصیات و ساختار همه ی صفحات یک سایت را کنترل کنند. این موضوع، وقتی اهمیت بیشتری می یابد که شما صاحب یک وب سایت بزرگ باشید!

خوب! فکر می کنم تا اینجا تا حدودی با HTML و CSS و اهمیت CSS آشنا شدید. با یک سوال بحث را ادامه می دهیم.

هنگامی که چند استایل برای یک عنصر معین شود، از کدام استایل استفاده خواهد شد؟

خوب! به طور کلی استایلها به طور اولویت بندی شده در زیر می توانند مورد استفاده قرار گیرند (به ترتیب افزایش اولویت):

1. پیش فرض و تعیین شده توسط برازر (مثلا اگر هیچ رنگی برای یک لینک تعیین نکنید، اغلب برازرها لینک را با رنگ قرمز نشان می دهند)؛
2. استایل های بیرونی که به صفحه مرتبط هستند؛
3. استایلهای درونی (درون تگ استفاده می شوند؛ اغلب به دلیل دسترسی آسانتر به کد استایل، این روش در قالبهای وبلاگ ها استفاده می شود)؛
4. استایلهای داخل تگ یا درون خطی.

بنابراین استایلی که داخل تگهای html و به صورت مستقیم تعریف می شود بر بقیه ی انواع ارجحیت دارد.

تا اینجا، یک دید نسبتاً کلی نسبت به CSS پیدا کردیم. در پستهای بعدی، به یادگیری دستورات CSS می پردازیم و شروع به نوشتن استایل می کنیم.