Ia css

CSS
‫التنسيق‬ ‫أساليب‬

What is CSS?
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles were added to HTML 4.0 to solve a
problem
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files

CSS Syntax
• A CSS rule set consists of a selector and a
declaration block:
• The selector points to the HTML element you
want to style.
• The declaration block contains one or more
declarations separated by semicolons.
• Each declaration includes a property name and a
value, separated by a colon.

CSS Selectors
• CSS selectors allow you to select and
manipulate HTML element(s).
• There are 3 types of selectors namely:
1. Element Selector
2. Id Selector
3. Class Selector

Element Selector
• The element selector selects elements based
on the element name.
• You can select all <p> elements on a page like
this: (all <p> elements will be center-aligned,
with a red text color) :
p {
text-align: center;
color: red;
}

id Selector
• The id selector uses the id attribute of an
HTML tag to find the specific element.
• An id should be unique within a page, so you
should use the id selector when you want to
find a single, unique element.
• To find an element with a specific id, write a
hash character, followed by the id of the
element.

Cont….id Selector
• The style rule below will be applied to the
HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}

Class Selector
• The class selector finds elements with the
specific class.
• The class selector uses the HTML class
attribute.
• To find elements with a specific class, write a
period character, followed by the name of the
class.

Cont….Class Selector
• In the example below, all HTML elements with
class="center" will be center-aligned:
.center {
text-align: center;
color: red;
}
• You can also specify that only specific HTML elements
should be affected by a class. eg:
p.center {
text-align: center;
color: red;
}

Grouping Selectors
• To group selectors, separate each selector
with a comma. eg:
h1, h2, p {
text-align: center;
color: red;
}

Ways to Insert CSS
• There are three ways of inserting a style sheet:
1. External style sheet
2. Internal style sheet
3. Inline style

External Style Sheet
• With an external style sheet, you can change
the look of an entire Web site by changing just
one file.
• The style sheet file must be saved with a .css
extension.
• Each page must include a link to the style
sheet with the <link> tag.

Cont…External Style Sheet
• The <link> tag goes inside the head section.
eg:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>

Internal Style Sheet
• An internal style sheet should be used when a
single document has a unique style.
• You define internal styles in the head section of
an HTML page, inside the <style> tag, like this:
<head>
<style>
body {
background-color: linen;
}
</style>
</head>

Inline Style Sheet
• An inline style loses many of the advantages of a
style sheet (by mixing content with presentation).
Use this method sparingly!
• To use inline styles, add the style attribute to the
relevant tag. The style attribute can contain any
CSS property.
• The example shows how to change the color and
the left margin of a h1 element:
<h1 style="color:blue;margin-left:30px;">This is a
heading.</h1>

Ia css

More Related Content

What's hot

Similar to Ia css

More from osman do

Recently uploaded

Ia css