# data[].attributes.headline
حللت أهلًا مشاركنا العزيز في مجتمعنا CAC 💚

# data[].attributes.subject
حللت أهلًا مشاركنا العزيز في مجتمعنا CAC 💚

# data[].attributes.body
في هذه الرحلة سنتعلم بإذن الله تطوير الويب وجزئية كبيرة من التقنيات المتعلقة به.
بنهاية رحلتنا ستكون أكتسبت مهارات عديدة من أهمها:

HTML

CSS

Tailwind CSS

Javascript

ES6

React

JSON and handling the APIs

Git/GitHub

# data[].attributes.headline
ما هو الإنترنت وكيف يعمل الويب

# data[].attributes.subject
ما هو الإنترنت وكيف يعمل الويب

# data[].attributes.attachment_link.authors[].name
أكاديمية حسوب

# data[].attributes.attachment_link.title
كيف تعمل مواقع الويب

# data[].attributes.headline
ننهي اليوم اخر دروس الـ HTML ✅

# data[].attributes.subject
ننهي اليوم اخر دروس الـ HTML ✅

# data[].attributes.headline
قروب المجتمع بالواتساب:

# data[].attributes.subject
قروب المجتمع بالواتساب:

# data[].attributes.body
https://chat.whatsapp.com/D5gZrG6Zypy22WYaZRZ7AU

# data[].attributes.headline
كيف يعمل الإنترنت من منظور الواجهات الأمامية بمواقع الويب 

# data[].attributes.subject
كيف يعمل الإنترنت من منظور الواجهات الأمامية بمواقع الويب 

# data[].attributes.attachment_link.title
How the Internet Works for Developers - Pt 1 - Overview & Frontend

# data[].attributes.headline
كيف يعمل الإنترنت من منظور الواجهات الخلفية بمواقع الويب 

# data[].attributes.subject
كيف يعمل الإنترنت من منظور الواجهات الخلفية بمواقع الويب 

# data[].attributes.attachment_link.title
How the Internet Works for Developers - Pt 2 - Servers & Scaling

# data[].attributes.headline
كيف تعمل المتصفحات

# data[].attributes.subject
كيف تعمل المتصفحات

# data[].attributes.body
Further reading: https://web.dev/howbrowserswork

# data[].attributes.headline
ماهو الـ DNS وكيف يعمل 

# data[].attributes.subject
ماهو الـ DNS وكيف يعمل 

# data[].attributes.attachment_link.title
How a DNS Server (Domain Name System) works.

# data[].attributes.headline
ماهو الـ DOMAIN وكيف يعمل

# data[].attributes.subject
ماهو الـ DOMAIN وكيف يعمل

# data[].attributes.attachment_link.title
What is a Domain Name? - A Beginners Guide to How Domain Names Work!

# data[].attributes.headline
أسعد الله أوقاتكم مشاركينا الأعزاء بكل خير ومرحبًا بكم بأول أيام خطتنا التعليمية 📝💚

# data[].attributes.subject
أسعد الله أوقاتكم مشاركينا الأعزاء بكل خير ومرحبًا بكم بأول أيام خطتنا التعليمية 📝💚

# data[].attributes.headline
طريقة تحميل VSCode (وبإمكانك إستعمال أي محرر أكواد آخر)

# data[].attributes.subject
طريقة تحميل VSCode (وبإمكانك إستعمال أي محرر أكواد آخر)

# data[].attributes.attachment_link.title
Visual Studio Code 2022 تحميل وتثبيت برنامج

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #03 - First Project And First Page

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #04 - Head And Nested Elements

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #05 - Comments And Use Cases

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #06 - Doctype And Standard And Quirks Mode

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #07 - Headings And Use Cases

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #08 - Syntax And Tests

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #09 - Paragraph Element

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #10 - Elements Attributes

# data[].attributes.wish_content.attachment_props.question
كيف كان درس اليوم؟

# data[].attributes.headline
مدة درس اليوم ٥٠ دقيقة ⏱️

# data[].attributes.subject
مدة درس اليوم ٥٠ دقيقة ⏱️

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #11 - Formatting Elements

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #12 - Links - Anchor Tag

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #13 - Image And Deal With Paths

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #14 - Lists - UL, OL, DL

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #16 - Span And Break And Horizontal Rule

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #17 - Div And How To Use

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #18 - HTML Entities

