stylesheet

Views:
 
Category: Education
     
 

Presentation Description

No description available.

Comments

Presentation Transcript

Stylesheets:

Stylesheets Two aspects of any document are content and style. The content gives the information to be presented and the style defines how the information is presented. HTML's main role is to define content . The aim of Cascading Style Sheets (CSS) is to give the page developer much more control on how a page should be displayed by all browsers . A style sheet is a set of rules that controls the formatting of HTML elements on one or more Web pages . Thus , the appearance of a Web page can be changed by changing the style sheet associated with it. There is no need to make detailed changes within the Web page to change how it looks.

Advantages of stylesheets:

Advantages of stylesheets the appearance of a Web page can be changed by changing the style sheet associated with it. There is no need to make detailed changes within the Web page to change how it looks. Separating style and content is good design and will normally produce a better and more consistent web site. We can reuse same style on multiple pages. Reduce page download size.

Rules of writing stylesheets:

Rules of writing stylesheets A style sheet rule consists of two parts. A selector that defines which HTML elements are controlled by the rule and a declaration that says what the required effect is. Thus a simple rule is: h1 { color: blue } This says that all h1 elements in a page should be displayed in blue. The selector is h1 color is the property that is to be changed, blue is the value that the property is changed to and color: blue is the declaration.

Selectors:

Selectors Select elements to apply a declared style. Selector types: Element Selectors: selects allelements of a specific type (<body>, <h1>, <p>, etc.) Class Selectors: selects allelements that belong to a given class. ID Selectors: selects a single element that’s been given a unique id. Pseudo Selectors: combines a selector with a user activated state(:hover, :link, :visited)

Element Selectors:

Element Selectors Finds all HTML elements that have the specified element type. •Example: h1{ color: blue; } Finds allelements of type <h1> and makes the text color blue.

Class Selectors:

Class Selectors Finds all elements of a given class –based on the attribute’s class value. •Syntax: . classname (Remember the dot means class selector) •Example: .class1{ font-weight: bold; background: pink; } Finds allelements whose class = “class1”and makes their font bold and their backgrounds pink.

ID Selectors:

ID Selectors Finds a single element that’s been given a unique id–based on the attribute’s id value. •Syntax: # idname (Remember the pound-sign means id selector) •Example: #text1{ border: solid red; } Finds a single element whose id = “text1”and gives it a solid red border.

Linking to an External Style Sheet :

Linking to an External Style Sheet The <LINK> tag is placed in the document HEAD . The optional TYPE attribute is used to specify a - text/ css for a Cascading Style Sheet— <head> <LINK REL= StyleSheet HREF="style.css" TYPE="text/ css " MEDIA=screen> </head>

PowerPoint Presentation:

<html> <head> <LINK REL= StyleSheet HREF="style.css" TYPE="text/ css " MEDIA=screen> </head> <h1>Introduction to style sheets</h1> <body> Testing style sheets </body> </html>

Embedding a Style Sheet :

Embedding a Style Sheet style sheet may be embedded in a document with the STYLE element: <STYLE MEDIA=screen> <!-- < BODY { background: red; color: black } P { background: yellow; color: black } .note { margin-left: 5em; margin-right: 5em } --> </STYLE>

Inlining Style :

Inlining Style Style may be inlined using the STYLE attribute. The STYLE attribute may be applied to any BODY element <P STYLE="color: red; font-family: ‘Arial’"> This paragraph is styled in red with the Arial font, if available.</P>

CSS Background Color :

