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 CSS Classes and ID's
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)=# 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