Cascading Style Sheets popo Cascading Style Sheets CSS

Cascading Style Sheets • CSS stands for Cascading Style Sheets and is a simple

Cascading Style Sheets • A CSS rule has two main parts: a selector, and

• • • Cascading Style Sheets <html> <head> <style> Body{background-color: #b 0 c

Cascading Style Sheets • • Grouping Selectors Style to many selectors. Just separate the

Cascading Style Sheets • CSS Class • CSS classes allow to apply a style

Cascading Style Sheets • CSS ID • Allow to assign a unique identifier to

Cascading Style Sheets • • Three Ways to Insert CSS External style sheet Inline

Cascading Style Sheets • External Style Sheet • Used when the style is applied

• • • Cascading Style Sheets Css file (check. css) hr {color: brown;

Cascading Style Sheets • Internal Style Sheet • Used when a single document has

Cascading Style Sheets • Inline Styles • Style sheets by mixing content with presentation.

Cascading Style Sheets • CSS properties used for background effects: background-attachment: Specifies whether the

Cascading Style Sheets • Background-attachment • The background-attachment property specifies whether a background stays

Cascading Style Sheets • Background-color • The background-color property specifies the color of the

Cascading Style Sheets • Background-position • The background-position property specifies the position of the

Cascading Style Sheets • Background-repeat • The background-repeat property specifies whether a background image

Cascading Style Sheets • Text Color • This text is styled with some of

Cascading Style Sheets • Text Alignment • <h 1 style="backgroundcolor: red; color: blue; text-align:

Cascading Style Sheets • Space between characters • <h 1 style="backgroundcolor: red; color: blue;

• • • • Cascading Style Sheets Font Style font-style: normal; font-style: italic;

Cascading Style Sheets The four links states are: a: link - a normal, unvisited

Cascading Style Sheets <html> <head> <style type="text/css"> a: link {color: red; } /* unvisited

Cascading Style Sheets • Text Decoration • The text-decoration property is mostly used to

Cascading Style Sheets • • • List ul. a {list-style-type: circle; } ul. b

Cascading Style Sheets Table Borders border: 1 px solid black; Table Text Alignment text-align:

Cascading Style Sheets • Table Padding • To control the space between the border

Cascading Style Sheets • border-style • The border-style property defines the format of the

Cascading Style Sheets • border-width • The border-width property specifies the width of the

Cascading Style Sheets • Display and Visibility • Hiding an Element - display: none

Cascading Style Sheets • <html><body bgcolor=grey> • <div style="border: 1 px solid red; border-width:

• • • Cascading Style Sheets <body > <center> <table width="726" background=cc. jpg

• • • • • • Cascading Style Sheets <html> <style type="text/css"> a:

Cascading Style Sheets • <body topmargin="200" leftmargin="110"> • <table cellpadding="0" cellspacing="0" border="0" height="100%"> •

Cascading Style Sheets • • • • • • • <HTML> <HEAD> <style type="text/css">

Slides: 36

Download presentation

Cascading Style Sheets popo

Cascading Style Sheets • CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. • CSS is a set of style definitions; styles that describe each HTML element. HTML used only as a formatting language, responsible for the basic layout of a page. CSS is used for design of pages. popo

Cascading Style Sheets • 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. • A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets: • p {color: red; text-align: center; } • OR • p • { • color: red; • text-align: center; • } popo

• • • Cascading Style Sheets <html> <head> <style> Body{background-color: #b 0 c 4 de; } </style> </head> <body> <h 1>My CSS web page!</h 1> <p>Hello world! This is example. </p> </body> </html> popo

Cascading Style Sheets • • Grouping Selectors Style to many selectors. Just separate the selectors with a comma. h 1, h 2, h 3, h 4, h 5, h 6 { color: blue } popo

Cascading Style Sheets • CSS Class • CSS classes allow to apply a style to a given class of an element. • Class is specified by including a period (. ) before the selector name. • The syntax for declaring a Class selector is as follows: • . Class Name { property: value; . . . } • For example, • . na { color: #0000 FF; background-color: green; } • To apply this style to the HTML, using the following code: • <p class="na">This is a sample using a Class selector. </p> popo

Cascading Style Sheets • CSS ID • Allow to assign a unique identifier to an HTML element. • ID is specified by including a number sign (#) before the selector name. • The syntax for declaring an ID selector is as follows: • #[ID Name] { property: value; . . . } • For example, • #popo { color: #FF 00 FF; } • To apply this style to the HTML, using the following code: • <p id=“popo">This is a sample using an ID selector. </p> popo

Cascading Style Sheets • • Three Ways to Insert CSS External style sheet Inline style popo

Cascading Style Sheets • External Style Sheet • Used when the style is applied to many pages. • Each page must link to the style sheet using the <link> tag. • The <link> tag goes inside the head section: • <head> • <link rel="stylesheet" type="text/css" href="mystyle. css" /> • </head> • An external style sheet can be written in any text editor. • Style sheet should be saved with a. css extension. popo

• • • Cascading Style Sheets Css file (check. css) hr {color: brown; margin-left: 100; } p {margin-left: 20 px; color: red; font-size: 20 px; } body {background-color: grey; } Html file • <html><head> • <link rel="stylesheet" type="text/css" href="check. css" /> • • • </head> <body> <hr> <p >This is a sample using an ID selector. </p> </body></html> popo

Cascading Style Sheets • Internal Style Sheet • Used when a single document has a unique style. • Internal styles included in the head section of an HTML page, by using the <style> tag, like this: • <head><style type="text/css"> • hr {color: brown; margin-left: 100; } • p {margin-left: 20 px; color: red; font-size: 20 px; } • body {background-color: grey; } • </style></head> • <body> • <hr> • <p >This is a sample using an ID selector. </p> • </body></html> popo

Cascading Style Sheets • Inline Styles • Style sheets by mixing content with presentation. • To use inline styles use the style attribute in the relevant tag. • The example shows how to change the color and the left margin of a paragraph: • <p style=“color: red; margin-left: 320 px; fontsize: 50 px; “ >This is a paragraph. </p> popo

Cascading Style Sheets • CSS properties used for background effects: background-attachment: Specifies whether the background stays fixed on the screen. background-color: Specifies the color of the background-image: Specifies the image to use for the background-position: Specifies the position of the background-repeat: Specifies whether the background image should be repeated vertically or horizontally or both. popo

Cascading Style Sheets • Background-attachment • The background-attachment property specifies whether a background stays fixed on the screen. • Possible values are "fixed" (background stays in the same place when scrolling) and • "scroll" (background moves with the rest of content when scrolling). • <HTML> <HEAD> • <style> • body {background-attachment: fixed; background-image: url("2. jpg"); background-repeat: no-repeat; } • </style> </HEAD> • <BODY> <center> • <table height=900 width=200 style="background-color=red"> • <tr><td style="font-size=20 px; ">asdf<tr><td style="fontsize=20 px; ">asdf • </center></table> </BODY> • </HTML> popo

Cascading Style Sheets • Background-color • The background-color property specifies the color of the background. popo

Cascading Style Sheets • Background-position • The background-position property specifies the position of the background. • Two percentage values: The first value indicates the horizontal percentage, and the second value indicates the vertical percentage. • <HTML> <HEAD> • <style> • body { background-image: url("2. jpg"); background-repeat: no-repeat; • background-position: 10% 20%; } • </style> • </HEAD> • <BODY> • </HTML> popo

Cascading Style Sheets • Background-repeat • The background-repeat property specifies whether a background image repeats itself. • The default is "repeat", which means repeating the image in both the x- and y- directions. • You can also specify no-repeat. • <HTML> <HEAD> • <style> • body { background-image: url("2. jpg"); backgroundrepeat: no-repeat; } • </style> • </HEAD> <BODY> • </BODY></HTML> popo

Cascading Style Sheets • Text Color • This text is styled with some of the text formatting properties. • The text-align, text-transform, and color, aligned, and the space between characters is specified. • <h 1 style="backgroundcolor: red; color: blue; ">popo

Cascading Style Sheets • Text Alignment • <h 1 style="backgroundcolor: red; color: blue; text-align: center; ">popo • Text Transformation • <h 1 style="backgroundcolor: red; color: blue; text-align: center; texttransform: uppercase; ">popo • text-transform: lowercase; • text-transform: capitalize; popo

Cascading Style Sheets • Space between characters • <h 1 style="backgroundcolor: red; color: blue; text-align: center; texttransform: capitalize; • letter-spacing: 6; ">popo

• • • • Cascading Style Sheets Font Style font-style: normal; font-style: italic; Font Size font-size: 40 px; font-size: 30 px; The font-family: verdana; font-family: arial; Font-weight specifies the thickness of the font. Font weight can go from 100 to 900, with 900 being the thickest. font-weight: 100; font-weight: 900; popo

Cascading Style Sheets 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 • • popo

Cascading Style Sheets <html> <head> <style type="text/css"> a: link {color: red; } /* unvisited link */ a: visited {color: green; } /* visited link */ a: hover {color: white; background-color: red; } /* mouse over link */ a: active {color: blue; } /* selected link */ </style> </head> <body> <p><b><a href="default. php" target="_blank">This is a link</a></b></p> • </body> • </html> • • • popo

Cascading Style Sheets • Text Decoration • The text-decoration property is mostly used to remove underlines from links: • Example • a: link {color: red; text-decoration: none; } /* unvisited link */ • a: visited {color: green; text-decoration: none; } /* visited link */ • a: hover {color: white; background-color: red; textdecoration: underline; } /* mouse over link */ • a: active {color: blue; text-decoration: none; } /* selected link */ popo

Cascading Style Sheets • • • List ul. a {list-style-type: circle; } ul. b {list-style-type: square; } ol. c {list-style-type: upper-roman; } ol. d {list-style-type: lower-alpha; } popo

Cascading Style Sheets Table Borders border: 1 px solid black; Table Text Alignment text-align: right; The vertical-align property sets the vertical alignment, like top, bottom, or middle: • <table style="border: 1 px solid black; "> • <tr><td style="height: 150 px; verticalalign: center; • ">popo • • • popo

Cascading Style Sheets • Table Padding • To control the space between the border and content in a table, use the padding property on td and th elements: • Example • td{padding: 15 px; } • padding-left: 5 px; • padding-right: 30 px; • padding-bottom: 40 px;

Cascading Style Sheets • border-style • The border-style property defines the format of the border. The table below shows the possible values • <table style="border: 2 px dashed red; "> • <table style="border: 2 px dotted red; "> popo

Cascading Style Sheets • border-width • The border-width property specifies the width of the border. The value can be "thin", "medium", "thick", or a numerical width. • <table style="border: 2 px double red; borderwidth: 10 px; "> popo

Cascading Style Sheets • Display and Visibility • Hiding an Element - display: none or visibility: hidden • Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". • visibility: hidden; • visibility: none; popo

Cascading Style Sheets

Cascading Style Sheets • <html><body bgcolor=grey> • <div style="border: 1 px solid red; border-width: 3 px; borderstyle: dashed; margin-left: 50; margin-top: 100; backgroundcolor: green; "> • checking • <table height=50 border=0> • <tr><td><img src=2. jpg width=100 height=130></img> • <td>checking • </table> • </div> • <div style="border: 1 px solid green; border-width: 3 px; borderstyle: dashed; margin-left: 150; margin-top: 0; color: red; "> • checking • </div> • </body> • </html> popo

• • • Cascading Style Sheets <body > <center> <table width="726" background=cc. jpg > <tr><td><table><tr > <td style="padding: 0 px; border: 6 px white dashed; "><img src=c 1. jpg width="136" height="105"> <td width="580" background=cc. jpg><b><font size=18 color=white>popo pp </table> </center> </body> </html> popo

• • • • • • Cascading Style Sheets <html> <style type="text/css"> a: link {color: white; background-color: gray; text-decoration: none; } /* unvisited link */ a: visited {color: white; background-color: gray; text-decoration: none; } /* visited link */ a: hover {color: white; background-color: red; text-decoration: none; } /* mouse over link */ a: active {color: white; background-color: blue; text-decoration: none; } /* selected link */ </style> <body background=3. jpg> <center> <table width="726" background=cc. jpg > <tr><td><table><tr><td style="padding: 0 px; border: 6 px white dashed; "><img src=c 1. jpg width="136" height="105"> <td width="580" background=cc. jpg><b><font size=18 color=white>popo pp <tr><td colspan=5 > <table><tr> <td><a href=#> <b><font size=4> home </a> <td><a href=#> <b><font size=4> Family </a> <td><a href=#> <b><font size=4> Education </a> <td><a href=#> <b><font size=4> Photo </a> <td><a href=#> <b><font size=4> Contact </a> </table> </center> </body> </html> popo

Cascading Style Sheets • <body topmargin="200" leftmargin="110"> • <table cellpadding="0" cellspacing="0" border="0" height="100%"> • <td valign="bottom"> • <table border=0 cellspacing=0 cellpadding=0 > popo

Cascading Style Sheets • • • • • • • <HTML> <HEAD> <style type="text/css"> a: link {color: white; background-color: gray; text-decoration: none; } /* unvisited link */ a: visited {color: white; background-color: gray; text-decoration: none; } /* visited link */ a: hover {color: white; background-color: red; text-decoration: none; } /* mouse over link */ a: active {color: white; background-color: blue; text-decoration: none; } /* selected link */ </style> </HEAD> <BODY > <center> <table border=0 cellspacing=0 cellpadding=0 width=600> <tr><td width=600 background=bb. jpg colspan=3> <tr><td> <tr><td colspan=10 > <table border=0 ><tr > <td ><a href=#> <b><font size=4> home </a> <td><a href=#> <b><font size=4> Family </a> <td><a href=#> <b><font size=4> Education </a> <td><a href=#> <b><font size=4> Photo </a> <td><a href=#> <b><font size=4> Contact </a> <td><a href=#> <b><font size=4> Family </a> <td><a href=#> <b><font size=4> Education </a> <td><a href=#> <b><font size=4> popo </a> </table> </BODY> </HTML> popo