CSS Background Color Html code <html> <head> <style> h4 { background-color: white; } p { background-color: #1078E1; } ul { background-color: rgb ( 149, 206, 145); } </style> <h4> This is a line with a white background</h4> <p>This is a paragraph with a background using the hexadecimal value of #1078E1</p> < ul > < li >This is an unordered list</ li > < li >with an RGB value of 149, 206, 145</ li > </ ul > </body> </html>

CSS Background Image :

CSS Background Image Background Image Repeat You can have a background image repeat vertically (y-axis), horizontally (x-axis), in both directions, or in neither direction. CSS Code: p { background-image: url (smallPic.jpg); background-repeat: repeat; } h4 { background-image: url (smallPic.jpg); background-repeat: repeat-y;} ol { background-image: url (smallPic.jpg); background-repeat: repeat-x;} ul { background-image: url (smallPic.jpg); background-repeat: no-repeat;}

PowerPoint Presentation:

<head> <style> p { background- image:url (back1.bmp);background- repeat:repeat ;} body{background- image:url (tulips.jpg);background- repeat:repeat ;} h4 { background-image: url (back2.jpg); background-repeat: repeat-y;} ol { background-image: url (back2.bmp); background-repeat: repeat-x;} </style> <body> <p> The background-image property sets one or more background images for an element. The background of an element is the total size of the element, including padding and border (but not the margin). By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. </p>

PowerPoint Presentation:

< ol > < li > repeat:The background image will be repeated both vertically and horizontally. </ li > < li >repeat-x:The background image will be repeated only horizontally.</ li > < li >repeat-y:The background image will be repeated only vertically.</ li > < li >no- repeat:The background-image will not be repeated</ li > </ ol > </body> </html>

CSS Fixed Background Image:

CSS Fixed Background Image We may choose to have your background scroll naturally, or to have it in a fixed position. <html> <head> <style> #t1{ background- image:url (m11.jpg);background- attachment:fixed } </style> </head> <form> <label for="t1">Submit Query</label> < textarea rows="25" col ="10" id="t1"></ textarea > </form> </html>

CSS Font Family :

CSS Font Family CSS Code: h4 { font-family: sans-serif; } h5 { font-family: serif; } h6 { font-family: arial ; }

CSS Font Size :

CSS Font Size You can manipulate the size of your fonts by using values, percentages, or key terms. p { font-size: 120%; } ol { font-size: 10px; } ul { font-size: x-large; } Though key terms are not very useful, the common terms are: xx-large, x-large, large, medium, small, x-small, and xx-small.

PowerPoint Presentation:

< html> <head> <style> p {font- family:arial;font - size:x -large;} body{font- family:comic sans;font-size:50px} ol {font- family:courier;font - size:xx -small; } </style> <body> <p> The background-image property sets one or more background images for an element. The background of an element is the total size of the element, including padding and border (but not the margin). By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. </p> We are illustrating fonts < br > < ol > < li > repeat:The background image will be repeated both vertically and horizontally. </ li > < li >repeat-x:The background image will be repeated only horizontally.</ li > < li >repeat-y:The background image will be repeated only vertically.</ li > < li >no- repeat:The background-image will not be repeated</ li > </ ol > </body> </html>

CSS Font Style :

CSS Font Style CSS Font-Style is where you define if your font will be italic or not. Possible key terms are the following: italic, oblique, and normal. CSS Code: p { font-style: italic; } h4{ font-style: oblique; }

CSS Font Weight :

CSS Font Weight If we want to control the weight of our font (its thickness) using font weight is the best way to go about it. font-weight can be used in multiples of 100 (e.g. 200, 300, etc) because any less and we probably will not see any difference. The values range from 100 (thin)-900 (thick). CSS Code: p { font-weight: 100; } ul { font-weight: bolder; }

PowerPoint Presentation:

<html> <head> <style> p.p1{font-size:10px;font-weight:bolder;} p.p2{font-size:100px;font-weight:bold;} </style> </head> <body> <p class="p1">we are illustrating font weight</p> <p class="p2">Changing fonts is fun</p> </body> </html>

CSS Font Variant :

CSS Font Variant CSS Font Variant allows you to convert your font to all small caps. Note: not every font supports CSS Font Variant, so be sure to test before you publish. CSS Code: p { font-variant: small-caps; }

PowerPoint Presentation:

<html> <head> <style> p.p1{font-size:50px;font-weight:bolder;color:red} p.p2{font-size:100px;font-weight:bold;color:blue;font-variant:small-caps;} </style> </head> <body> <p class="p1">we are illustrating font weight</p> <p class="p2">Changing fonts is fun</p> </body> </html>

Text Decoration :

Text Decoration text-decoration allows us to add horizontal lines above, below, or through our text. CSS Code: h4{ text-decoration: line-through; } h5{ text-decoration: overline ; } h6{ text-decoration: underline; } a { text-decoration: none; }

PowerPoint Presentation:

<html> <head> <style> h1{ text-decoration: line-through; } h5{ text-decoration: overline ; } h6{ text-decoration: underline; } </style> </head> <body> <h1>Illustrating line through text</h1> <h5>illustrating line over text</h5> <h6>illustrating line under text</h6> </body> </html>

Text Indent :

Text Indent CSS text-indent is a great way to indent your paragraphs without having to use preformatted HTML tags, (<pre>), or inserting spaces manually (& nbsp ;). You may define your indentation with exact values or percentages. CSS Code: p { text-indent: 20px; } h5 { text-indent: 30%; }

Text Align :

Text Align By default, text on your website is aligned to the left. sometimes we may require a different alignment and it can be specified using the text-align attribute. CSS Code: p { text-align: right; } h5{ text-align: justify; } H2{text- align:center ;} H3{text- align:left ;}

Text Transform :

Text Transform Text-transform is a quick way to modify the capitalization of our text. p { text-transform: capitalize; } h5{ text-transform: uppercase; } h6{ text-transform: lowercase; }

CSS White Space :

CSS White Space The white-space attribute allows you to prevent text from wrapping until you place a break < br /> into your text. CSS Code: p { white-space: nowrap ; }

CSS Word Spacing :

CSS Word Spacing With the CSS attribute word-spacing you are able to specify the exact value of the spacing between your words. Word-spacing should be defined with exact values. CSS Code: p { word-spacing: 10px; }

CSS Border:

CSS Border CSS Border, our personal favorite CSS attribute allow us to completely customize the borders that appear around HTML elements. With HTML, it used to be impossible to place a border around an element, except for the table. CSS Borders let you create customized border styles with very little work, compared to the antiquated methods of HTML.

CSS Code: :

CSS Code: p {border-style: solid; } p {border-style: double; } p {border-style: groove; } p{border-style: dotted; } p{border-style: dashed; } p {border-style: inset; } p{border-style: outset; } p{border-style: ridge; } p{border-style : hidden; }

Border Width :

Border Width To alter the thickness of your border use the border-width attribute. We may use key terms or exact values to define the border width. You must define a border-style for the border to show up. Available terms: thin, medium, thick.

Border Color :

Border Color With the use of the border-color attribute, you will be able to create customized borders to fit the flow and layout of your website. Border colors can be any color defined by RGB, hexadecimal, or key terms. table { border-color: rgb ( 100, 100, 255); border-style: dashed; }

PowerPoint Presentation:

<html> <head> <style> h1{color:blue;font-family:arial;letter-spacing:5px;} h2{ color:magenta;font-family:comic sans MS ;font-size:60px } p.c { border-style: dashed ; border-width: 5px; } h2 { border-top-style: double; border-top-color: purple; border-top-width: thick; } </style> </head> <body> <h1 >introduction</h1> <h2>Cascading style sheets</h2> <p class="c"> styling html documents </p> </body> </html>

Border-Direction:

Border-Direction If we would like to place a border on only one side of an HTML element, or maybe have a unique look for each side of the border, then use border-(direction). The direction choices are of course: top, right, bottom, and left. CSS allows you to treat each side of a border separately from the other three sides. Each side can have its own color, width, and style set. p { border-bottom-style: dashed ; border-bottom-color: yellow; border-bottom-width: 5px; } h4 { border-top-style: double; border-top-color: purple; border-top-width: thick; }

CSS List Style Type :

CSS List Style Type CSS allows you to select from a wide variety of different list item shapes. Unordered list styles: square, circle, disc (default), and none Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default), and none

