Leksyon ng Kurso

Basic CSS Tutorial

• Tutorial ng CSS
• Panimula ng CSS
• Mga Tagapagbigay ng CSS
• Selector ng CSS
• Paggamit ng CSS
• Komentaryo ng CSS
• Kulay ng CSS
• Kulay RGB ng CSS
• Kulay HEX ng CSS
• Kulay HSL ng CSS
• Background ng CSS
• Background Image ng CSS
• Pagsasalamin ng Background ng CSS
• Attachment ng Background ng CSS
• Mga Kumpigurang Background ng CSS
• Border ng CSS
• Width ng Border ng CSS
• Kulay ng Border ng CSS
• Mga Bahagi ng Border ng CSS
• Mga Kumpigurang Border ng CSS
• Rounded Corner ng Border ng CSS
• Margin ng CSS
• Pagsasama ng Margin ng CSS
• Padding ng CSS
• CSS height/width
• Frame Model ng CSS
• Outline ng CSS
• Width ng Outline ng CSS
• Kulay ng Outline ng CSS
• Mga Kumpigurang Outline ng CSS
• Offset ng Outline ng CSS
• Text ng CSS
• Text Alignment ng CSS
• Text Decoration ng CSS
• Text Transformation ng CSS
• Text Spacing ng CSS
• Text Shadow ng CSS
• Font ng CSS
• Style ng Font ng CSS
• Size ng Font ng CSS
• Font ng Google ng CSS
• Mga Kumpigurang Font ng CSS
• Icon ng CSS
• Link ng CSS
• List ng CSS
• Table ng CSS

Intermediate CSS Tutorial

• CSS Display
• CSS max-width
• CSS Lokasyon
• CSS z-index
• CSS Overflow
• CSS Floating
• CSS Clear Floating
• Layout ng CSS - Example ng Floating
• CSS inline-block
• CSS Alignment
• CSS Kompositor
• Pseudo-class ng CSS
• Pseudo-element ng CSS
• Transparency ng CSS
• Navigation Bar ng CSS
• Vertical Navigation Bar ng CSS
• Horizontal Navigation Bar ng CSS
• Dropdown Menu ng CSS
• Image Gallery ng CSS
• Image Sprite ng CSS
• Attribute Selector ng CSS
• Form ng CSS
• Counter ng CSS
• Website Layout ng CSS
• Unit ng CSS
• Specificity ng CSS
• CSS !important
• Mathematical Function ng CSS

Tuturo ng CSS3 Advanced

• Rounded Corner ng CSS
• Border Image ng CSS
• Background ng CSS
• Kulay ng CSS
• Color Keyword ng CSS
• Gradient ng CSS
• Radial Gradient ng CSS
• Shadow ng CSS
• box-shadow ng CSS
• Text Effect ng CSS
• CSS Network Font
• CSS 2D Transformation
• CSS 3D Transformation
• CSS Transition
• CSS Animation
• CSS Tooltip
• CSS Image Style
• CSS object-fit
• CSS object-position
• CSS Mask
• CSS Button
• CSS Pagination
• CSS Multi-column
• CSS User Interface
• CSS Variable
• CSS Overlapping Variable
• CSS Variable - JavaScript
• CSS Variable - Media Query
• CSS @property
• CSS Box Sizing
• CSS Flexbox
• CSS Media Query
• CSS Media Query Example

CSS Responsive Design

• RWD Kabatiran
• RWDViewport
• RWD Grid View
• RWD Media Query
• RWD Image
• RWD Video

Tuturo sa CSS Grid

• CSS Grid Layout Module
• CSS Grid Container
• CSS Grid Item

CSS Example

• CSS Example

CSS Quiz

• CSS Quiz

CSS Reference Manual

• CSS Reference Manual
• CSS Browser Support
• Selector ng CSS
• CSS Function
• Unit ng CSS
• CSS Audio
• CSS Network Security Font
• CSS Animatable
• Unit ng CSS
• Kulay ng CSS
• CSS Color Value
• CSS Default Value
• CSS Entity

Pasyalang Kurso

