1 CSS محمد احمدی نیا

2 Of 21 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  Completely restyle a web site with only a few changes to your CSS code  External Style Sheets are stored in CSS files زبانهای برنامه سازی وب

3 Of 21 CSS Syntax  A CSS rule has two main parts: a selector, and one or more declarations:  The selector is normally the HTML element you want to style.  Each declaration consists of a property and a value.  The property is the style attribute you want to change. Each property has a value. زبانهای برنامه سازی وب

4 Of 21 CSS Syntax  A CSS declaration always ends with a semicolon  declaration groups are surrounded by curly brackets: p {color:red;text-align:center;} To make the CSS more readable, you can put one declaration on each line, like this: p { color:red; text-align:center; } زبانهای برنامه سازی وب

5 Of 21 CSS Syntax  CSS Comments  A CSS comment begins with "/*", and ends with "*/", like this: p { text-align:center; /*This is another comment*/ color:black; font-family:arial; } زبانهای برنامه سازی وب

6 Of 21 CSS Id and Class  CSS allows to specify selectors called "id" and "class". زبانهای برنامه سازی وب

7 Of 21 Id Selector  The id selector is used to specify a style for a single, unique element.  The id selector uses the id attribute of the HTML element, and is defined with a "#". #para1 { text-align:center; color:red; } sample text زبانهای برنامه سازی وب

8 Of 21 Class Selector  The class selector is used to specify a style for a group of elements.  This allows to set a particular style for many HTML elements with the same class.  The class selector uses the HTML class attribute, and is defined with a ".".center {text-align:center;} sample text1 sample text2 زبانهای برنامه سازی وب

9 Of 21 Class Selector  all p elements with class="center" will be center- aligned p.center {text-align:center;} Do NOT start a class name with a number زبانهای برنامه سازی وب

10 Of 21 CSS How To...  Three Ways to Insert CSS  External style sheet  Internal style sheet  Inline style زبانهای برنامه سازی وب

11 Of 21 External Style Sheet  Is ideal when the style is applied to many pages.  You can change the look of an entire Web site by changing one file.  Each page must link to the style sheet using the tag.  The tag goes inside the head section زبانهای برنامه سازی وب

12 Of 21 External Style Sheet  An external style sheet can be written in any text editor.  The file should not contain any html tags.  External style sheet should be saved with a.css extension.  An example: hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} زبانهای برنامه سازی وب

13 Of 21 Internal Style Sheet  An internal style sheet should be used when a single document has a unique style.  Define internal styles in the head section of an HTML page, by using the tag  An example: hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} زبانهای برنامه سازی وب

14 Of 21 Inline Styles  Inline style loses many of the advantages of style sheets by mixing content with presentation.  Use this method sparingly!  To use inline styles use the style attribute in the relevant tag. The style attribute can contain any CSS property.  An example: This is a paragraph. زبانهای برنامه سازی وب

15 Of 21 CSS Background  CSS properties used for background effects:  background-color: specifies the background color of an element body {background-color:#b0c4de;}  background-image: specifies an image to use as the background body {background-image:url('paper.gif');}  background-repeat: images can be repeated only horizontally or vertically, or they will look strange body {background-repeat:repeat-x; } body {background-repeat:no-repeat; }  background-position: Specifies the position of the image body {background-position:right top; } زبانهای برنامه سازی وب

16 Of 21 CSS Text  Text Color body {color:blue;} h1 {color:#00ff00;}  Text Alignment h1 {text-align:center;} p.date {text-align:right;}  Text Decoration a {text-decoration:none;} remove underlines from links h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;}  زبانهای برنامه سازی وب

17 Of 21 CSS Text  Text Transformation  It can be used to turn everything into uppercase or lowercase letters p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;}  Text Indentation  specify the indentation of the first line of a text p {text-indent:50px;} زبانهای برنامه سازی وب

18 Of 21 CSS Font  Font Family: is set with the font property p{font-family:"Times New Roman", Times, serif;}  Font Style: is mostly used to specify italic text p.normal {font-style:normal;} p.italic {font-style:italic;}  Font Size: Sets the size of the text. h1 {font-size:40px;} زبانهای برنامه سازی وب

19 Of 21 CSS Links  Links can be styled with any CSS property (e.g. color, font- family, background, etc.).  The four links states are:  a:link - a normal, unvisited link  a:visited - a link the user has visited  a:hover - a link when the user mouses over it  a:active - a link the moment it is clicked  Example a:link {color:#FF0000; text-decoration:none;} /* unvisited link */ a:visited {color:#00FF00; background-color:#B2FF99;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */ زبانهای برنامه سازی وب

20 Of 21 CSS Lists  The CSS list properties allow you to:  Set different list item markers for ordered lists ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;}  Set different list item markers for unordered lists ul.a {list-style-type: circle;} ul.b {list-style-type: square;}  Set an image as the list item marker ul { list-style-image: url('sqpurple.gif'); } زبانهای برنامه سازی وب

21 Of 21 CSS Tables  Table Borders table {border: 1px solid black;}  Table Width and Height table { width:100%;} th{ height:50px; }  Table Text Alignment td{text-align:right; vertical-align:bottom;}  Table Padding td{padding:15px;}  Table Color table, td, th{border:1px solid green;} th{background-color:green;color:white;} زبانهای برنامه سازی وب