طراحی سایت و کد نویسی برای یک وب سایت همانند برنامه نویسی شی گرای از قاعده ارث بری پیروی می کند. فرزندان می توانند از والد خود خصوصیات مشخص شده را ارث ببرند. بنابراین در طراحی سایت HTML اگر به تگ پدر خصوصیتی داده شود، فرزند آن، آن خصوصیت را به ارث می برد. به تصویر زیر دقت کنید. <body> پدر تگ هایی می باشد که درون آن تعریف می شوند.
در فایل CSS اگر تعریف زیر را داشته باشید:
تمامی فرزندان تگ <body> مانند تگ های <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <a>, <q> و دیگر تگ هایی که تعریف کنیم از آن تبعیت خواهد کرد.
با تگ <h1>, <h2>, <h3>, <h4>, <h5>, <h6> آشنا شدید؟ تگی که زمان طراحی سایت هدرهایی را در اندازه های مختلف ایجاد می کند و شما را به یک طراحی سایت حرفه ای و سفارشی نزدیکتر می سازد.
به کدهای بالا دقت کنید اگر برای تگ <q> یک خصوصیت دیگر را در فایل CSS مشخص سازیم، چه اتفاقی خواهد افتاد؟ اگر خصوصیتی مجزا برای تگی دیگر مانند تگ <h1> تعریف کنیم. چه روی می دهد؟ فایل CSS زیر را ببینید:
حالا از صفحه وب سایت یک اجرا می گیریم.
در قوانین شی گرایی ساختاری به نام کلاس مطرح است که نوع داده هایی که در خود نگه می دارد را مشخص می کند. می توان در طراحی سایت با HTML نیز برای تگ ها کلاس تعریف کرد و کلاس های مختلفی به هر تگ داد. فرض کنید 10 پاراراف دارید. برای سه پاراگراف اول رنگ قرمز، برای سه پاراگراف دوم رنگ سبز و برای چهار پاراگراف بعدی رنگ آبی را در نظر دارید. بهترین و سریعترین و حرفه ای ترین کار تعریف کلاس برای این تقسیم بندی می باشد. به هر دسته یک کلاس مشخص دهید و سپس در فایل CSS برای هر کلاس رنگ مورد نظر را تعریف کنید.
حال در فایل CSS به شکل زیر برای کلاس هر تگ <p> رنگ مورد نظر را تعریف می کنیم:
اجرای به صورت زیر خواهد بود.
برای CSS ویژگی های بسیاری وجود دارد که با آن ها درآموزش های بعدی طراحی سایت بیشتر آشنا خواهیم شد.