Rekomendasyon ng Kurso:

• CodeW3C.com Treasure Box

Mga Tagapagbigay ng CSS

• Mga Tagapagbigay ng CSS

CSS Komentaryo: Paanong Magdagdag ng CSS Grammar

Selector ng CSS

• Element Selector
• ID Selector
• Class Selector (Para sa Lahat ng Element)
• Class Selector (Tanging para sa <p> Element)
• HTML Element na Nagmamake ng Dalawang Class
• Universal Selector
• Grouped Selector

CSS Komentaryo: Paanong Magdagdag ng CSS Selector

Paggamit ng CSS

• External CSS
• Internal CSS
• Inline CSS
• Mga Maraming Styling Sheet
• Tingin ng Tindigan

CSS Komentaryo: Paanong Magdagdag ng CSS

Komentaryo ng CSS

• Single-line Komentaryo
• Mga Multi-line Komentaryo

CSS Komentaryo: Mga Halimbawa ng Paliwanag

Kulay ng CSS

• Set the background color of the color
• Set the text color
• Set the border color
• Set different color values
• Set the RGB value
• Set the HEX value
• Set the HSL value

Example explanation: CSS color

Background ng CSS

• Set the background color of the page
• Set the background color of different elements
• Set the image as the page background
• How to repeat the background image only horizontally
• How to position the background image
• Fixed background image (the image will not scroll with the rest of the page)
• All background properties in one declaration
• Advanced background example

Example explanation: Background attribute

Border ng CSS

• Set the width of all four borders
• Set the width of the top border
• Set the width of the bottom border
• Set the width of the left border
• Set the width of the right border
• Set the style of all four borders
• Set the style of the top border
• Set the style of the bottom border
• Set the style of the left border
• Set the style of the right border
• Set the color of all four borders
• Set the color of the top border
• Set the color of the bottom border
• Set the color of the left border
• Set the color of the right border
• All border properties in one declaration
• 为元素添加圆角
• Set different borders for each side
• All top border properties in one declaration
• All bottom border properties in one declaration
• All left border properties in one declaration
• All right border properties in one declaration

Example explanation: Border attribute

Margin ng CSS

• Specify different margins for each side of the element
• Use a shorthand margin property with four values
• Use a shorthand margin property with three values
• Use a shorthand margin property with two values
• Use a shorthand margin property with one value
• Set the margin to auto to center the elements within its container
• Inherit the left margin from the parent element
• Margin collapsing

Example explanation: Margin attribute

Padding ng CSS

• Specify different paddings for each side of the element
• Use a shorthand padding with four values
• Use a shorthand padding with three values
• Use a shorthand padding with two values
• Use a shorthand padding with one value
• Padding and element width (do not set box-sizing)
• Padding and element width (set box-sizing)
• Set the left padding of the element
• Set the right padding of the element
• Set the top padding of the element
• Set the bottom padding of the element

Example explanation: Padding attribute

CSS height/width

• Set the height and width of the element
• Set the maximum width of the element
• Set the height and width of different elements
• Use percentages to set the height and width of images
• Set the minimum width and maximum width of the element
• Set the minimum height and maximum height of the element

Mga halimbawa ng pagsasaliksik: Position property

CSS box model

• Demonstrate the box model
• Specify the total width of the element to be 250 pixels

Example explanation: Box model

Outline ng CSS

• Draw lines (outlines) around elements
• Set the style of the outline
• Set the color of the outline
• Use outline-color: flip the outline
• Set the width of the outline
• Ginagamit ang maikling propyedade ng kontura
• Magdagdag ng espasyo sa pagitan ng kontura at gilid ng elemento

Mga halimbawa ng paliwanag: Ating propyedade ng kontura

Text ng CSS

• Iginayos ang kulay ng teksto ng iba't ibang elemento
• Iginayos ang alignment ng teksto
• Tanggalin ang linya sa ilalim ng link
• Iginayos ang estilo ng teksto
• Kontrolin ang letter casing sa loob ng teksto
• Iginayos ang indentation ng teksto
• Tutukoy ang character spacing
• Tutukoy ang line spacing
• Iginayos ang text direction ng elemento
• Iginayos ang space between letters
• Tutukoy ang teksto shadow ng elemento
• Iginayos ang pagbawas ng paglipat ng teksto sa loob ng elemento
• Iginayos ang vertical alignment ng imahe sa loob ng teksto

