CSS M hiwa ahamad aziz www.raparinweb.fulba.com Raparin univercity 1
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 2 Of 21
HTML has evolved a *lot* over the years - as computers and networks have gotten faster. 1995 3 Of 21 2007 Source: www.yahoo.com
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; } <p id= para1 > sample text</p> 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;} <p class= center > sample text1</p> <p class= center > sample text2</p> 9 Of 21
Class Selector all p elements with class="center" will be centeraligned 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 <link> tag. The <link> tag goes inside the head section <head> <link href="mystyle.css" rel="stylesheet" type="text/css" /> </head> 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 <style> tag An example: <head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head> 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: <p style="color:sienna;margin-left:20px;">this is a paragraph.</p> 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, h2,p {color:#00ff00;} Text Alignment h1 {text-align:center;} p.date {text-align:right;} Text Decoration a {text-decoration:none;} h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;} remove underlines from links 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, fontfamily, background, etc.). The four links states are: Example 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 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
Table Borders 22 Of 21 CSS Tables table {border: 1px solid black;} Table Width and Height table { width:100%;} th{ height:50px; } Table Text Alignment Table Padding Table Color td{text-align:right; vertical-align:bottom;} td{padding:15px;} table, td, th{border:1px solid green;} th{background-color:green;color:white;}
23 Of 21 Source: http://www.lesliefranke.com/files/reference/csscheatsheet.html
Two kinds of elements Inline - affects how text looks strong, span, a,input,etc Block affects Whole of line Paragraphs, div, h1 - h6, p, div, blockquote, ul, ol, form,etc CSS can change a tag from inline to block #navigation li { display: inline; inline-block; Width : 20px; } 24 Of 21
CSS Box Model height and width properties size the block element margin properties define the space around the block element border properties define the borders around a a block element padding properties define the space between the element border and the element content background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page 25 Of 21 http://reference.sitepoint.com/css/boxmodel
.trapped { height: 100px; width: 200px; margin: 20px; border: 5px solid yellow; background:red; padding: 20px; font-family:arial; color:orange; font-size:20px; } <p class= trapped > I am trapped in a glass case of emotion which is 100px high and 200px wide. </p> The Box Model 1 9 0 1 5 0 20 1 4 0 1 0 0 5 20 26 Of 21
.trapped { height: 80px; width: 50px; }.trapped2 { height: 80px; width: 50px; border: 5px solid yellow; padding: 10px; } <p class="trapped"> One</p> <p class="trapped2"> Two</p> 27 Of 21 Border, padding, and margin are additive.
Position and visibility Position can have be Relative... Position compared to parent Absolute --- Position compared to Beginning page Fixed --- Position compared to Beginning page visibility can have be Hidden visibility 28 Of 21
Position and visibility <head> <style> div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21; } </style> </head> <body> <h2>position: absolute;</h2> output <div class="relative">this div element has position: relative; </div> <div class="absolute">this div element has position: absolute;</div> </body> </html 29 Of 21
Display and overflew Display: Specifies how an element should be displayed -inline :An inline element does not start on a new line and only takes up as much width as necessary. Examples : <span>, <a> <img> -inline-block : this case with width be block. -block : An block element start on a new line. -none : nothing display. Overflow : Clip the top/bottom edges of the content inside the <div> element - if it overflows the element's content area: Hidden : The content is clipped - and no scrolling mechanism is provided. Scroll : The content is clipped and a scrolling mechanism is provided Visible : The content is not clipped, and it may be rendered outside the content box 30 Of 21
Display <head> <style> li { display: inline; } </style> </head> <body> <p>display a list of links as a horizontal menu:</p> <ul> <li><a href="/html/default.asp" target="_blank">html</a></li> <li><a href="/css/default.asp" target="_blank">css</a></li> <li><a href="/js/default.asp" target="_blank">javascript</a></li> </ul> </body> </html> Output Display a list of links as a horizontal menu: HTML CSS JavaScript 31 Of 21
overflew <style> div.scroll { width: 100px; overflow: scroll; } div.hidden { width: 100px; overflow: hidden; } </style> <body> <p>overflow:scroll</p> background-color: #00FFFF; height: 100px; background-color: #00FF00; height: 100px; <div class="scroll">you can use the overflow property when you want to have better control of the layout. The default value is visible.</div> <p>overflow:hidden</p> <div class="hidden">you can use the overflow property when you want to have better control of the layout. The default value is visible.</div> </body> output 32 Of 21