015 HTML Styles

015 HTML Styles - CSS

Styling HTML with CSS
CSS stands for Cascading Style Sheets
Styling can be added to HTML elements in 3 ways:
Inline - using a style attribute in HTML elements
Internal - using a <style> element in the HTML <head> section
External - using one or more external CSS files

The most common way to add styling, is to keep the styles in separate CSS files. But, in this tutorial, we use internal styling, because it is easier to demonstrate, and easier for you to try it yourself.

التصميم HTML مع CSS

CSS لتقف على صفحات الطرز المتراصة

يمكن إضافة التصميم لعناصر HTML في 3 طرق:

     مضمنة - باستخدام خاصية style عناصر HTML
     الداخلية - باستخدام <style> عنصر في HTML القسم <head>
     الخارجية - باستخدام واحد أو أكثر من ملفات CSS الخارجية

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

CSS Syntax

CSS styling has the following syntax:

element { property:value; property:value }

Inline Styling (Inline CSS)

Inline styling is useful for applying a unique style to a single HTML element:

Inline styling uses the style attribute.

This inline styling changes the text color of a single heading:

<h1 style="color:blue">This is a Blue Heading</h1>

Internal Styling (Internal CSS)

An internal style sheet can be used to define a common style for all HTML elements on a page.

Internal styling is defined in the <head> section of an HTML page, using a <style> element:

<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>