Mga halimbawa ng paliwanag: Ating propyedade ng teksto

Font ng CSS

• Iginayos ang font ng teksto
• Iginayos ang laki ng font
• Iginayos ang laki ng font gamit ang px
• Iginayos ang laki ng font gamit ang em
• Iginayos ang laki ng font gamit ang porsyento at em
• Iginayos ang estilo ng font
• Iginayos ang variety ng font
• Iginayos ang kagamitan ng font
• Lahat ng propyedade ng font sa isang pahayag

Mga halimbawa ng paliwanag: Ating propyedade ng font

Icon ng CSS

• Font Awesome Icon
• Bootstrap Icon
• Google Icon

Mga halimbawa ng paliwanag: Ating propyedade ng icon

Link ng CSS

• Magdagdag ng iba't ibang kulay sa naabot/ hindi naabot na link
• Ginagamit ang text-decoration sa link
• Tutukoy ang kulay ng background ng link
• Magdagdag ng iba pang estilo sa hyperlink
• Mga iba't ibang uri ng pointer
• Advanced - Lumikha ng link box
• Advanced - Lumikha ng link box na may gilid

Mga halimbawa ng paliwanag: Ating propyedade ng link

List ng CSS

• Lahat ng magkakaibang marka ng listahan sa listahan
• Ginagamit ang imahe bilang marka ng listahan
• Iginayos ang lokasyon ng marka ng listahan
• Tanggalin ang default na setting ng listahan
• Lahat ng propyedade ng listahan sa isang pahayag
• Iginayos ang estilo ng listahan gamit ang kulay
• Listahan na may buong lapad na gilid

Mga halimbawa ng paliwanag: Ating propyedade ng listahan

Table ng CSS

• Tutukoy ang itim na gilid ng table, th at td elemento
• Ginagamit ang border-collapse
• Iginayos ang isang gilid ng talahanayan
• Tutukoy ang lapad at taas ng talahanayan
• Iginayos ang horizontal alignment ng nilalaman (text-align)
• Iginayos ang vertical alignment ng nilalaman
• Tutukoy ang padding ng th at td elemento
• Horizontal Separator
• Hoverable Talahanayan
• Barangay Talahanayan
• Tutukoy ang kulay ng gilid ng talahanayan
• Iginayos ang posisyon ng pamagat ng talahanayan
• Responsive Talahanayan
• Lumikha ng magandang talahanayan

Mga halimbawa ng paliwanag: Ating propyedade ng talahanayan

CSS Pagpapakita

• Paano itahin ang elemento (visibility:hidden)
• Paano itahin ang elemento (display:none)
• Paano ipakita ang block na elemento bilang inline na elemento
• Paano ipakita ang mga inline na elemento bilang block na elemento
• Paano gamitin ang CSS at JavaScript upang ipakita o itahin ang nilalaman

Mga halimbawa ng paliwanag: Ating propyedade ng display

CSS Lokasyon

• Iginayos ang elemento sa bawat gilid ng window na naglalagay
• Iginayos ang elemento sa normal na posisyon ng elemento
• Iginayos ang elemento gamit ang tiyak na halaga
• Tiyak na lokasyon
• Iginahahalata ang mga elemento
• Iginayos ang hugis ng elemento
• Iginayos ang itaas na gilid ng imahe gamit ang halaga ng pixel
• Iginayos ang ibabang gilid ng imahe gamit ang halaga ng pixel
• Magdagdag ng pixel value upang itakda ang baba gilid ng imahe
• Magdagdag ng pixel value upang itakda ang kanang gilid ng imahe
• Pag-alinlangan ng imahe at teksto (sa itaas sa baba)
• Pag-alinlangan ng imahe at teksto (sa itaas sa kanan)
• Pag-alinlangan ng imahe at teksto (sa baba sa kanan)
• Pag-alinlangan ng imahe at teksto (sa kanang ibaba)
• Pag-alinlangan ng imahe at teksto (sa gitna)

