תבניות – השלב הבא

בהסבר הקודם על הבוקסות הדגמתי יצירה של שלישיית בוקסות אחת לייד השניה, בדוגמא ההיא השתמשתי ב class ולא באובייקט ממשי ולכן יכולת העיצוב היא יחסית מוגבלת. כל העיצוב למשל ישאב מהרמה העילית – כלומר, מהרמה של post. הטמפלט שנוצר בשלב הקודם אומנם מאפשר ליצור את המסגרת, אבל לא נותן שליטה בתוך התוכן. לצורך כך, נשדרג את ה class לאובייקט מזוהה בעזרת החלפה של פרמטר הנקודה לפרמטר הסולמית.

#tripel { 
	float: right; 
	margin: 5px 5px 0px 0 ; 
	padding:  0 2px ; 
	width: 30%; 
	height: 200px; 
	border: 1px solid green; 
	background: #eeeeee; 
}

עכשיו, כאשר מדובר באובייקט, אנחנו יכולים לטפל בכל אחד מהאספקטים שלו על ידי הוספה של תיאור התנהגות מתאים.

#tripel h2 { 
	margin: 5px 0 0; 
	padding: 0; 
	color: red; 
	} 

#tripel h2 a { 
	color:red; 
	} 
#tripel h2 a:hover { 
	color:green; 
	} 

בדוגמא הזו, הסתפקתי רק בצורת ההתנהגות של כותרת ושל לינק (רגיל ובמעבר עכבר) אך ניתן כמובן להמשיך ולייחס לאובייקט שלל הגדרות נוספות כגון התנהגות תמונה, עיצוב טקסט רגיל ועוד כהנה וכהנה. יצירה של טמפלט שכזה, מאפשרת לנו בקלות יחסית לעדכן עבור ערכת העיצוב את כל המאפיינים של הטמפלט מבלי להזדקק לכניסה אל תוך הקוד ומבלי להיות מושפעים מרמות עיליות.