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

CSE CASCADING STYLE SHEETS CSS Faculty of Computer Science and Engineering

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

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

CSE 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 and 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.

CSE CREATING CSS  Inline CSS: used within HTML tag using the STYLE property. Content

CSE CREATING CSS  Ex: Tuoi tre {remove the underline of individual link}

CSE CREATING CSS  Embedded CSS:  Performs the same tasks as the inline style tags. However, the coding is placed between the and 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.

CSE CREATING CSS tagName {property1: value 1; property2: value 2 …}  Exp: Body{background-color:#ff0000;}

CSE CREATING CSS H1,H2 { color: #8B008B ; font-family: Arial } body {background-color: #ADFF2F;} This is the H1 element This is the H2 element This is the H3 element with its default style as displayed in the browser

CSE 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

CSE CREATING CSS  Style.css file 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}

CSE CREATING CSS  Apply.css file for HTML pages.  Place a link to your style.css file within HTML page between and tags  Syntax:<Head> </Head>

CSE CREATING CSS  Example:

CSE Apply a style for many HTML pages

CSE Apply a lot of style sheets for a HTML page

CSE 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).

CSE 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, and and many others.  Define tables by using classes and ID's in CSS.

CSE Style.css

CSE CSS Classes and ID's

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

CSE Styles for Colors and backgrounds  background-position:[value of points]

CSE Styles for Colors and backgrounds  background

CSE 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] :

CSE 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]

CSE Style for Links  States of hyperlinks  a:link  a:visited  a:active  a:hover 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;}

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

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

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

CSE Styles for Border  border-width : [value];  border-color : [value of color]

CSE Styles for Border  border-style :[value]  border :[width style color ]

CSE 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; }

CSE Styles for position of elements  position:[absolute,relative];  top: [value];  left: [value];  bottom: [value];  right: [value];

CSE 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; }

CSE Styles for position of elements

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

CSE 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

CSE Color Table of HTML and CSS

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

Similar presentations

Presentation on theme: "CSE CASCADING STYLE SHEETS CSS Faculty of Computer Science and Engineering."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

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

Similar presentations

Presentation on theme: "CSE CASCADING STYLE SHEETS CSS Faculty of Computer Science and Engineering."— Presentation transcript:

Similar presentations

About project

Feedback