Mga halimbawa ng pagsasaliksik: Position property

CSS Overflow

• Gamit ang overflow: visible - Hindi napapalayong ang overflow, ito ay nangararanggo sa labas ng kahon ng elemento.
• Gamit ang overflow: hidden - Napapalayong ang overflow, ngunit napapalubog ang ibang nilalaman.
• Gamit ang overflow: scroll - Napapalayong ang overflow, ngunit nagdagdag ng scrollbar upang makita ang ibang nilalaman.
• Gamit ang overflow: auto - Kung napapalayong ang overflow, magdagdag ng scrollbar upang makita ang ibang nilalaman.
• Gamit ang overflow-x at overflow-y

Mga halimbawa ng pagsasaliksik: Overflow property

CSS Floating

• Simple na paggamit ng float property
• Ang imahe na may border at margin ay lumilipat sa kanang gilid ng paragrapo
• Ang imahe na may titulo ay lumilipat sa kanan
• Huwag palawakin ang unang titik ng paragrapo sa kanan
• Iwan ang floating (sa pamamagitan ng clear attribute)
• Iwan ang floating (sa pamamagitan ng clearfix hack)
• Mga halimbawa ng paggawa ng floating box
• Mga halimbawa ng paggawa ng side-by-side images
• Mga halimbawa ng paggawa ng equal height box (sa pamamagitan ng flexbox)
• Mga halimbawa ng paggawa ng horizontal menu
• Mga halimbawa ng paggawa ng web layout

Mga halimbawa ng pagsasaliksik: Floating property

CSS Inline-block

• Ipakita ang pagkakaiba ng inline, inline-block, at block na elemento
• Gamit ang inline-block upang gumawa ng navigation link

Mga halimbawa ng pagsasaliksik: Inline-block

CSS Pag-alinlangan ng elemento

• Pag-alinlangan sa gitna sa pamamagitan ng margin
• Pag-alinlangan ng teksto sa gitna
• Pag-alinlangan ng imahe sa gitna
• Pag-alinlangan ng left/right alignment sa pamamagitan ng position
• Pag-alinlangan ng left/right alignment sa pamamagitan ng position - Panlabas na browser na solusyon
• Pag-alinlangan ng left/right alignment sa pamamagitan ng float
• Pag-alinlangan ng left/right alignment sa pamamagitan ng float - Panlabas na browser na solusyon
• Pag-alinlangan ng vertical sa pamamagitan ng padding
• Vertical at horizontal pag-alinlangan
• Pag-alinlangan ng vertical sa pamamagitan ng line-height
• Pag-alinlangan ng vertical at horizontal sa pamamagitan ng position

Mga halimbawa ng pagsasaliksik: Pag-alinlangan ng aterbuhin

CSS Kompositor

• Anak na bata selector
• Anak selector
• Kasunod na magkakapatid na selector
• Pangkalahatang magkakapatid na selector

Mga halimbawa ng pagsasaliksik: Kompositor na selector

Pseudo-class ng CSS

• Magdagdag ng iba't ibang kulay sa link
• Magdagdag ng iba pang estilo sa link
• Gamit ang :focus
• :first-child - Matingay sa unang p element
• :first-child - Matingay sa unang i element sa loob ng bawat p element
• :first-child - Matingay sa lahat ng unang anak p na may lahat ng i element
• Use :lang

Example Explanation: Pseudo-Class

Pseudo-element ng CSS

• Create Special First Letters in Text
• Create Special First Line in Text
• Create Special First Letters and First Lines
• Insert Content Before Element Using :before
• Insert Content After Element Using :after

Example Explanation: Pseudo-Element

CSS Content Generation

• Insert URL in Parentheses After Each Link with content Attribute
• Number Sections and Subsections with "Section 1", "1.1", "1.2", etc.
• Specify Quotes Using the quotes Property

Example Explanation: CSS Counter

Transparency ng CSS

