DW-Cascading Style Sheets Orientation

Cascading Style Sheets Orientation

Web Design

Contents

01

04

Attaching styles to the HTML document

The benefits and power of Cascading Style Sheets (CSS)

02

05

How HTML markup creates a document structure

The big CSS concepts of inheritance, the cascade, specificity, rule order, and the box model

03

Writing CSS style rules

Cascading Style Sheets Orientation

The Benefits of CSS

• Precise type and layout controls. You can achieve print-like precision using CSS. There is even a set of properties aimed specifically at the printed page
• Less work. You can change the appearance of an entire site by editing one style sheet.
• More accessible sites. When all matters of presentation are handled by CSS, you can mark up your content meaningfully, making it more accessible for non-visual or mobile devices
• Reliable browser support. Every browser in current use supports CSS Level 2 and many cool parts of CSS Level 3.

Cascading Style Sheets Orientation

How Style Sheets Work

Write style rules for how you’d like certain elements to look.

Attach the style rules to the document. When the browser displays thedocument, it follows your rules for rendering elements

Start with a document that has been marked up in HTML.

Cascading Style Sheets Orientation

Style sheet terdiri dari satu atau lebih instruksi styleyang menjelaskan bagaimana elemen atau kelompok elemen harus ditampilkan. Langkah pertama dalam mempelajari CSS adalah membiasakan diri dengan bagian-bagian dari sebuah aturan. Setiap aturan memilih elemen dan mendeklarasikan tampilannya

Writing the rules

Contoh berikut berisi dua aturan. Yang pertama membuat semua elemen h1 dalam dokumen menjadi hijau; yang kedua menentukan bahwa paragraf harus dalam font sans-serif kecil.

Dalam terminologi CSS, dua bagian utama dari aturan adalah selector yang mengidentifikasi elemen atau elemen yang akan terpengaruh, dan deklarasi yang menyediakan instruksi rendering. Deklarasi, pada gilirannya, terdiri dari properti (seperti warna) dan nilainya (hijau), dipisahkan oleh titik dua dan spasi.

Note

Secara teknis, titik koma tidak diperlukan setelah deklarasi terakhir di blok, tetapi disarankan agar Anda membiasakan diri untuk selalu mengakhiri deklarasi dengan titik koma. Itu akan membuat menambahkan deklarasi ke aturan nanti menjadi lebih mudah

How Style Sheets Work

Declarations

Declaration terdiri dari pasangan properti/nilai. Bisa ada lebih dari satu deklarasi dalam satu aturan; misalnya, aturan untuk elemen p yang ditunjukkan sebelumnya dalam contoh kode memiliki properti font-size dan font-family. Setiap deklarasi harus diakhiri dengan titik koma untuk memisahkannya dari deklarasi berikut. Jika Anda menghilangkan titik koma, deklarasi dan yang mengikutinya akan diabaikan. Tanda kurung kurawal dan deklarasi yang dikandungnya sering disebut sebagai declaration block

Selectors

Dalam contoh style sheet kecil sebelumnya, elemen h1 dan p digunakan sebagai selectors. Ini disebut pemilih tipe elemen, dan ini adalah tipe pemilih paling dasar. Properti yang ditentukan untuk setiap aturan akan berlaku untuk setiap elemen h1 dan p dalam dokumen, masing-masing.

Writing the rules

Attaching the styles to the document

External style sheets

Embedded style sheets

Dokumen teks saja yang terpisah yang berisi sejumlah aturan style. harus diberi nama dengan akhiran .css. Dokumen kemudian ditautkan ke atau diimpor ke satu atau lebih dokumen HTML. Dengan cara ini, semua file di situs web dapat berbagi lembar gaya yang sama. Ini adalah metode yang paling kuat dan disukai untuk melampirkan lembar gaya ke konten.

Ditempatkan dalam dokumen menggunakan elemen gaya, dan aturannya hanya berlaku untuk dokumen itu. Elemen gaya harus ditempatkan di kepala dokumen.

