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.

م.نايف الشهري
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


Box Model #1

Box Model #2



Margin Collapse

Default Margin Style and Reset

Margin Collapse and Default Margin Example

Centering With Margin

Centering Example

CSS Borders


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 Shadow #1

Box Shadow #2 :: Notes and Tools


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