# data[].attributes.attachment_link.title
HTML Symbols, Entities and Codes - Toptal Designers

# data[].attributes.attachment_link.description
Easily find HTML symbols, entities, characters and codes with ASCII, HEX, CSS and Unicode values; including copyright sign, trademark sign and at symbol.

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #19 - Semantic Elements

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #20 - Layout With Div And Classes

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #21 - Layout With Semantic Elements

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #24 - Form Part 1 - Input Types And Label

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #25 - Form Part 2 - Required, Placeholder, Value

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #26 - Form Part 3 - Action, Name, Method

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #27 - Form Part 4 - Hidden, Reset, Color, Range, Number

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #28 - Form Part 5 - ReadOnly, Disabled, Autofocus

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #29 - Form Part 6 - Radio And Checkbox

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #30 - Form Part 7 - Select And Textarea

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #31 - Form Part 8 - File, Search, URL, Time

# data[].attributes.attachment_link.title
Learn HTML In Arabic 2021 - #32 - Form Part 9 - Data List, Novalidate, Target

# data[].attributes.headline
متطلبات المشروع للـ HTML

# data[].attributes.subject
متطلبات المشروع للـ HTML

# data[].attributes.body
- إنشاء folder باسم مشروعك
- إنشاء HTML file بعنوان index
- استعمال ال tags الاساسية؛ html, !doctype html, head, body
- استعمال ال meta بأهم انواعها
- استعمال ال comments
- استعمال نوعين على الاقل من ال headings
- استعمال التاق p
- استعمال ال formatting بطريقة صحيحة للنصوص
- استعمال التاق a
- استعمال التاق img
- استعمال نوعين من ال lists
- استعمال ال table
- استعمال ال hr وال br
- استعمال ال span وال div
- استعمال ال html entities
- ترتيب الصفحة باستعمال ال semantic elements
- استعمال التاق audio
- استعمال التاق video
- استعمال ال form بخمس انواع input مختلفة على الاقل
- استعمال ال attributes المناسبة لكل input
- استعمال ال attributes لل tags عند الحاجة
- ترتيب ال assets المستعملة بملفات منظمة

# data[].attributes.headline
اختبار (validate) صفحة الـ HTML لمشروعك -إختياري-

# data[].attributes.subject
اختبار (validate) صفحة الـ HTML لمشروعك -إختياري-

# data[].attributes.attachment_link.title
Using the W3C Markup Validation Service to check your HTML

# data[].attributes.headline
ضغط ملف المشروع لمستخدمي Windows

# data[].attributes.subject
ضغط ملف المشروع لمستخدمي Windows

# data[].attributes.attachment_link.title
طريقة ضغط الملفات في ويندوز بدون برامج

# data[].attributes.headline
ضغط ملف المشروع لمستخدمي Mac

# data[].attributes.subject
ضغط ملف المشروع لمستخدمي Mac

# data[].attributes.body
انقر بزر الماوس الأيمن على مجلد مشروعك -> انقر على (ضغط)
Right click on your project FOLDER -> click (compress)

# data[].attributes.headline
فورم التسليم

# data[].attributes.subject
فورم التسليم

# data[].attributes.body
https://docs.google.com/forms/d/14NUXRTAu0pvlRH5HfIi8MvmyNG9RZ6djoGK8BrOB02A/

# data[].attributes.attachment_link.description
Google Forms - create and analyze surveys, for free.

# data[].attributes.attachment_link.authors[].name
اتعلم فى ساعة

# data[].attributes.attachment_link.title
#2 كورس CSS | كيفية كتابة اكواد css

# data[].attributes.attachment_link.authors[].name
اتعلم فى ساعة

# data[].attributes.attachment_link.authors[].name
اتعلم فى ساعة

# data[].attributes.attachment_link.authors[].name
اتعلم فى ساعة

# data[].attributes.headline
المهمة اليومية 

# data[].attributes.subject
المهمة اليومية 

# data[].attributes.body
اعمل صفحة html  بسيطه عباره عن مقالة لاي موضوع وتتكون من:
• عنوان
• صور
• المقال
• فيديو (اختياري )

- المقال يكون بداخلة :
• عنزاين فرعية
• تعداد او جداول

