Posts Tagged CSS

Hear Web part 1 (intro)


هل يمكننا تصفح مواقع من خلال جهاز الراديو مثلا؟؟
ان كانت الاجابة لا ستكون مقنعة جدا اما لو كانت نعم فكيف سنرى الكلام والصور والالوان واللنكات مثلا؟؟
السؤال الاصعب هو ماذا على المصمم ان يفعل ليجعلك تتصفح موقع بدون شاشة؟؟

sound


الحقيقة ان الاجهزة الصوتية تستطيع تصفح المواقع اذا توافر بها اتصال بالانترنت ومتصفح يناسب الجهاز مثل الاجهزة التى يستخدمها المحرومون من البصر ولكن هل سيستخدم المصمم ادوات اخرى لتصميم المواقع الصوتية؟؟ الاجابة لا نفس ادوات التصميم تستخدم
HTML , CSS , javascript
المتصفحات تقوم بتحميل الاتش تى ام ال ثم قراءته للمستخدم والمتصفحات الرائدة فى هذا المجال هما
Opera 9 , firevox not firefox


دا لنك احصائيات عن البراوزرات على نظم التشغيل المختلفة التى بتدعم المواقع الصوتية
http://www.codestyle.org/css/media/aural-BrowserSummary.shtml


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


عليك كتابة ملف سى اس اس واحد لاعطاء تنسيقات لكل الاجهزة

@media


تقوم هذه الخاصية باعطاء التنسيق المناسب حسب نوع الجهاز المتصفح وتأخذ القيم
aural , braille , embossed , handheld , print , projection , screen , tty , tv


@media screen{
/*هنا توضع التنسيقات الخاصة باجهزة الكمبيوتر العادية*/
}
@media handled{
/*هنا توضع التنسيقات الخاصة بالاجهزة المحمولة*/
}
@media aural{
/*هنا توضع التنسيقات الخاصة بالاجهزة الصوتية التى نتحدث عنها*/
}


تستطيع من خلال كتابة تنسيقات داخل
aural
ان تتحكم فى طريقة قراءة الصوت للمستخدم واعدادتها

1- 3D sound Effects


تستطيع عمل مؤثرات صوتية ثلاثية الابعاد على البرنامج

3D Sound Effects

3- User Interaction


تستطيع التحكم فى طريقة التفاعل الصوتى بين الانسان والبرنامج مثل التفاعل الموجود فى الايفون

interaction

3- Speak Controlling


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

Sound control

..التفاصيل فى الجزء القادم


ماكان فيه خطأ فمنى ومن الشيطان وماكان فيه توفيق فمن عند الله

aHmEd DaIf

, , , , , , , , , , , , , , , , , , , , , , ,

4 Comments

التصميمات المرسلة فى المسابقة – قيّم معانا

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

Group 1

DevRock_design1

Download


Group 1

DevRock_design2

Download


Group 2

Grendizer_design1

Download


Group 1

Grendizer_design2

Download


Group 3

Yousif_design1

Download


Group 3

Yousif_design2

Download


Group 4

Sara_design1

Download


Group 4

Sara_design2

Download


هناك اعمال اخرى لم يتم عرضها .. سيتم فحصها وعرضها ان شاء الله ولكن خارج المنافسة علما بان هناك تصميمات تم ارسالها تخالف قواعد المسابقة ولكن اصحابها لهم من الفريق كل الاحترام والتقدير على المجهود وحفاظا لحقوق الفكرية لهم سيتم نشر اكوادهم ايضا ولكن بعد انتهاء واعلان الفائز فى المسابقة (إبداع)… سيتم التقييم خلال 42 ساعة من الان من خلال حضراتكم ومن خلال لجنة التحكيم ايضا وبعدها سيتم الاعلان عن الفريق الفائز فى المسابقة بناء على التقييم من اللجنة ومن أرائكم ان شاء الله .. بالتوفيق 🙂

, , , , , , ,

6 Comments

