Kisi Kisi BT materi CSS Pak Budhy.pdf

Understand the purpose of CSS CSS (Cascading Style Sheets) is used to style and format the visual aspects of HTML documents. The primary purposes of CSS include controlling the page layout and ensuring consistent design across a website. 1. Control page layout CSS allows you to...

Understand the purpose of CSS CSS (Cascading Style Sheets) is used to style and format the visual aspects of HTML documents. The primary purposes of CSS include controlling the page layout and ensuring consistent design across a website. 1. Control page layout CSS allows you to control how elements are positioned and arranged on a webpage Box Model: Control margins, borders, padding, and content size. Flexbox and Grid: Arrange elements in a flexible and responsive manner. Positioning: Use properties like relative, absolute, fixed, and sticky to place elements precisely. 2. Consistent page design CSS provides the means to maintain a uniform look and feel across all pages of a website. By using consistent styles for typography, colors, spacing, and layout, CSS ensures a cohesive design External Stylesheets: Reuse the same CSS file across multiple HTML pages External style Global Styles: Apply styles to all elements using type selectors (e.g., body, h1) Selectors or universal selectors (*) Universal Variables (CSS Custom Properties): Define and reuse values for colors, fonts, etc Be able to reference CSS within the HTML code: 1. inline style CSS is written directly within the HTML element using the style attribute Hello, World! Typically used for applying unique styles to a single element. It's less maintainable for large projects because styles are mixed with HTML content. 2. internal style CSS is written within the tag inside the section of an HTML document  h1 { color: blue; font-size: 24px; } Useful for styling a single page or document. However, it can lead to duplication of styles across multiple pages 3. External style CSS is written in a separate.css file, which is linked to the HTML document This is the most efficient way to manage CSS, especially for larger projects with multiple pages a. folder structure Folder structure is is important for maintainability and keeping all resources organized Organization keeps it easy for the creator and other people to view and edit the project Example: (/css, /images, /js, are files) /project-root ├── /css │ └── main.css ├── /images │ └── ayanokoji.png │ └── kei karuizawa.png ├── /js └── index.html b. naming convention Naming conventions are based on what information you anticipate to find easily The computer arranges files by name, character by character, searches it by chronological order  There are a lot of naming conventions and are based on preference and efficiency Date or date range (ex: YYYYMMDD) Experiment number or sample ID (ex: 001, 002 … 099) Versioning (ex: v_01, v_02) c. Relative path A relative file path points to a file relative to the current page. Path Path Description Folder Path Absolute The "picture.jpg" file is located in the same folder as the current page Relative located in the images ├── /css folder in the current │ └── main.css folder ├── /images │ └── picture.jpg ├── /pages │ ├── about.html │ └── contact.html └── /HTML │ └── index.html │ ├── /images │ └── picture.jpg └── picture.jpg Relative located in the images ├── /css folder at the root of the │ └── main.css current web ├── /images │ └── picture.jpg ├── /pages │ ├── about.html │ └── contact.html └── /HTML │ └── index.html │ ├── /images │ └── picture.jpg └── picture.jpg Relative The "picture.jpg" file is /project-root located in the folder ├── /css one level up from the │ └── main.css current folder ├── /images │ └── picture.jpg ├── /pages │ ├── about.html │ └── contact.html └── /HTML │ └── index.html │ ├── /images │ └── picture.jpg └── picture.jpg Understand how to write CSS rules element { Property: value; } 1. Selectors Selectors specify which HTML elements you want to style. They are used to target specific elements or groups of elements in the HTML document Check Understand CSS Selector h1 { color: blue; } 2. Properties Properties define the aspects of the selected elements that you want to style, such as color, font size, margin, etc. Each property corresponds to a specific visual aspect Ex: color, background-color, font-size, width, height, padding p{ font-size: 16px; color: blue;} 3. Value Values are the specific settings applied to the properties. Each property is assigned a value that defines the exact style. Values can be keywords, units (like pixels or percentages), colors, or other property-specific values Every property has their specific values that can be inputted Ex: red, 16px, 100%, bold, italic a{ text-decoration: underline; color: #0066cc; } Understand CSS Selector 1. Type selector (element) a. Select all elements b. p { color: blue; } 2. Class a. Select all elements with that class b. Dot as a symbol c..sigma { color: blue; } 3. Id a. Select element with a specific id b. Hashtag as a symbol c. An ID can only be represented by one element d. #sigma { color: blue; } 4. Universal a. Select all elements b. Asterisk as a symbol (*) c. *html { color: blue; } 5. Attribute Existence Selector a. Select elements with certain attributes b. A[target] { color: blue; } 6. Child a. Select elements that are direct children of a specified parent b. element > element c. div > p { color: blue; }  d. Does not select that are embedded into another element inside the div 7. Descendant a. Select elements that are descendants of a specified ancestor b. element element c. div p { color: blue; } d. Select all inside the div 8. Adjacent sibling a. Selects the element that is directly next to another element b. element + element c. div + p { color: blue; } d. This will change the color of the next after the div 9. General sibling a. Selects every element that is preceded after another element b. element1 ~ element2 c. h1 ~ p { color: blue; } 10. Multiple selector a. Selects multiple elements at once, applying the same style to all specified selectors b. Selector1, selector2, selector3 c..sigma, #skibidi,.gyatt { color: blue; } Understand how to write efficient style sheet Writing efficient CSS involves understanding how styles are applied and organized. This includes the concepts of cascade and inheritance.  1. Cascade The cascade determines which CSS rules are applied when multiple rules could apply to the same element. The cascade considers specificity, importance, and source order. Specificity: The more specific a selector, the higher its priority. For example, #id has higher specificity than.class, which has higher specificity than element. Importance: The !important rule overrides other declarations, but should be used sparingly to avoid complications. Source Order: If two rules have the same specificity, the one that appears last in the stylesheet is applied. 2. Inheritance Certain CSS properties are inherited from parent elements to child elements. This allows for consistent styling across related elements without explicitly defining styles for each one. Inherited Properties: Common inherited properties include color and font-family body { color: black; font-family: Arial, sans-serif; } Applying General and Specific Rules Efficient CSS relies on striking a balance between general rules that apply to most elements and specific rules for individual elements: General Rules: Use global selectors or common classes for shared styles Specific Rules: Use IDs, classes, or more specific selectors for elements that require unique styling Understand the CSS Box Modeling Atribut Selector dalam CSS merupakan suatu cara untuk menge-style elemen-elemen HTML yang memiliki atribut atau nilai atribut yang spesifik. Tipe-tipe atribut selector yaitu: 1. Existence Selector Existence selector digunakan untuk memilih (select) suatu elemen yang memiliki atribut tertentu Contoh: … a[target] { background-color: yellow; } CSS [attribute] Selector The links with a target attribute gets a yellow background: w3schools.com disney.com wikipedia.org … Elemen anchor (a) memiliki atribut “target”. Kita dapat meng-style anchor yang memiliki atribut target saja dengan “a[target]” → elemen[atribut] 2. Equality Selector Equality selector digunakan untuk memilih suatu elemen yang memiliki nilai atribut tertentu  Contoh: … a[target="_blank"] { background-color: yellow; } CSS [attribute="value"] Selector The link with target="_blank" gets a yellow background: w3schools.com disney.com wikipedia.org … Elemen anchor (a) memiliki atribut “target” dan nilai “_blank”. Kita dapat meng-style anchor yang memiliki atribut target dengan nilai _blank saja dengan a[target=“_blank”] → elemen[attribut=”nilai”] 3. Space Selector Space selector digunakan untuk memilih suatu elemen yang memiliki kata tertentu pada nilai atribut tertentu Contoh: … [title~="flower"] {  border: 5px solid yellow; } CSS [attribute~="value"] Selector All images with the title attribute containing the word "flower" get a yellow border. … Space selector dilihat dari nilai value tertentu dari atribut. Di kasus ini atribut title dengan nilai yang mengandung “flower” akan memiliki border. [title~="flower"] →[attribut~=”nilai”] 4. Prefix Selector Prefix selector digunakan untuk memilih elemen yang memiliki awalan tertentu pada nilai atribut tertentu Contoh: … [class^="top"] { background: yellow; } CSS [attribute^="value"] Selector Welcome Hello world! Are you learning CSS? … Menggunakan prefix selector tidak dipandang dari jenis elemen namun dilihat dari atribut dan nilainya saja. Nilainya juga dilihat dari awalannya saja. Awalan disini yaitu “top” sehingga segala atribut class dengan nilai awalan “top”. Setiap elemen yang memiliki atribut class dengan nilai yang mengandung top di awalan akan termasuk dalam style css tersebut. [class^="top"] → [atribut^=”nilai prefix”] 5. Suffix selector Prefix selector digunakan untuk memilih suatu elemen yang memiliki akhiran tertentu pada nilai atribut tertentu Contoh: … [class$="test"] { background: yellow; } CSS [attribute$="value"] Selector The first div element. The second div element. The third div element. This is some text in a paragraph. … Sama saja seperti suffix selector namun nilainya yang dilihat adalah nilai akhiran. [class$="test"] → [“atribut”$=”nilai suffix”] 6. Substring selector Prefix selector digunakan untuk memilih suatu elemen yang memiliki nilai tertentu pada nilai atribut tertentu Contoh: … [class*="te"] { background: yellow; } CSS [attribute*="value"] Selector The first div element. The second div element. The third div element. This is some text in a paragraph. … Substring selector akan melihat nilai atribut yang mengandung nilai tertentu sehingga akan di style. Seluruh nilai dari atribut class yang mengandung nilai “te” akan termasuk dalam css tersebut. [class*="te"] → [“atribut”*="substring"]