• Create Transparent Image
• Create Transparent Image - Mouseover Effect
• Reversed Mouseover Effect on Transparent Image
• Transparent Box (div)
• Transparent Box Using RGBA Values
• Create a Transparent Box with Text Over Background Image

Example Explanation: Image Opacity

Navigation Bar ng CSS

• Vertical Navigation Bar with Full Style
• Horizontal Navigation Bar with Full Style
• Full Height Fixed Vertical Navigation Bar
• Fixed Horizontal Navigation Bar
• Sticky Navigation Bar (Does Not Work in IE or Edge 15 and Older Versions)
• Responsive Top Navigation Bar
• Responsive Sidebar Navigation Bar

Example Explanation: Navigation Bar

CSS Dropdown List

• Dropdown Text
• Dropdown Menu
• Right-Aligned Dropdown Menu
• Dropdown Image
• Dropdown Navigation Bar

Example Explanation: Dropdown Menu

Image Gallery ng CSS

• Image Gallery
• Responsive Image Library

Example Explanation: Image Gallery

Image Sprite ng CSS

• Image Sprites
• Image Sprites - Navigation List
• Image Sprites with Hover Effect

Example Explanation: Image Sprites

Attribute Selector ng CSS

• Select All <a> Elements with Attribute target
• Select All <a> Elements with Attribute target="_blank"
• Select All Elements with Title Attribute Containing a List of Words Separated by Spaces, One of Which Is "flower"
• Select All Elements with Class Attribute Value Starting with "top" (Must Be the Whole Word)
• Select All Elements with Class Attribute Value Starting with "top" (Not the Whole Word)
• Select All Elements with Class Attribute Value Ending with "test"
• Select All Elements with Class Attribute Value Containing "te"

Example Explanation: Attribute Selector

Form ng CSS

• Full Width Input Field
• Filled Input Field
• Input Field with Border
• Input Field with Bottom Border
• Input Field with Color
• Input Field with Focus
• Input Field with Focus 2
• Input Field with Icon
• Animated Search Box
• Set Text Box Style
• Set Dropdown Menu Style
• Set Button Style
• Responsive Form

Example Explanation: Form

Counter ng CSS

• Create Counter
• Nested Counter 1
• 嵌套计数器 2

实例解释：计数器

Website Layout ng CSS

• 简单的响应式网站布局
• 一个网站的实例

实例解释：网站布局

Rounded Corner ng CSS

• 为元素添加圆角
• 单独设置每个圆角
• 创建椭圆角

实例解释：CSS 圆角边框

Border Image ng CSS

• 创建围绕元素的图像边框，使用 round 关键字
• 创建围绕元素的图像边框，使用 stretch 关键字
• 图像边框 - 不同的 slice 边框

实例解释：CSS 边框图像

Background ng CSS

• 为元素添加多个背景图像
• 规定背景图像的大小
• 使用 "contain" 和 "cover" 缩放背景图像
• 定义背景图像的大小
• 全尺寸的背景图像（完全覆盖内容区域）
• 使用 background-origin 来规定放置背景图像的位置
• 使用 background-clip 来规定背景的绘制区域

实例解释：CSS 背景

Gradient ng CSS

• 线性渐变 - 从上到下
• 线性渐变 - 从左到右
• 线性渐变 - 对角线
• 线性渐变 - 特定角度
• 线性渐变 - 多个色标
• 线性渐变 - 彩虹色 + 文本
• 线性渐变 - 透明度
• 线性渐变 - 重复的线性渐变
• 径向渐变 - 均匀分布的色标
• 径向渐变 - 间距不同的色标
• 径向渐变 - 设置形状
• 径向渐变 - 不同的尺寸关键字
• 径向渐变 - 重复的径向渐变

实例解释：CSS 渐变

CSS 阴影效果

• 简单的阴影效果
• 向阴影添加颜色
• 向阴影添加模糊效果
• 带黑色阴影的白色文本
• 红色霓虹灯发光阴影
• 红色和蓝色霓虹灯发光阴影
• 黑色、蓝色和深蓝色阴影的白色文本
• 向元素添加简单的 box-shadow
• 向 box-shadow 添加颜色
• 向 box-shadow 添加颜色和模糊效果
• 创建类似纸质卡片（文本）
• 创建类似纸质卡片（宝丽来图像）