مسابقة إبداع لتصميم صفحات الويب

بسم الله الرحمن الرحيم

متابعى فريق ديف ميكس وأنشطته الاعزاء .. نقدم لكم نشاط جديد وهذه المرة بمشاركتكم انتم وهى مسابقة إبداع فى تصميم صفحات الويب باستخدام XHTML+HTML5+CSS+CSS3 مع مراعاة عدم استخدام أدوات أخرى مثل ال JavaScript ويكمن ابداعكم فى هذه المسابقة فى اختياركم للافكار المعبرة عن التصميم وسوف يتم التقييم على الافكار قبل الادوات من قبل مصممين ذات كفاءة عالية سوف يعلن عنهم لاحقا لذا ارجو التركيز فى هذه الاعمال التى سوف تقدم.

مسابقة إبداع

قواعد المسابقة:

للمسابقة قواعد بسيطة لو تم الالتزام بها سوف تعم الفائدة على الجميع باذن الله، وهى كالتالى:

1 – اهمها الالتزام بمواعيد تسليم التصميمات التى سوف ينوه عنها واى تأخير لن يتم قبول هذه التصميمات للاسف فهناك died-line للمسابقة لا يمكن تعديه.

2 – كان هناك قاعدة بالزام العمل فى فريق ولكن .. طلب الكثير بعدم التحتم عليها حيث ان هناك الكثير بمفردهم .. لذا فمن الممكن ان تشترك منفردا ولكن من حقك تكوين فريق لا يتعدى ال 4 افراد.

3 – ارسال الاعمال فور الانتهاء منها فى سرية تامة الى devmix2011@gmail.comحتى يتم عرضها على لجنة التحكيم دون عرضها على العامة لتقيمها قبل انتهاء ميعاد المسابقة الاصلي.. وعند الانتهاء سوف يتم عرضها مفتوحة المصدر كما فى المثال التالى:

fci_design1

Download Design

Designed By:

  • IIIIIIIIIIIIIIIIIIIII
  • IIIIIIIIIIIIIIIIIIIII
  • IIIIIIIIIIIIIIIIIIIII
  • IIIIIIIIIIIIIIIIIIIII

Evaluation From Here

يستطيع الجميع انزال التصميم بملفاته من Download Design ويقوم بعدها بوصضه التقييم فى مكان التقييم المبين فى لينك Evaluation واتنى يكون التقييم فعلا على الاعمال بعيدا عن المجاملات والصداقات وسوف تعرض كل الاعمال فى موضوع واحد ان شاء الله مفتوحة المصدر.. اما عن اعلان الفائز فسوف يكون بعد يوم من التقييمات واهداء الجوائز فى أول ايفينت للفريق ان شاء الله فى القريب العاجل ليكون تكريم امام الجميع.


لجنة التحكيم:

عندما فكرت فى عمل لجنة لتحكيم الاعمال المقدمة وتقييمها .. قررت اختيار احسن المصممين على الاطلاق المعروفين لدى الكثير منكم فلجنة التحكيم تتكون من 3 افراد هم:

مهندس محمود متولى – مهندس UI/UX فى شركة كلود نينرز.

مهندس تميم ابراهيم – مهندس تصميم صفحات ويب ومدير شركة TameemGroup .

مهندس مدحت داود – مطور صفحات ويب ومنظم المسابقة.

تم الاتفاق على ان التقييم لن يكون فقط على جمال التصميم او كفاءة التول بل سيتوسع التقييم الى الفكرة الابداعية التى وراء التصميم .. فكن مبدعا 🙂


نظام المسابقة: {المطلوب فى المسابقة}

المطلوب الاول: مطلوب عمل تصميم فى احد المواضيع التالية:

-تصميم موقع لمدينة علمية

-تصميم موقع لمكتبة

-تصميم موقع لصفحة شخصية لاي من الشخصيات (مهندس -دكتور – مدرس – بياع سندوتشات :))