تنسيقات الcss المطلوبة:
الالوان :
• للنص والصفحة
اطار :
• للصورة او الفيديو
• التعداد وللجداول
• تطبيق width ,higth , padding , margin
بالقياسات المناسبة لكم
• تطبيق احد انواع الdisplay

ضوابط مهمه:
• عدم استعمال الوان ساطعة جدا حتى تكون الصفحه مريحه للعين
• وضع مسافة بين الفقرات وبين العناصر الاخرى

لغه المقاله اختياري (عربي او انجليزي )

# data[].attributes.attachment_link.title
#3 تعلم ال selectors in css | class id tag

# data[].attributes.attachment_link.title
Learn CSS In Arabic 2021 - #30 - Position

# data[].attributes.attachment_link.title
Learn CSS In Arabic 2021 - #27 - Float And Clear

# data[].attributes.headline
المهمة اليومية :

# data[].attributes.subject
المهمة اليومية :

# data[].attributes.body
انشاء استبيان (form) بستخدام ال HTML ,CSS :

المتطلبات :

1- اضف رابط (Hyperlink) :

2- استخدم ال class , id بتنسيقات مختلفه

3- استخدم احد انواع او خصائص Position

4- استخدم Float, Clear

نصيحة :
- جربوا جميع ما تعلمتموه اليوم وفي اليوم السابق حتى تفهموا بصورة اعمق

# data[].attributes.attachment_link.title
Learn CSS In Arabic 2021 - #14 - Nesting

# data[].attributes.attachment_link.title
Learn CSS In Arabic 2021 - #13 - Grouping Multiple Selectors

# data[].attributes.headline
أهم موضوع بالـ CSS 📌

# data[].attributes.subject
أهم موضوع بالـ CSS 📌

# data[].attributes.attachment_link.authors[].name
اتعلم فى ساعة

# data[].attributes.headline
المهمة اليومية:

# data[].attributes.subject
المهمة اليومية:

# data[].attributes.body
تطبيق ال flexbox  او  grid  على المهمه السابقة

# data[].attributes.headline
ننهي اليوم اخر دروس الـ CSS ✅

# data[].attributes.subject
ننهي اليوم اخر دروس الـ CSS ✅

# data[].attributes.attachment_caption
#12 كورس CSS | css animation 🆚 transition 🆚 transform 🔥

# data[].attributes.attachment_link.authors[].name
اتعلم فى ساعة

# data[].attributes.attachment_link.title
#12 كورس CSS | css animation 🆚 transition 🆚 transform 🔥

# data[].attributes.attachment_link.authors[].name
اتعلم فى ساعة

# data[].attributes.attachment_caption
[Arabic] HTML, CSS Tutorials - Customize Scrollbar With CSS

# data[].attributes.attachment_link.title
[Arabic] HTML, CSS Tutorials - Customize Scrollbar With CSS

# data[].attributes.attachment_caption
Learn CSS In Arabic 2021 - #23 - Typography - Font Family

# data[].attributes.attachment_link.title
Learn CSS In Arabic 2021 - #23 - Typography - Font Family

# data[].attributes.headline
المهمة اليومية:

# data[].attributes.subject
المهمة اليومية:

# data[].attributes.body
تطبيق على المهمة السابقة ( المقالة ) :

- تطبيق الmedia query
-تغيير نوع الخط
-عمل Scrollbar
- عمل انميشن لاي عنصر

ارسلوا تطبيقاتكم كتصوير فيديو حتى يبان الانميشن 🤩

# data[].attributes.headline
اشهر اطر عمل الـ CSS  هي Bootstrap و Tailwind ايش هي وايهم تختاروا؟

# data[].attributes.subject
اشهر اطر عمل الـ CSS  هي Bootstrap و Tailwind ايش هي وايهم تختاروا؟

# data[].attributes.attachment_link.authors[].name
أكاديمية حسوب

# data[].attributes.headline
مصادر نظرية للـ CSS بالعربية 1/2:

# data[].attributes.subject
مصادر نظرية للـ CSS بالعربية 1/2:

# data[].attributes.attachment_link.readable_text
هل أنا جاهز لتعلم لغة CSS؟

قبل البدء بهذه الدورة يجب أن تكون متقن للغة HTML لأن هذه اللغة تستخدم معها بشكل أساسي.

إن لم يسبق لك أن تعلمت لغة HTML فلا تقلق أبداً لأننا أعددنا مرجع شامل لها.

