1 / 39

CASCADING STYLE SHEETS CSS

CASCADING STYLE SHEETS CSS. Faculty of Computer Science and Engineering. INTRODUCTION.

meadow
Download Presentation

CASCADING STYLE SHEETS CSS

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 SHEETSCSS Faculty of Computer Science and Engineering

  2. INTRODUCTION • Cascading Style Sheets enable you to control the style and layout of a web page. They will enable you to specify link styles, fonts, margins, tables, colors, sizes, alignments and much more throughout your entire web page. • They can also be used to create a template like style sheet (stored within a separate file) that can be used throughout your web site. You can simply link to your style sheet within each of your web pages and have the ability to update the styles for your entire web site with just one file.

  3. INTRODUCTION • The Benefits of Using Cascading Style Sheets • CSS will save you a great deal of time. • You can make changes to the CSS file, they will automatically update all of the pages on your web site.

  4. CREATING CSS • Inline CSS [Inline style]: • Added to your standard HTML tags. • Embedded CSS [Internal style]: • An embedded CSS is exactly as it sounds. The CSS code is actually placed within the HTML web page between the <HEAD> and </HEAD> tags. • Linked CSS [External style]: • A linked style sheet, on the other hand, is a completely separate document that is linked to within a web page.

  5. CREATING CSS • Inline CSS: used within HTML tag using the STYLE property. <tagName Style=”property1:value1;property2: value2;…”> Content </tagName>

  6. CREATING CSS • Ex: <body style="background-color: #FF0000"> <h1 style=“color:red;text-align:center”> <p style = “color:aqua ; font- style:italic, text- align:center”> <A HREF="http://www.tuoitre.com.vn" STYLE="TEXT-DECORATION: NONE"> Tuoi tre </A> {remove the underline of individual link}

  7. CREATING CSS • Embedded CSS: • Performs the same tasks as the inline style tags. However, the coding is placed between the <HEAD> and </HEAD> tags within your HTML page. You can specify how your entire page will appear including links, fonts, text and more, simply by using embedded style tags.

  8. CREATING CSS <head> <style> tagName {property1: value 1; property2: value 2 …} </style> </head> • Exp: <style type=“text/css”> Body{background-color:#ff0000;} </style>

  9. CREATING CSS <HTML> <HEAD> <STYLE TYPE=”text/css”> H1,H2 { color: #8B008B; font-family: Arial } body {background-color: #ADFF2F;} </STYLE></HEAD> <BODY> <H1>This is the H1 element</H1> <H2>This is the H2 element</H2> <H3>This is the H3 element with its default style as displayed in the browser</H3> </BODY></HTML>

  10. CREATING CSS • Linked CSS:creating a file that defines specific styles. This CSS file can be used throughout your entire web site to specify everything from body styles and headings to paragraphs and HTML tables. • Creating a Linked CSS: • Create a file in Notepad with all of attributes which want to format • Save this file with extension .css

  11. CREATING CSS • Style.cssfile Body{font-family: Arial; font-size:12px} H1{font-family:Georgia; font-size:16px; font-weight: bold; color: blue} P{font-weight: normal; color:blue}

  12. CREATING CSS • Apply .css file for HTML pages. • Place a link to your style.css file within HTML page between <HEAD> and </HEAD> tags • Syntax: <Head> <Link Rel=StyleSheet Type=”text/css” Href=”StyleSheet file.css”> </Head>

  13. CREATING CSS • Example:

  14. Apply a style for many HTML pages <head> <link rel="stylesheet" type="text/css" href="styles.css" /> </head>

  15. Apply a lot of style sheets for a HTML page <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <link rel="stylesheet" type="text/css" href="styles2.css" /> </head>

  16. CSS Classes and ID's • Classes and ID's are used much the same way in CSS. • Classes are often used to identify groups of selectors, while ID's are used to identify one selector or element. • Class is used for plain HTML documents, while ID's are usually used for documents that contain JavaScript or Dynamic HTML (DHTML).

  17. CSS Classes and ID's • A class is created, as explained above, with the use of a period and a codeword for the class. • A ID is specify “#” symbol • An class is specified in “.” symbol. • Classes or ID's can be used a lot of HTML tags such as <i></i>, <u></ul> and <p></p> and many others. • Define tables by using classes and ID's in CSS.

  18. Style.css

  19. CSS Classes and ID's

  20. CSS Classes and ID's

  21. CSS Classes and ID's

  22. Styles for Colors and backgrounds • color : [value of color] • background-color : [value of color] • background-image : url([ file name]) • background-repeat : [types for repeat]

  23. Styles for Colors and backgrounds • background-position:[value of points]

  24. Styles for Colors and backgrounds • background

  25. Style for Font • font-family :[ arial, verdana, sans-serif]; {tên font} • font-style : [italic, normal, oblique ] • font-variant : [normal, small-caps] • font-weight : [normal, bold] • font-size : [?pt, ?em,?%, ?px] • font [font-style | font-variant | font-weight | font-size | font-family] :

  26. Style for Text • text-indent:[khoảng cách text (px)] • text-align:[left,right,center,justify(canh lề)] • text-decoration:[underline,overline,line-through] • letter-spacing :[px] • text-transform :[capitalize, uppercase, lowercase, none]

  27. Style for Links • States of hyperlinks • a:link • a:visited • a:active • a:hover <style type="text/css">A:link {text-decoration: none}A:visited {text-decoration: none}A:active {text-decoration: none}A:hover {font-size:24; font-weight:bold; color: red;}</style>

  28. Styles for bullets • Styles for bullets: List-style:circle chấm tròn rổng List-style: disc chấm tròn đenList-style: square chấm đen vuôngList-style: decimal đánh số ả rậpList-style: lower-alpha thứ tự alphaList-style: upper-alpha thứ tự alpha chữ in hoaList-style: upper-roman số la mã hoaList-style: lower-roman số la mã thường list-style-image: url (images/bullet.gif)}

  29. Styles for Margin and Padding • Styles Margin and Padding: The margin clears an area around an element (outside the border). It includes top, right, bottom, and left margin which can be changed independently using separate properties.

  30. Styles for Margin and Padding • The padding clears an area around the content (inside the border) of an element. It includes top, right, bottom, and left margin which can be changed independently using separate properties.

  31. Styles for Border • border-width : [value]; • border-color : [value of color]

  32. Styles for Border • border-style :[value] • border :[width style color ]

  33. Styles for position of elements: Ex: h1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } p { border-width: 1px; border-style: dashed; border-color: blue; } ul { border-width: thin; border-style: solid; border-color: orange; }

  34. Styles for position of elements • position:[absolute,relative]; • top: [value]; • left: [value]; • bottom: [value]; • right: [value];

  35. Styles for position of elements #box1 { position:absolute; top: 50px; left: 50px; } #box2 { position:absolute; top: 50px; right: 50px; } #box3 { position:absolute;bottom:50px; right: 50px; } #box4 { position:absolute;bottom:50px;left:50px; }

  36. Styles for position of elements

  37. Color Table of HTML and CSS • The principle of color: • Any color is combined by three main color: red, green and blue.

  38. Color Table of HTML and CSS • Use hex #rrggbb • rr: red • gg : green • bb : blue • White RGB=(255,255,255)=#FFFFFF • Black RGB=(0,0,0)=#000000 • Yellow RGB=(255,255,0)= #FFFF00 • Red RGB=(255,0,0)=#FF0000 • Blue RGB=(0,0,255)=#0000FF

  39. Color Table of HTML and CSS

More Related