المطلوب الثانى: مطلوب عمل تصميم من ابداعك .. فكرة ابداعية من خيالكم تنفذ بشكل يجعلنا عندما ننظر اليها نستطيع ان نستشف الفكرة من التميم ولاى غرض تم.


طريقة تسليم الأعمال:

كما نوهت من قبل سيتم ارسالها على devmix2011@gmail.com ولكن الان انوه عن ما سيتم ارساله ، مطلوب وضع كل الملفات فى ملف واحد مضغوط zip/rar وارساله وتسميته باسم المجموعة المقدمة واذا كان التصميم الاول واسم المجموعة مثلا FCI سيتم تسمية الملف fci_design1.zip وارساله على الفور وبالطبع لو كان الديزاين الثاني سيكون fci_design2.zip بهذه الطريقة يكون الموضوع اكثر تنظيما، وسوف يتم ارسال الاعمال من المتحدث باسم الفريق الذي سيسجل فريقه فقط وليس مطلوب ان كل فرد فى الفريق ان يسجل.


طريقة التسجيل:

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

التسجيل مفتوح من الان وحتى غدا 2 سبتمبر 2011 الساعة 12 منتصف الليل وبعدها يتم اغلاق التسجيل وتبدأ المسابقة ولمدة 4 ايام باذن الله.

نتمنى من الله ان يجعلنا سبب فى ان نساعد الناس فى العلم والتعلم .. بالتوفيق 🙂

, , , , , , ,

5 Comments

CSS3 – Enriching Forms

بسم الله الرحمن الرحيم

استكمالا لما بدأناه كفريق ديف ميكس سنتابع اليوم موضوعا لا يخلي منه اي موقع … فعندما ندخل علي احد الموقع اما ان تسجل الدخول في الموقع اذا كان لك حساب عليه او اما ان تدخل علي صفحه التسجيل حتي تصبح عضوا فيه … ولكننا اليوم سنتناول الشكل العام لتسجيل الدخول وهسنتناول ان شاء الله تلك العنوانين

HTML Code
HTML Only Demo
Styling the Form Element
Adding CSS3 to the Form Element
Styling the Input Elements
Adding CSS3 to the Input Element
Styling the Button
Adding CSS3 to the Submit Button

🙂 والان نبدا العمل

Writing The HTML

HTML Code

HTML اول شئ لابد من عمل صفحه التسجيل باستخدام لغه

<form>
 <label>Username:</label> 
<input type="text"name="username"/>
 <label>Password:</label>
 <input type="password"name="password"/>
 <input type="submit"value="Submit" name="submit" class="submit"/>
</form>

HTML هذا الكود بسيط جدا وسهل الفهم اذا كنت تعلم البسيط عن لغه

HTML Only Demo

سيكون شكل الصفحه كما هوه مبين

Writing The CSS

والان حانت اللحظه … سوف نعطي هذه الصفحه بعضا من اكسير الحياه وسنفضي عليها من ابداعنا الخاص ولكن في البدايه سنضيف هذا الكود حتي نحدد مكان الفورمه وايضا الخلفيه الخاصه بالصفحه

* {
        margin: 0px;
        padding: 0px;outline: none;
    }

    body {
        background: #4E0085;
    }

Styling the Form Element

سنبدا الان من اعلي اي اسفل .. بمعني اننا سنتناول تنسيق هذا النموذج / الفورمه ونحدد لها الطول

والعرض وسيكون الكود بهذا الشكل

form {
    width: 250px;     padding: 20px;  border: 1pxsolid#270644;
}

وسيكون بهذا الشكل

Adding CSS3 to the Form Element

والان هسنقوم باضافه الكود السابق الي العنصر وهو الفورمه مع بعض التأثرات الخفيفه