ما هي لغة CSS

في البداية كلمة CSS هي اختصار لجملة Cascading Style Sheet و هي لغة تستخدم في تصميم صفحات الويب فمن خلالها يمكنك تغيير ألوان العناصر، تحديد مواقعها و أحجامها، إضافة مؤثرات لها، جعل صفحات الويب متجاوبة مع مختلف أحجام الشاشات لكي تظهر بشكل ملائم للمستخدم سواء كان يفتح الصفحة بواسطة هاتف، تابلت أو حاسوب، بالإضافة إلى الكثير من الأمور الرائعة التي ستتعلمها خطوة خطوة في هذه الدورة.

مثال

فيما يلي، قمنا بوضع صفحة تتألف من كود HTML فقط و من ثم وضعنا الصفحة نفسها بعد إضافة القليل من التحسينات عليها بواسطة CSS حتى تلاحظ الفرق.

معلومة تقنية

بشكل عام، CSS تعتبر لغة تصميم ( Style Language ) و ليس لغة برمجة ( Programming Language ) فهي تستخدم في تصميم صفحات الويب التي يتم بناؤها بواسطة HTML أو الصفحات التي يتم بناؤها بواسطة

إصدارات لغة CSS

لغة CSS يتم تطويرها باستمرارا بدءاً من ظهورها أول مرة عام 1996 و حتى يومنا هذا. المجموعة المسؤولة عن تطوير هذه اللغة تدعى World Wide Web Consortium و في العادة تختصر بكلمة

يوجد ثلاث إصدارات رسمية حتى اللحظة من لغة CSS و الفكرة من هذه الإصدارات ليس تغيير طريقة التعامل مع اللغة بل إضافة ميزات جديدة عليها.

الإصدار الأول

الإصدار CSS1 فكرته الأساسية كانت فصل كود التصميم عن كود الصفحة الذي يتم بناؤها بواسطة HTML الأمر الذي يجعلك قادر على استخدام ملف التصميم نفسه المكتوب بلغة CSS في أي صفحة تريد.

الإصدار الثاني

الإصدار CSS2 أضيف فيه خصائص جديدة حيث بات بالإمكان التحكم بأمكان العناصر، تحميل خطوط غير الخطوط الموجودة في جهاز المستخدم، إضافة تأثيرات جديدة على النصوص كالظلال، بالإضافة إلى تحديد كيف ستظهر الصفحة في حال أراد المستخدم طباعتها على ورق.

الإصدار الثالث

الإصدار CSS3 أضيف فيه خصائص تسمى Media Queries و التي من خلالها يمكنك جعل حجم الصفحة متجاوب مع مختلف أحجام الشاشات. أصبح الوصول لعناصر الصفحات أكثر مرونة، التحكم بأمكان العناصر أصبح أكبر، طرق إضافة التلوين أصبحت عديدة حيث أصبح بالإمكان دمج الألوان، أصبح بالإمكان وضع أكثر من صورة كخلفية، أصبح بالإمكان عرض مؤثرات رائعة للعناصر كجعلها تتحرك من مكانها و تدور و تتمدد و تتغير ألوانها إلخ..

أي إصدار يجب أن تتعلم؟

من بعد ما ذكرنا لك قصة الإصدارات، عليك التفكير بأن عليك تعلم لغة CSS فقط و دعك ممن يقول تعلم الإصدار الفلاني فهذا كلام خاطئ لأنك أنت بالأساس حين تكتب كود CSS لا تحدد رقم الإصدار الذي تتعامل معه و غالباً ما ستستخدم خصائص من الإصدار الأول و الإصدار الثاني و الإصدار الثالث مع بعض في أي مشروع تعمل عليه.

فوائد لغة CSS

سنذكر فوائدها تباعاً مع إيضاح معنى كل نقطة.

1- توفير الوقت

يمكنك وضع كود التصميم الخاص بك في ملف CSS و تضمينه نفسه في أي صفحة HTML تريد استخدامه فيها.

2- سرعة التحميل

حين تضع كود التصميم في ملف CSS و تضمّنه في صفحات الموقع فإن المتصفح في العادة يقوم بتحميل هذا الملف مرة واحدة فقط و يخزّن عنده. بعدها إن تم الدخول لأي صفحة مربوطة بهذا الملف فإن المتصفح يستخدم النسخة التي قام بتخزينها سابقاً بدل تحميل الملف في كل مرة.