How Style Sheets Work

Attaching the styles to the document (2)

Inline styles

Inline styles hanya berlaku untuk elemen tertentu tempat gaya itu muncul. Gaya inline harus dihindari, kecuali jika benar-benar diperlukan untuk override style dari stylesheet yang disematkan atau eksternal. hal ini juga membuat lebih sulit untuk melakukan perubahan karena setiap atribut gaya harus diburu di sumbernya.

Anda dapat menerapkan properti dan nilai ke satu elemen menggunakan atribut style di elemen itu sendiri, seperti yang ditunjukkan di sini: <h1 style="color: red">Introduction</h1> Untuk menambahkan beberapa properti, pisahkan saja dengan titik koma, seperti ini: <h1 style="color: red; margin-top: 2em" >Pengantar</h1>

How Style Sheets Work

The Big Concepts

Cascading Style Sheets Orientation

Inheritance

Seperti orang tua mewariskan ciri-ciri kepada anak-anak mereka, styled HTML elements mewariskan properti gaya tertentu ke elemen yang dikandungnya. Pada contoh sebelumnya, ketika kita menata elemen dalam font kecil sans-serif, elemen em di paragraf kedua menjadi kecil dan juga sans-serif, meskipun kita tidak menulis aturan untuk secara khusus. Itu karena ia mewarisi gaya dari paragraf tempat ia berada.

The Big Concepts

Document structure

Di sinilah pemahaman tentang struktur dokumen menjadi penting. Dokumen HTML memiliki struktur atau hierarki implisit. Misalnya, artikel contoh yang telah kita mainkan memiliki elemen root html yang berisi kepala dan badan, dan badan berisi elemen judul dan paragraf. Beberapa paragraf, pada gilirannya, mengandung elemen sebaris seperti gambar (img) dan emphasized text (em). Anda dapat memvisualisasikan struktur sebagai pohon terbalik, bercabang dari akar, seperti yang ditunjukkan pada Gambar 11-6

Inheritance

Parents and children

Pohon dokumen menjadi pohon keluarga ketika mengacu pada hubungan antar elemen. Semua elemen yang terkandung dalam elemen tertentu dikatakan sebagai keturunannya. Misalnya, elemen h1, h2, p, em, dan img dalam dokumen pada Gambar 11-6 adalah semua turunan dari elemen body.

Sebuah elemen yang secara langsung terkandung di dalam elemen lain (tanpa tingkat hierarkis yang mengintervensi) dikatakan sebagai anak dari elemen tersebut. Sebaliknya, elemen yang mengandung adalah induknya. Misalnya, elemen em adalah anak dari elemen p, dan elemen p adalah induknya.

Inheritance

Pass it on

Saat Anda menulis aturan gaya terkait font menggunakan elemen p sebagai pemilih, aturan berlaku untuk semua paragraf dalam dokumen serta elemen teks sebaris yang dikandungnya. Gambar 11-7 menunjukkan apa yang terjadi dalam hal diagram struktur dokumen. Perhatikan bahwa elemen img dikecualikan karena properti terkait font tidak berlaku untuk gambar.

Penting untuk dicatat bahwa beberapa properti style sheet mewarisi dan yang lainnya tidak. Secara umum, properti yang terkait dengan penataan gaya teks ukuran font, warna, gaya, diturunkan. Properti seperti batas, margin, latar belakang, dan sebagainya, yang memengaruhi area kotak di sekitar elemen cenderung tidak diturunkan.

Inheritance

Conflicting styles: the cascade

Sumber lembar gaya adalah satu hierarki yang menentukan gaya mana yang menang. Secara umum, semakin dekat style sheet dengan konten, semakin banyak bobot yang diberikan. Lembar gaya yang disematkan yang muncul tepat di dokumen dalam elemen gaya memiliki bobot lebih dari lembar gaya eksternal. Dalam contoh yang memulai bagian ini, elemen h1 akan berakhir ungu seperti yang ditentukan dalam lembar gaya yang disematkan, bukan merah seperti yang ditentukan dalam file .css eksternal yang memiliki bobot lebih sedikit.