form {
 width: 250px;
 padding: 20px;
 border: 1pxsolid #270644;
 /*** Adding in CSS3 ***/
 /*** Rounded Corners ***/
 -moz-border-radius: 20px;
 -webkit-border-radius: 20px;
 /*** Background Gradient - 2 declarations one for Firefox and one for Webkit ***/
 background: -moz-linear-gradient(19% 75%90deg,#4E0085, #963AD6);
 background:-webkit-gradient(linear, 0%0%, 0% 100%, from(#963AD6), to(#4E0085));
 /*** Shadow behind the box ***/
 -moz-box-shadow:0px
 -5px300px #270644;
 -webkit-box-shadow:0px
 -5px300px #270644;
}

وسيكون الشكل كالاتي

Styling the Input Elements

text box والان سوف نتناول تنسيق العنصر الخاص بــادخال النصوص
 نحن نريد ان نغير الخلفيه الخاصه بمربع ادخال النص وايضا تكبير حجمه وتغير مكانه قليلا

وسيكون الكود بهذا الشكل

input {
    width: 230px;
    background: #8a33c6;
    padding: 6px;
    margin-bottom: 10px;
    border-top: 1pxsolid#ad64e0;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
}

Adding CSS3 to the Input Element

 transitions سنقوم باضافه الكود السابق ومع بعض الاضافات التي تفضي قليلا من الجمال وهي
وسيكون الكود بها الشكل

input
{
 width: 230px;
 background: #8a33c6;
 padding: 6px;
 margin-bottom: 10px;
 border-top: 1pxsolid #ad64e0;
 border-left: 0px;
 border-right: 0px;
 border-bottom: 0px;
 /*** Adding CSS3 ***/
 /*** Transition Selectors - What properties to animate and how long ***/
 -webkit-transition-property: -webkit-box-shadow, background;
 -webkit-transition-duration: 0.25s;
 /*** Adding a small shadow ***/
 -moz-box-shadow: 0px 0px2px #000;
 -webkit-box-shadow: 0px 0px2px #000;
}

ولكن سيتم تفعيل هذه الخاصيه السباق ذكرها عندما يقف مؤشر الفاره علي مكان ادخال النصوص
text boxes

وسيكون الكود بهذا الشكل

input:hover 
{
-webkit-box-shadow: 0px 0px4px#000;
background: #9d39e1;
}

وسيكون الشكل النهائي كما هو مبين 

Styling the Button

submit يتبقي لنا تنسيق شكل الزر

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

وسيكون الكود بهذا الشكل

input.submit {
 width: 100px;
 color: #fff;
 text-transform: uppercase;
 text-shadow: #0001px 1px;
 border-top: 1pxsolid #ad64e0;
 margin-top: 10px;
}

والشكل النهائي سيكون كما هو مبين

Adding CSS3 to the Submit Button

والان ستم اضافه الكود السابق الي الزر الخاص به وهذا شكل الكود

input.submit {
 width: 100px;
 color: #fff;
 text-transform: uppercase;
 text-shadow:#0001px 1px;
 border-top: 1pxsolid #ad64e0;
 margin-top: 10px;
 /*** Adding CSS3 Gradients ***/
 background: 
-webkit-gradient(linear, 0% 0%, 0%100%, from(#963AD6), to(#781bb9));
 background: -moz-linear-gradient(19% 75%90deg,#781bb9, #963AD6);
}

وسيكون الشكل النهائي كما هوه مبين

وبهذا يكون قد اتهينا من شرح كل جزء واضافه التاثيرات عليه وكما قلنا افضينا عليه بعض من اكسير الحياه … في النهايه هذا هوه كود الصفحه بالكامل لتجربته علي جهازه

😀 … ولكن نحن نتتظر منك رايك في الموضوع وتجربتك الشخصيه للكود

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>this activity belong to Devmix team </title>
	<meta name="description" content="this activity belong to Devmix team.">
	<style type="text/css">
	* {
		margin: 0px;
		padding: 0px;outline: none;
	}

	body {
		background: #4E0085;
	}

	form {
		border: 1px solid #270644;
		width: 250px;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		background:  -moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6);
		background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#4E0085));
		margin:50px auto;
		padding: 20px;
		-moz-box-shadow:0px -5px 300px #270644;
		-webkit-box-shadow:0px -5px 300px #270644;
	}

	label {
		font-size: 12px;
		font-family: arial, sans-serif;
		list-style-type: none;
		color: #fff;
		text-shadow: #000 1px 1px;
		margin-bottom: 10px;
		font-weight: bold;
		letter-spacing: 1px;
		text-transform: uppercase;
		display: block;
	}

	input {
	  -webkit-transition-property: -webkit-box-shadow, background;
	  -webkit-transition-duration: 0.25s;
	  	padding: 6px;
		border-bottom: 0px;
		border-left: 0px;
		border-right: 0px;
		border-top: 1px solid #ad64e0;
		-moz-box-shadow: 0px 0px 2px #000;
		-webkit-box-shadow: 0px 0px 2px #000;
		margin-bottom: 10px;
		background: #8a33c6;
		width: 230px;
	}

	input.submit {
	  -webkit-transition-property: -webkit-box-shadow, background;
	  -webkit-transition-duration: 0.25s;
		width: 100px;
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
		background:  -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);
		color: #fff;
		text-transform: uppercase;
		text-shadow: #000 1px 1px;
		border-top: 1px solid #ad64e0;
		margin-top: 10px;
	}

	input.submit:hover {
		-webkit-box-shadow: 0px 0px 2px #000;
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
		background:  -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);
	} 

	input.submit:active {
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#781bb9), to(#963AD6));
		background:  -moz-linear-gradient(19% 75% 90deg,#963AD6, #781bb9);
	}

	input:hover {
		-webkit-box-shadow: 0px 0px 4px #000;
		background: #9d39e1;
	}
	</style>
</head>
<body>
<form action="">

		<label>Username:</label>
			<input type="text" name="username" />
		<label>Password:</label>
			<input type="password" name="password" />
			<input type="submit" value="Submit" name="submit" class="submit" />
</form>	

</body>
</html>

🙂

شكرا لحسن المتابعه ولا تنسي ان تعبر لنا عن رايك سواء بالسلب او

بالايجاب

كتب هذا المقال / محمد جبريل

, , ,

2 Comments

CSS–Advanced Topics

Alsalamo alekom .. we will continue what we started which is css reviews … so u have to check this links befour we start CSS Basics || and CSS Basics | Now we will talk about something advanced about CSS .. our topics will be

  • CSS – Cursor

  • CSS – Position

  • CSS – Layer

  • CSS – Display

CSS – Cursor

we will change cursor icon when we do action like “we are over text” we have many cursors like :

  • default – Display the normal mouse cursor

  • iconwait – The mouse icon to represent the computer “thinking”

  • crosshair – A cross hair reticletext – An “I” shaped icon that is displayed when selecting textpointer

  • A hand icon that you see when you hover over an
    HTML link-help

  • A question mark (usually)

Lets Try it now .. Just make Style tag and copy this :

 p { cursor: wait }
 h4 { cursor: help }
 h5 { cursor: crosshair }

and make your mouse over each one and see what happended 🙂 … and tell me

CSS Position

You will be able to manipulate the exact position of your HTML elements

Position Relative

Relative positioning changes the position of the HTML element relative to where it normally appears. If we had a header that appears at the top of our page, we can make it abit to right or to left , up , down or mix of them … i like “mix” remeber me “DevMix” 🙂 so the css code will be :

 

 h3 { 
 position: relative; 
 top: 15px;
 left: 150px;
 }
 p { 
 position: relative; 
 left: -10px;
 }

See this to understand more :

BeforeCSS    After Positioning

Position Absolute

With absolute positioning, you define the exact pixel value where the specified HTML element will appear. The point of origin is the top-left of the browser’s viewable area, so be sure you are measuring from that point.

CSS Code :

 h3 { 
 position: absolute; 
 top: 50px;
 left: 45px;
 }
 p{ 
 position: absolute; 
 top: 75px;
 left: 75px;
 }

CSS –  Layers

In CSS, each element is given a priority. HTML elements that appear later in the source code than others will have a higher priority by default. If there are two overlapping CSS positioned elements, the element with the higher priority will appear on top of the other. To manually define a priority, set the z-index value. The larger the value, the higher the priority the element will have.

CSS Code:

 h4{ 
 position: relative; 
 top: 30px;
 left: 50px;
 z-index: 2;
 background-color: #336699;
 }

 p { 
 position: relative; 
 z-index: 1; 
 background-color: #FFCCCC;
 }

CSS – Display

Display Block and Inline

are you bored from using <br/> tag ?? yes me too .. what will we so if we have ablock of links … wil we using <br/> tag alot and alot ?? no css will make it easy for you let’s have an example :

CSS Code:

 a { display: block; }
 p { display: inline; }

Display:

Developers Mix
Developers Mix

Developers Mix

Developers Mix

Developers Mix

    These Links     belong   to     DevMix blog

 

Display None (Hidden)

At times you may want to hide pieces of content, while at other times you would wish to show it. With the use of JavaScript, you can create collapseable menus.This is a simple example of how to hide an element.

CSS Code:

p.show { display: block }
p.hide { display: none; }

HTML Code:

<p class="show">This paragraph is displayed correctly because 
it has a display value of "block".</p>

<p class="hide">This paragraph is hidden because 
it has a display value of "none". Why am I even
writing anything in here?</p>

Display:

This paragraph is displayed correctly because it has a
display value of “block”.

Finally

I hope add something new to ur knowleadge ,,, thanks for reading …
we wait your feedback ….. ohhh Dont Forget we will make articles
about CSS3 … Don’t Miss it 😀

By : Mohammed Gabrail

, , , , , ,

6 Comments

CSS Basics ||

 

Background

  • Background Color
  • Background Image

Demo:
<html>

<style>
p{background-color:gray;}
h3{background-image: url(images.jpg);}
</style>
<body>
<p> DevMix Team </p>
<h3>pla pla pla pla pla…… </h3>
</body>
</html>

Text

  • Text Color
  • Text Decoration
  • Text Alignment
  • Text Indentation
  • Text Transformation

Demo:
<html>

<style type=”text/css”>
p{color: maroon;}
h1{text-decoration: underline;}
h2{text-align: center;}
h3{text-transform: uppercase;}
h4{text-indent:30px;}
</style>
<body>
<p>DevMix Team</p>
<h1>i love Orange :)</h1>
<h2>Hello! </h2>
<h3>mohamed </h3>
<h4>CSS Styling </h4>
</body>
</html>

Fonts

  • Font Family
  • Font Size
  • Font Style

Demo:
<html>
<style type=”text/css”>
p.family{font-family: Arial,sans-serif;}
p.size{font-size: 40px;}
p.style{font-style:italic;}
</style>

<body>
<p> Font Family ,arial ,sans_serif </p>
<p>Font Size with pixels </p>
<p>Font Style Italic </p>
</body>
</html>

Lists

  • List Type
  • List Image

Demo:
<html>

<style type=”text/css”>
ol.m{list-style-type: lower-alpha;}
ul.n{list-style-type: square;}
ul.i{list-style-image: url(images2.jpg)}
</style>
<body>
<ul>
<li>first </li>
<li>second</li>
</ul>
<ol>
<li>pla pla pla </li>
<li>pla pla pla pla pal </li>
</ol>
<ul>
<li> image </li>
</ul>
</body>
</html>

Links

  • a:link \\ unvisited link
  • a:visited \\ visited link
  • a:hover \\ mouse over link
  • a:active \\ selected link

Demo:
<html>

<style type=”text/css”>
a:link{color:blue;}
a:visited{color: red;}
a:hover{color: maroon;}
a:active{color: gray;}
</style>
<body>
<a href=”www.google.com” >Google</a>
</body>
</html>
</body>
</html>
By: Mohamed Ibrahim 🙂

,

3 Comments