1 / 36

Understanding Cascading Style Sheets (CSS): Basics and Usage

Cascading Style Sheets (CSS) is a fundamental styling language used to define styles for HTML elements, enhancing the design and layout of web pages. CSS rules are composed of selectors and declarations, where selectors target HTML elements, and declarations consist of properties and their corresponding values. Styles can be applied externally, internally, or inline, allowing flexibility in web design. This introduction covers CSS syntax, grouping selectors, class and ID selectors, and how to apply styles effectively within HTML documents.

dotty
Télécharger la présentation

Understanding Cascading Style Sheets (CSS): Basics and Usage

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cascading Style Sheets • popo

  2. 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

  3. 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

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

  5. Cascading Style Sheets • Grouping Selectors • Style to many selectors. • Just separate the selectors with a comma. • h1,h2,h3,h4,h5,h6 { color: blue } • popo

  6. 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:#0000FF;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

  7. 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:#FF00FF; } • To apply this style to the HTML, using the following code: • <p id=“popo">This is a sample using an ID selector.</p> • popo

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

  9. 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 .cssextension. • popo

  10. Cascading Style Sheets • Css file (check.css) • hr {color:brown;margin-left:100;} • p {margin-left:20px;color:red;font-size:20px;} • 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

  11. 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:20px;color:red;font-size:20px;} • body {background-color:grey;} • </style></head> • <body> • <hr> • <p >This is a sample using an ID selector.</p> • </body></html> • popo

  12. 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:320px;font-size:50px;“ >This is a paragraph.</p> • popo

  13. Cascading Style Sheets • CSS properties used for background effects: • popo

  14. 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=20px;">asdf<tr><td style="font-size=20px;">asdf • </center></table> </BODY> • </HTML> • popo

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

  16. 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> • </BODY> • </HTML> • popo

  17. 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"); background-repeat: no-repeat;} • </style> • </HEAD> <BODY> • </BODY></HTML> • popo

  18. 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. • <h1 style="background-color:red;color:blue;">popo • popo

  19. Cascading Style Sheets • Text Alignment • <h1 style="background-color:red;color:blue;text-align:center;">popo • Text Transformation • <h1 style="background-color:red;color:blue;text-align:center;text-transform:uppercase;">popo • text-transform:lowercase; • text-transform:capitalize; • popo

  20. Cascading Style Sheets • Space between characters • <h1 style="background-color:red;color:blue;text-align:center;text-transform:capitalize; • letter-spacing:6;">popo • popo

  21. Cascading Style Sheets • Font Style • font-style:normal; • font-style:italic; • Font Size • font-size:40px; • font-size:30px; • The font-family • 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

  22. 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

  23. 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

  24. 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;text-decoration:underline;} /* mouse over link */ • a:active {color:blue;text-decoration:none;} /* selected link */ • popo

  25. 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

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

  27. 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:15px;} • padding-left:5px; • padding-right:30px; • padding-bottom:40px;

  28. 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:2px dashed red;"> • <table style="border:2px dotted red;"> • popo

  29. 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:2px double red;border-width:10px;"> • popo

  30. 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

  31. Cascading Style Sheets

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

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

  34. 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: 0px; border: 6px white dashed; "><imgsrc=c1.jpg width="136" height="105"> • <td width="580" background=cc.jpg><b><font size=18 color=white>popopopo pp • <tr><td colspan=5 > • <table><tr> • <td><a href=#> <b><font size=4>&nbsp; home &nbsp;</a> • <td><a href=#> <b><font size=4>&nbsp; Family &nbsp; </a> • <td><a href=#> <b><font size=4>&nbsp; Education &nbsp;</a> • <td><a href=#> <b><font size=4>&nbsp; Photo &nbsp;</a> • <td><a href=#> <b><font size=4>&nbsp; Contact &nbsp;</a> • </table> • </table> • </center> • </body> • </html> • popo

  35. 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

  36. 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>&nbsp; • <tr><td width=600 background=bb.jpg colspan=3>&nbsp; • <tr><td> <tr><td colspan=10 > • <table border=0 ><tr > • <td ><a href=#> <b><font size=4>&nbsp; home &nbsp;</a> • <td><a href=#> <b><font size=4>&nbsp; Family &nbsp; </a> • <td><a href=#> <b><font size=4>&nbsp; Education &nbsp;</a> • <td><a href=#> <b><font size=4>&nbsp; Photo &nbsp;</a> • <td><a href=#> <b><font size=4>&nbsp; Contact &nbsp;</a> • <td><a href=#> <b><font size=4>&nbsp; Family &nbsp; </a> • <td><a href=#> <b><font size=4>&nbsp; Education &nbsp;</a> • <td><a href=#> <b><font size=4>&nbsp; popo &nbsp;</a> • </table> • </table> • </BODY> • </HTML> • popo

More Related