CSS memungkinkan Anda untuk menerapkan beberapa lembar gaya ke dokumen yang sama, yang berarti pasti ada konflik. Misalnya, apa yang harus dilakukan browser jika lembar gaya yang diimpor dokumen mengatakan bahwa elemen h1 harus berwarna merah, tetapi lembar gaya yang disematkannya memiliki aturan yang membuat h1 berwarna ungu? Orang-orang yang menulis spesifikasi lembar gaya mengantisipasi masalah ini dan merancang sistem hierarkis yang memberikan bobot berbeda pada berbagai sumber informasi gaya. Cascade mengacu pada apa yang terjadi ketika beberapa sumber informasi gaya bersaing untuk mengontrol elemen pada halaman: informasi gaya diturunkan (“berjenjang”) hingga diganti oleh perintah gaya dengan bobot lebih.

The Big Concepts

Specificity

Setelah style sheet yang berlaku dipilih, mungkin masih ada konflik; oleh karena itu, kaskade berlanjut pada tingkat aturan. Ketika dua aturan dalam satu lembar gaya bertentangan, jenis pemilih digunakan untuk menentukan pemenang. Semakin spesifik pemilih, semakin besar bobot yang diberikan untuk mengesampingkan deklarasi yang bertentangan.

Jika Anda ingin aturan tidak ditimpa oleh aturan konflik berikutnya, sertakan indikator !important tepat setelah nilai properti dan sebelum titik koma untuk aturan itu. Misalnya, untuk membuat teks paragraf selalu biru, gunakan yang berikut ini

p {color: blue !important;}

Conflicting styles: the cascade

Rule order

Dalam skenario ini, teks paragraf akan berwarna hijau karena aturan terakhir di lembar gaya—yaitu, aturan yang paling dekat dengan konten dalam dokumen—mengganti aturan sebelumnya. Hal yang sama terjadi ketika gaya yang saling bertentangan terjadi dalam satu tumpukan deklarasi:<style> p { color: red; color: blue; color: green; } </style>Warna yang dihasilkan akan menjadi hijau karena deklarasi terakhir menimpa dua sebelumnya.

Terakhir, jika ada konflik dalam aturan gaya dengan bobot yang sama, mana yang muncul terakhir dalam daftar “menang”. Ambil tiga aturan ini, misalnya: <style> p { color: red; } p { color: blue; } p { color: green; } </style>

Conflicting styles: the cascade

The box model

Untuk melihat elemen secara kasar seperti yang dilihat browser, berikut style rules yang menambahkan batas di sekitar setiap elemen konten dalam artikel contoh. h1 { border: 1px solid blue; } h2 { border: 1px solid blue; } p { border: 1px solid blue; } em { border: 1px solid blue; } img { border: 1px solid blue; }

Cara termudah untuk memikirkan box model adalah bahwa browser melihat setiap elemen pada halaman (baik blok dan inline) sebagai yang terkandung dalam kotak persegi kecil. Anda dapat menerapkan properti seperti batas, margin, padding, dan latar belakang ke kotak-kotak ini, dan bahkan memposisikannya kembali di halaman.

The Big Concepts

Grouped selectors

Jika Anda perlu menerapkan properti gaya yang sama ke sejumlah elemen, Anda dapat mengelompokkan pemilih ke dalam satu aturan dengan memisahkannya dengan koma. Aturan yang satu ini memiliki efek yang sama dengan lima aturan yang tercantum sebelumnya. Mengelompokkannya membuat pengeditan di masa mendatang lebih efisien dan menghasilkan ukuran file yang lebih kecil. h1, h2, p, em, img { border: 1px solid blue; }

The Big Concepts

Thank you

Cascading Style Sheets Orientation