עד עכשיו, כל ה- CSS שכתבנו היה בקובץ עצמאי עם סיומת CSS, שהתקיים במקביל לקובץ ה- HTML. זוהי הדרך המומלצת לכתוב CSS ובעיקר בה נשתמש, אך יש גם אפשרות לכתוב עיצוב של אלמנטים HTML-יים בתוך קובץ ה- HTML עצמו.

בואו נתחיל מקוד ה- HTML הבא (למען התמציתיות, אני אכתוב את ה- body בלבד):

<body>
    <h1>This is the heading!</h1>
    <p>This is the content of the page</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus natus</p>
</body>

הוספת עיצוב כ- attribute ל- HTML

כעת, נוסיף עיצוב לפסקה הראשונה. אבל הפעם, לא נגדיר עיצוב לכל האלמנטים מסוג p, וגם לא נשייך את הפסקה למחלקה או נגדיר לה id. הפעם ניתן עיצוב לפסקה ישירות מקוד ה- HTML. כדי לעשות זאת, נשתמש ב- attribute שנקרא style:

<body>
    <h1>This is the heading!</h1>
    <p style="color: blue;">This is the content of the page</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus natus</p>
</body>

שימו לב שהערך של ה- attribute זהה לתוכן שכתבנו בפוסט הקודם בקובץ ה- CSS. יכולנו גם לכתוב כמה תכונות עבור ה- style בזו אחר זו, על ידי הפרדתן בנקודה פסיק (;).
כתיבה של עיצוב באופן כזה, ישירות בקוד ה- HTML, נקראת inline styling.

אפשר לומר ש- inline styling הוא האופן הספציפי ביותר להשתמש ב- CSS, כיוון שאנו כותבים את העיצוב באופן ישיר, כחלק מקוד ה- HTML עצמו. זה מאפשר, כמובן, לתת לכל אלמנט עיצוב משלו. כדוגמה, נצבע את הטקסט של הפסקה הראשונה בכחול ושל הפסקה שאחריה, באדום: