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 لتقف على صفحات الطرز المتراصة
يمكن إضافة التصميم لعناصر 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>
External Styling (External CSS)
External style sheet are ideal when the style is applied to many pages.
With external style sheets, you can change the look of an entire web site by changing one file.
External styles are defined in an external CSS file, and then linked to in the <head> section of an HTML page:
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
