Post on 26-Feb-2016
description
CSE
CASCADING STYLE SHEETS CSS
Faculty of Computer Science and Engineering
CSEINTRODUCTIONCascading 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.
CSEINTRODUCTIONThe 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.
CSECREATING CSSInline 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.
CSECREATING CSSInline CSS: used within HTML tag using the
STYLE property. <tagName Style=”property1:value1;property2:
value2;…”>Content
</tagName>
CSECREATING CSSEx:<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}
CSECREATING CSSEmbedded 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.
CSECREATING CSS<head><style>tagName {property1: value 1; property2: value 2
…}</style></head>Exp:
<style type=“text/css”>Body{background-color:#ff0000;}
</style>
CSECREATING 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>
CSECREATING CSSLinked 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
CSECREATING CSSStyle.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}
CSECREATING CSSApply .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>
CSECREATING CSSExample:
CSEApply a style for many HTML pages
<head><link rel="stylesheet" type="text/css"
href="styles.css" /></head>
CSEApply 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>
CSECSS Classes and ID'sClasses 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).
CSECSS Classes and ID'sA class is created, as explained above, with the
use of a period and a codeword for the class.A ID is specify “#” symbolAn 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.
CSE
Style.css
CSECSS Classes and ID's
CSECSS Classes and ID's
CSECSS Classes and ID's
CSEStyles for Colors and backgroundscolor : [value of color]background-color : [value of color]background-image : url([ file name])background-repeat : [types for repeat]
CSEStyles for Colors and backgroundsbackground-position:[value of points]
CSEStyles for Colors and backgroundsbackground
CSEStyle for Fontfont-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] :
CSEStyle for Texttext-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]
CSEStyle for LinksStates 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>
CSEStyles for bulletsStyles for bullets:
List-style:circle chấm tròn rổngList-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ườnglist-style-image: url (images/bullet.gif)}
CSEStyles for Margin and PaddingStyles 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.
CSEStyles for Margin and PaddingThe 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.
CSEStyles for Borderborder-width : [value];
border-color : [value of color]
CSEStyles for Borderborder-style :[value]
border :[width style color ]
CSEStyles 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; }
CSEStyles for position of elementsposition:[absolute,relative];top: [value];left: [value]; bottom: [value];right: [value];
CSEStyles 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; }
CSEStyles for position of elements
CSEColor Table of HTML and CSS The principle of color:
Any color is combined by three main color: red, green and blue.
CSEColor Table of HTML and CSSUse 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
CSEColor Table of HTML and CSS