3- سهولة التعديل

بمجرد التعديل على كود التصميم الموضوع في ملف CSS فإن كل الصفحات المربوطة به سيتم تعديل تصميمها.

4- خصائص متقدمة

بعض الوسوم في لغة HTML تحتوي على خصائص يمكن من خلالها التعديل على تصميمها و لكن هذه الخصائص تعتبر لا شيء مقارنة بالخصائص التي توفرها CSS و التي يمكن تطبيقها على جميع العناصر.

5- بناء صفحات متجاوبة

بواسطة لغة CSS يمكنك جعل تصميم الشاشة متجاوب ( Responsive ) مع مختلف أحجام الشاشات التي يتم من خلالها مشاهدة الصفحات لتظهر بشكل مناسب نسبةً لحجم الصفحة المفتوحة عليها.

6- تخصيص الطباعة على ورق

لغة CSS توفر خصائص سهلة الإستخدام يمكنك من خلالها تحديد الشكل الذي ستظهر فيه الصفحة في حال أراد المستخدم طباعتها على ورقة.

7- معايير الويب العالمية

الأفضل دائماً أن يتم وضع تصميم صفحة الويب التي تبنيها بالأساس بكود HTML في ملف CSS منفصل عن الصفحة ذاتها و من ثم تضمينه فيها فبهذه الطريقة يمكنك استخدام ملف التصميم في جميع صفحات موقعك و التعديل عليها في أي وقت تريده بكل سهولة.

لمن تم إعداد هذا المرجع؟

تم إعداد هذا المرجع ليتلاءم مع جميع الأشخاص الذين يريدون التعلم.

إذاً سواء كنت هاوياً، طالباً أو مبرمجاً، فإن هذا المرجع سيساعدك على فهم لغة CSS و الوصول إلى مستوى متقدم جداً فيها.

في الدرس التالي سنرشدك لتحميل البرامج التي يمكنك استخدامها لكتابة الكود و التي بإمكانك إستعمالها نفسها في مشاريعك الخاصة في المستقبل.

# data[].attributes.attachment_link.title
تعلم لغة CSS

# data[].attributes.attachment_link.description
في البداية كلمة CSS هي اختصار لجملة Cascading Style Sheet و هي لغة تستخدم في تصميم صفحات الويب فمن خلالها يمكنك تغيير ألوان العناصر، تحديد مواقعها و أحجامها، إضافة مؤثرات لها، جعل صفحات الويب متجاوبة مع مختلف أحجام الشاشات لكي تظهر بشكل ملائم للمستخدم سواء كان يفتح الصفحة بواسطة هاتف، تابلت أو حاسوب، بالإضافة إلى الكثير من الأمور الرائعة التي سنتعلمها خطوة خطوة في هذه الدورة.

# data[].attributes.headline
مصادر نظرية للـ CSS بالعربية 2/2:

# data[].attributes.subject
مصادر نظرية للـ CSS بالعربية 2/2:

# data[].attributes.headline
مصادر نظرية للـ CSS بالانجليزية 1/2:

# data[].attributes.subject
مصادر نظرية للـ CSS بالانجليزية 1/2:

# data[].attributes.attachment_link.readable_text
CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed.

This tutorial will teach you CSS from basic to advanced.

Start learning CSS now "

Examples in Each Chapter

This CSS tutorial contains hundreds of CSS examples.

With our online editor, you can edit the CSS, and click on a button to view the result.

CSS Example

body {
background-color: lightblue;
}

Try it Yourself "
Click on the "Try it Yourself" button to see how it works.
CSS Examples

Learn from over 300 examples! With our editor, you can edit the CSS, and click on a button to view the result.
Go to CSS Examples!
Use the Menu

We recommend reading this tutorial, in the sequence listed in the menu.

If you have a large screen, the menu will always be present on the left.

If you have a small screen, open the menu by clicking the top menu sign ☰.

CSS Templates

We have created some responsive W3.CSS templates for you to use.

You are free to modify, save, share, and use them in all your projects.
Free CSS Templates!
CSS Exercises

CSS Quiz

Test your CSS skills with a quiz.
Start CSS Quiz!
My Learning

Track your progress with the free "My Learning" program here at W3Schools.