实例解释：CSS 阴影效果

Text Effect ng CSS

• 指定应如何向用户呈现未显示的溢出内容
• 将鼠标悬停在元素上时如何显示溢出的内容
• 允许长文字能够被折断并换到下一行
• 规定换行规则
• 规定文本的书写模式（横着写还是竖着写）

实例解释：CSS 文本

CSS Web 字体

• 在 @font-face 规则中使用您自己的字体
• 在 @font-face 规则中使用您自己的字体（粗体）

实例解释：CSS web 字体

CSS 2D Transformation

• translate() - 从当前位置删除元素
• rotate() - 顺时针旋转元素
• rotate() - 逆时针旋转元素
• scale() - Increase elements
• scale() - Reduce elements
• skewX() - Skew elements along the X axis
• skewY() - Skew elements along the Y axis
• skew() - Skew elements along the X and Y axes
• matrix() - Rotate, scale, move, and skew elements

Pagsasalin ng halimbawa: CSS 2D Transformation

CSS 3D Transformation

• rotateX() - Rotate the element around its X-axis by the given angle
• rotateY() - Rotate the element around its Y-axis by the given angle
• rotateZ() - Rotate the element around its Z-axis by the given angle

Pagsasalin ng halimbawa: CSS 3D Transformation

CSS Transition

• Transition - Change the width of an element
• Transition - Change the width and height of an element
• Specify different easing curves for the transition
• Specify a delay for the transition
• Add transformation to the transition effect
• Define all transition properties in a shorthand attribute

Pagsasalin ng halimbawa: CSS Transition

CSS Animation

• Bind animation to an element
• Animation - Change the background color of an element
• Animation - Change the background color and position of an element
• Delay animation
• Running animation three times before stopping
• Running animation forever
• Running animation from the opposite direction
• Alternating animation
• Kurba ng bilis ng animasyon
• Short-hand property ng animasyon

Pagsasalin ng halimbawa: CSS Animation

CSS Tooltip

• Tooltip na nasa kaliwa
• Tooltip na nasa kanan
• Tooltip na nasa itaas
• Tooltip na nasa ilalim
• Tooltip na may parang
• Tooltip na may animasyon

Pagsasalin ng halimbawa: Tooltip

Imahe na may estilo CSS

• Imahe na puwang
• Imahe na sirkular
• Thumbnail
• Thumbnail bilang link
• Responsive Image
• Teksto ng imahe (naka-itaas)
• Teksto ng imahe (naka-kanang itaas)
• Teksto ng imahe (naka-kanang ilalim)
• Teksto ng imahe (naka-kanang itaas)
• Teksto ng imahe (naka-kanan)
• Imahe ng Polaroid
• Filter ng imahe sa puti
• Advanced - Imahe modal na ginawa sa pamamagitan ng CSS at JavaScript

Pagsasalin ng halimbawa: CSS Imahe

CSS Object-fit

• Tumugtog sa dalawang panig ng imahe, panatilihin ang proporsyon ng laki at lapit, at pumuno ng puwang
• Lahat ng halimbawa ng mga halaga ng attribute ng object-fit

Pagsasalin ng halimbawa: Object-fit

CSS Button

• Basic na CSS Button
• Kulay ng button
• Laki ng button
• Button na puwang
• Barya ng button
• Button na puwang
• Button na may lilim
• Button na may kapangyarihan
• Layong button
• Group na button
• Group na button na may barya
• Button na may animasyon (efekto ng puwang)
• Button na may animasyon (efekto ng pindutin)
• Button na may animasyon (efekto ng pagbubura)

Pagsasalin ng halimbawa: CSS Button

CSS Pagination