CSS Code: :

CSS Code: ol { list-style-type: upper-roman; } ul { list-style-type: circle; }

CSS Lists With Images :

CSS Lists With Images CSS lists allow you to insert an image in place of the normal bullets. A good choice for a bullet image would one that is smaller than the height of your text and is a relatively simple/plain graphic. CSS Code: ul { list-style-image: url ("listArrow.gif"); } ol { list-style-image: url ("listArrow2.gif"); }

CSS List Position :

CSS List Position With CSS, it is possible to alter the indentation that takes place with your list items. CSS Code: ul { list-style-position: inside; } ol { list-style-position: outside; }

CSS Links ( Pseudo-classes ) :

CSS Links ( Pseudo-classes ) a link has four different states that it can be in. CSS allows you to customize each state link - this is a link that has not been used, nor is a mouse pointer hovering over it visited - this is a link that has been used before, but has no mouse on it hover - this is a link currently has a mouse pointer hovering over it/on it active - this is a link that is in the process of being clicked

PowerPoint Presentation:

a:link { color: white; background-color: black; text-decoration: none; border: 2px solid white; } a:visited { color: white; background-color: black; text-decoration: none; border: 2px solid white; } a:hover { color: black; background-color: white; text-decoration: none; border: 2px solid black; }

authorStream Live Help