CSS Fundamentals

وصف المقرر

في هذا المقرر سيتم التعرف على CSS Fundamentals . وسيتم التعرف على : - CSS Vocabularies. - CSS Declaration Blocks. - CSS Selectors and Rules. - Adding CSS to HTML Document. - Apply common style to multiple elements. - Fonts. - Color. - Text-Shadow. - Box Model. - CSS Padding. - CSS Margins. - CSS Bordees. - Bordees Radius. - Background.

IMG-course
م.نايف الشهري
عام
250 ريال
83 محاضرة
فيديوهات قصيرة
ملخصات وتمارين
مراجعات
اختبارات سابقة
واجبات
عملي

المحاضرات

Introduction to CSS


CSS Syntax


CSS comments and whitespaces


How to write CSS code ?


How to add CSS to HTML


the three methods specificity


CSS Selectors


Type (Element ) Selector


Class Selector


ID Selector


Selectors Specificity : Basics


Multiple Selector


Universal Selector


Text Styling : font-family


Text Styling : font-size ,font-weight and font-style


Text styling : line-height property


Text Styling : font-variant


font shorthand property


Text Styling : Text#1


Text Styling : Text-decoration


Text Styling : Text-indent , text-transform and writing-mode


Colors in CSS


CSS Colors : Wrap-up


text-shadow


Box Model #1


Box Model #2


Padding


Margin


Margin Collapse


Default Margin Style and Reset


Margin Collapse and Default Margin Example


Centering With Margin


Centering Example


CSS Borders


border-radius


Make triangle using border


Draw a Line Using border and background-color


Drawing shapes using border-radius


Background Color


Background Image


Background Clip , Origin


Multi Background Images


Background Blend modes


Linear Gradient


Radial Gradient


Text Gradient


Background Shorthand Property


CSS Units : part#1


Problems with Pixels


CSS Units : part#2 : Percentage


CSS Units : part#3 : rem and em


CSS Units : part#3 : rem and em


CSS Units : part#4 : View Port Units


Advanced Selectors#1 : Attribute Selectors


Attribute Selector : Practice


Advanced Selectors#2 : DOM and Combinator


Advanced Selectors#3: Pseudo class Selectors


Advanced Selectors#4 :More pseudo class Selectors


Advanced Selectors#5 : Pseudo Elements Selectors


Advanced Selectors#5 : Pseudo Elements Selectors


outline property


Width and Height of an Element


Box-Sizing


Box Shadow #1


Box Shadow #2 :: Notes and Tools


Practice


display property #1


display property #2: none


Styling Lists


List Practice


CSS Positioning #1 : Box Model and Margin Collapse Review


CSS Positioning #2 : Document Flow


CSS Positioning #3 : Floating Elements


CSS Positioning #4 : Clear Fix


CSS Positioning #5 : Making Layout


CSS Positioning #6 : Using Margin for Spacing in Layout


CSS Positioning #7 : Using Padding for Spacing in Layout


CSS Positioning #7 : Position Property : static and relative


CSS Positioning #8 : Position Absolute


CSS Positioning #8 : Fixed position and Z-index


CSS Transform #1 : translate


Vertical Alignment using translate


Practice : Landing Page