• Simple na pagbabahagi
• Pagbabahagi na puwang at puwang
• Pagbabahagi na puwang at puwang na puwang na puwang
• Transisyon na puwang na puwang
• Pagbabahagi na may barya
• Pagbabahagi na may butas at barya
• Links na may puwang sa pagitan ng pagbabahagi
• Laki ng pagbabahagi
• Pagbabahagi na naka-kanan
• Bread crumb

Pagsasalin ng halimbawa: CSS Pagbabahagi

CSS Multi-column

• Lumikha ng multi-column
• Tukuyin ang puwang sa pagitan ng column
• Tukuyin ang estilo ng regular sa pagitan ng column
• Tukuyin ang haba ng regular sa pagitan ng column
• Tukuyin ang kulay ng regular sa pagitan ng column
• Tukuyin ang haba, estilo at kulay ng regular sa pagitan ng column
• Tukuyin kung anong column ang dapat lumampas ang elemento
• Tukuyin ang pinakamahusay na lapad ng column

Exemplo ng Paglalarawan: CSS Multi-column

CSS User Interface

• Payagan ang gumagamit na ayusin ang lapad ng elemento
• Payagan ang gumagamit na ayusin ang taas ng elemento
• Payagan ang gumagamit na ayusin ang lapad at taas ng elemento
• Magdagdag ng espasyo sa pagitan ng kontura at border ng elemento

Exemplo ng Paglalarawan: CSS User Interface

CSS Variable

• Gamit ang function na var()
• Gamit ang function na var() upang ipasok ang ilang pinaghahandaan na halaga ng attribute

Exemplo ng Paglalarawan: CSS Variable

CSS Box Sizing

• Elemento na walang box-sizing
• Tukuyin ang lapad ng elemento na may box-sizing
• Elementong form + box-sizing

Exemplo ng Paglalarawan: CSS Box Sizing

CSS Flexbox

• Flexbox na may tatlong flex item
• Flexbox na may tatlong flex item - kanluran na direksyon
• flex-direction - row-reverse
• flex-direction - column
• flex-direction - column-reverse
• justify-content - flex-end
• justify-content - center
• justify-content - space-between
• justify-content - space-around
• align-items - stretch
• align-items - flex-start
• align-items - flex-end
• align-items - center
• align-items - baseline
• flex-wrap - nowrap
• flex-wrap - wrap
• flex-wrap - wrap-reverse
• align-content - center
• Pagkakasunod-sunod ng flex item
• Margin-right:auto;
• Margin:auto; = Magandang Sentro
• Itaas ang align-self sa flex item
• Tukuyin ang haba ng flex item, kung saan ito ay magiging relativo sa ibang bahagi ng flex item
• Gumawa ng responsibong image library gamit ang Flexbox
• Gumawa ng responsibong websayt gamit ang Flexbox

Exemplo ng Paglalarawan: CSS Flexbox

CSS Media Query

• Kung ang lapad ng viewport ay 480 pixel o mas malaki, palitan ang kulay ng background sa liwanag na berdeng kulay
• Kung ang lapad ng viewport ay 480 pixel o mas malaki, ipakita ang isang paglilipat sa kaliwa ng pahina

Exemplo ng Paglalarawan: CSS Media Query

CSS Media Query - More Examples

• Set Different Background Colors Based on Screen Width
• Responsive Navigation Menu
• Responsive Columns Using Float
• Responsive Columns Using Flexbox
• Hide Elements Through Media Query
• Responsive Font Size
• Responsive Image Library
• Responsive Website
• Change Page Layout Based on Browser Orientation
• Minimum Width to Maximum Width

Example Explanation: CSS Media Query Example

CSS Responsive Web Design

• Responsive Grid View
• Add Breakpoints for Desktop, Laptop, and Mobile
• Typical Breakpoints
• Responsive Image
• Responsive Video
• Responsive Framework: W3.CSS
• Responsive Framework: Bootstrap

Example Explanation: CSS Responsive Web Design

CSS Grid

• Grid Layout
• Grid Element
• Grid Column Gutter
• Grid Row
• Grid Container
• Grid Item

Example Explanation: CSS Grid

Toolbox

CSS Reference Manual

CSS Example

CSS Quiz

CSS Supplementary Books

Sponsorship Links