Log in to your account, and start earning points!

This is an optional feature. You can study W3Schools without using My Learning.

CSS References

At W3Schools you will find complete CSS references of all properties and selectors with syntax, examples, browser support, and more.

Kickstart your career

Get certified by completing the course

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.headline
مصادر نظرية للـ CSS بالانجليزية 2/2:

# data[].attributes.subject
مصادر نظرية للـ CSS بالانجليزية 2/2:

# data[].attributes.attachment_link.readable_text
CSS is an acronym for "Cascading Style Sheet" and it is a style sheet or presentational language that is used to layout, format, and style documents that are written in HTML to make them look beautiful. CSS is generally used with HTML to change the style of web pages and user interfaces. You can use CSS to change the color, backgrounds, borders, paddings, margins, fonts, icons, position and various other properties of HTML elements in a web document.

This tutorial covers all the versions of CSS including CSS1,CSS2 and CSS3, and gives a complete understanding of CSS, starting from its basics to advanced concepts. This tutorial will teach you about CSS Box Model, Selectors, The cascade, Color, Sizing Units, Layout, Flexbox, Grid, Pseudo-elements and Pseudo-classes, Borders, Shadows, Focus, Functions, Gradients, Animations, Filters, Lists, Transitions, Overflow, Backgrounds, Text and typography.

CSS Examples

This tutorial teaches you every CSS concept with the help of suitable examples which you can execute in your browser itself without a need of any external HTML editor. Just to give you a little excitement about CSS, I'm going to give you a small CSS example which will change the look and feel of few HTML elements. Try to click the icon to see the output of the following code.

Below HTML & CSS code is editable where you can change the value of the code. Try to change the values of width, font-size and padding etc and then run it again to see the modified result.

<html>
<head>
   <style>
      div{ background-color: lightgrey; width:100%; padding:5px}

      h1{color: #40a944; text-align: center;}

      p{ font-family: verdana;font-size: 20px;}
   </style>
</head>
<body>
   <div>
      <h1>CSS Example</h1>
      <p>This is a paragraph.</p>
   </div>
</body>
</html>

How to learn CSS?

This is really easy to learn CSS. You can learn CSS by yourself, on your own schedule and anywhere where you have an Internet connection. We have provided this tutorial in Simple and Easy Steps alongwith appropriate examples which you can execute inline to see the result. You can make modifications in the given examples and check the result immediately. You can treat this tutorial as a full course for your CSS learning and you can complete it at your own pace, and when you're done, you'll be able to develop or customize any webpage.

Why to Learn CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.

CSS is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Web Development Domain. I will list down some of the key advantages of learning CSS:

Create Stunning Web site - CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs,variations in display for different devices and screen sizes as well as a variety of other effects.

Become a web designer - If you want to start a carrer as a professional web designer, HTML and CSS designing is a must skill.

Control web - CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

Learn other languages - Once you understands the basic of HTML and CSS then other related technologies like javascript, php, or angular are become easier to understand.

Applications of CSS

As mentioned before, CSS is one of the most widely used style language over the web. I'm going to list few of the CSS applications here:

CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.

Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.

Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.

Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.

Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.

Global web standards - Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.

Audience

This CSS tutorial will help both students as well as professionals who want to make their websites or personal blogs more attractive. We recommend reading this tutorial, in the sequence listed in the left side menu.

Today, HTML and CSS are essential languages to learn for anyone involved in the web development process including Web Developers, Web Designers, Graphic Designers, Content Managers, and Project Managers etc.

Prerequisites

Don't worry, you really don't need to be a computer geek to learn CSS. It's very easy styling and presentational language which anyone can learn on the go. You simply needs to be familiar with:

Basic word processing using any text editor.

How to create directories and files.

How to navigate through different directories.

Internet browsing using popular browsers like Internet Explorer or Firefox.

Developing simple Web Pages using HTML or XHTML.

If you are new to HTML and XHTML, then we would suggest you to go through our HTML Tutorial or XHTML Tutorial first.

# data[].attributes.attachment_link.description
CSS Tutorial - CSS is an acronym for Cascading Style Sheet and it is a style sheet or presentational language that is used to layout, format, and style documents that are written in HTML to make them look beautiful. CSS is generally used with HTML to change the style of web pages and user interfaces.

# data[].attributes.headline
تغذية بصرية وافكار✨:

# data[].attributes.subject
تغذية بصرية وافكار✨:

# data[].attributes.attachment_link.description
Free HTML and CSS code examples from codepen.io and other resources: buttons, hover effects, loaders, modal windows, text effects, menu and other.

# data[].attributes.headline
تغذية بصرية وافكار✨:

# data[].attributes.subject
تغذية بصرية وافكار✨:

# data[].attributes.body
https://www.cssdesignawards.com/

# data[].attributes.attachment_link.title
CSS Design Awards - Website Awards & Inspiration - CSS Gallery - CSSDA

# data[].attributes.attachment_link.description
The navigation of the new Ariane Group website mimics the take-off of a rocket and promises to make the user travel to earth orbit.

# data[].attributes.headline
تغذية بصرية وافكار✨:

# data[].attributes.subject
تغذية بصرية وافكار✨:

# data[].attributes.attachment_link.title
Explore 3000+ Free UI Elements: CSS & Tailwind

# data[].attributes.attachment_link.description
Library of free and customizable UI elements made with CSS or Tailwind. It’s all open-source, and it’s all free. Try it out to save you many hours spent on building & customizing UI components for your next project.

# data[].attributes.headline
تغذية بصرية وافكار✨:

# data[].attributes.subject
تغذية بصرية وافكار✨:

# data[].attributes.attachment_link.title
Browse thousands of Css images for design inspiration | Dribbble

# data[].attributes.attachment_link.description
Explore thousands of high-quality css images on Dribbble. Your resource to get inspired, discover and connect with designers worldwide.

# data[].attributes.headline
العاب تساعد في إتقان flexbox 🤩:

# data[].attributes.subject
العاب تساعد في إتقان flexbox 🤩:

# data[].attributes.headline
العاب تساعد في إتقان grid 🤩:

# data[].attributes.subject
العاب تساعد في إتقان grid 🤩:

# data[].attributes.headline
متطلبات المشروع للـ CSS

# data[].attributes.subject
متطلبات المشروع للـ CSS

# data[].attributes.body
بناء صفحه تسجيل  دخول :

- تكون بتصميمكم الخاص
- اضافة انميشن (بالشكل اللي انتوا حابين )

- (اختياري بنشوف مين الفنان اللي راح يسويها 💪🏻💫 )ربط الصفحتين ببعض من خلال زر او جمله "ليس لديك حساب ؟ سجل الان " و "هل لديك حساب ؟ تسحيل الدخول"

# data[].attributes.headline
طريقة التسليم:

# data[].attributes.subject
طريقة التسليم:

# data[].attributes.body
فقط ملف المشروع المضغوط

اخر موعد للاستلام سيكون السبت المقبل الموافق 9 september الساعة 11:59

# data[].attributes.headline
 تسليمة في الفورم التالي 

# data[].attributes.subject
 تسليمة في الفورم التالي 

# data[].attributes.attachment_link.description
Google Forms - create and analyze surveys, for free.

# data[].attributes.headline
نموذج للتسجيل

# data[].attributes.subject
نموذج للتسجيل

# data[].attributes.attachment_link.title
Responsive Registration Form Using HTML and CSS | in Arabic | انشاء نموذج التسجيل

# data[].attributes.headline
نموذج لتسجيل الدخول

# data[].attributes.subject
نموذج لتسجيل الدخول

# data[].attributes.attachment_link.title
Responsive Login Form Using HTML and CSS | in Arabic | انشاء نموذج تسجيل الدخول

# data[].attributes.body
JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. It lets us add interactivity to pages e.g. you might have seen sliders, alerts, click interactions, popups, etc on different websites — all of that is built using JavaScript. Apart from being used in the browser, it is also used in other non-browser environments as well such as Node.js for writing server-side code in JavaScript, Electron for writing desktop applications, React Native for mobile applications, and so on.

# data[].attributes.attachment_link.title
Learn JavaScript In Arabic 2021 - #003 - Setting Up Environment And Tools

# data[].attributes.attachment_link.title
Learn JavaScript In Arabic 2021 - #004 - Work With Chrome Developer Tools

# data[].attributes.attachment_link.title
Learn JavaScript In Arabic 2021 - #005 - Where To Put The Code

# data[].attributes.attachment_link.title
Learn JavaScript In Arabic 2021 - #006 - Comments And Bad Practices