Css

R4R provide basic CSS Tutorials concept with CSS Examples .
Through R4R you can develop CSS programming concept. R4R provide CSS Interview Questions with answers.R4R provide CSS Languages study materials in easy way.
CSS Tutorials
1.1 1.2 CSS Basic Tutorials CSS Tutorials 21 days
CSS Interview Questions with Answers

2.1 2.2 2.3 2.3 CSS Subjective Questions with Answers CSS Interview Questions with Answers CSS Objective Questions And Answers FAQS
What is CSS:
CSS is an acronym which means Cascading Style Sheets.A style sheet is made up of style rules that tell a browser how to present a document. As the name suggests, CSS is a special purpose stylesheet language and it helps in defining the format of presentation for any document that has been written in a markup language like the HTML. Mostly, CSS is used to define the presentation of HTML and XHTML documents. CSS gives great style to your web pages that are written in any markup language. CSS is a syntax used in the markup languages HTML and XHTML and has limited use in XML documents. HTML and XHTML are the programming languages most widely used and they are supported by most search engines. CSS is used in almost every aspect of todays website designs. History of CSS: Since the beginning of style sheet usage in the 1970s, it has evolved through widespread study and testing. It wasnt until the mid 1990s that CSS was introduced to the World Wide Web Consortium (W3C). At that time, W3C members became involved in its development, as well. In the late 1990s, CSS was ready to go LIVE and in December 1996, the syntax became official .Even with the tremendous support from the W3C, Internet Explorer 3 was released in 1996 with very little support for the highly useful style sheet syntax .Three years later, Internet Explorer 5 was released and had a nearly 100% compatibility and support for CSS . As with any new internet language, however, bugs and inconsistencies were major obstacles .Introducing different variations of CSS , such as CSS1, CSS2 and CSS3, aided in weeding out the properties that browsers simply wouldnt support. Creating a standard for CSS and browser compatibility was mandatory for a successful syntax and style tool. By using variations from all forms of CSS, CSS2.1 was created in late July 2007. By 2008, the latest and greatest version of Internet Explorer, IE8, allowed for full support of the CSS2.1 syntax in its highest quality web standards mode. There are Three Ways To Use CSS: There are three ways to use Cascading Style Sheets: inline, embedded, and external/linked style sheets. I'll briefly explain each of them below.
Inline: If you just want to apply formatting to a small piece of text you can use inline styles. Syntax: "<h3 style="font-weight: bold">this will be bold "
Embedded: Embedded style sheets are put between the <head> </head> tags on every page that you want to use style sheets on. This is how they look like: "<HEAD> <STYLE TYPE="text/css">  </STYLE> </HEAD> " External: Remember how I said that you can use a single style sheet site-wide, and then change all of your pages by editing one file? This is done with external style sheets, which look something like this: "<HEAD> <LINK REL="STYLESHEET" HREF="/PATH/SHEET.CSS TYPE="TEXT/CSS"> </HEAD> " Note: The SHEET.CSS file would then contain all the style-sheet code which would be applied to any page that calls it using the code above.
This technique can save you a lot of work. If you, for example, would like to change the background color of a website with 100 pages, a style sheet can save you from having to manually change all 100 HTML documents. Using CSS, the change can be made in a few seconds just by changing one code in the central style sheet. Working of CSS:
Every Cascading Style Sheet (whether it is contained in a .css file, or embedded in the head element of an HTML document) is a series of instructions called statements. A statement does two things: 1. it identifies the elements in an HTML document that it affects 2. it tells the browser how to draw these elements By elements, I mean paragraphs, links, list items and so on. In technical HTML terms, an element is anything marked up inside HTML tags. The part of a statement which identifies page elements is called a selector. Selectors select page elements. The part of a statement which tells a browser how selected elements should be drawn is called the declaration. A declaration can contain any number of properties, the individual pieces of style to be applied to the selected element. Advantage of CSS: 1. 2. 3. 4. 5. Improved Search Engine Results Design Separated from Content Displayed on Various Media Compatibility with Browsers Superior styles to HTML
Disadvantage of CSS 1. Inconsistent Browser Support
2. Larger Initial time Commitment 3. Some elements override each other, thus the page may not turn out as you expect it to. 4. Depending on the size of the file, External CSS may increase load time. 5. Bugs CSS Basic Tutorials
basics CSS (CASCADING STYLE SHEET) Tutorials An Introduction to Cascading style sheet Evolution of Cascading style sheet Types of Cascading Style Sheet Cascading Style Sheet ID and Class Examples of styling Summary
AN INTRODUCTION TO CASCADING STYLE SHEET

Cascading style sheet (CSS) is a language used to describe the presentation criteria of mark up language documents. CSS is recent addition to html. CSS are the way of controlling the way the browser displays the page. the most common function of CSS is to style the web pages written in Html and Xhtml. It consists the basic rules which tells the browser how to represent the document. primarily CSS was designed to separate the document content from document presentation using layouts ,font, colors. CSS will be a welcome feature that will save lot of time spend on repetitive styling of document as it defined set of rules .CSS allows same mark up page to be presented in different styles. If there will be more than one rules to apply to a particular element then CSS specifies the priority schemes to determine which particular rule is applied. CSS specifications are maintained by world wide web consortium (w3c). The popularity of CSS design tool increased day by day as a first tool to design web site. Prior to CSS [an error occurred while processing this directive]
HTML mark up contains presentational attributes used for styling like font colors ,alignment, borders etc. prior CSS too much adding of style attributes to html document ,makes document complex . therefore CSS is developed to over come the problem of html formatting. According to CSS there are three ways of adding style to the markup document.... Inline sheets, Embedded style sheet, Link style sheet. By using these style sheets CSS defines how the html elements are to be displayed. styles are normally saved in external. css files. External files enables you to change the appearance and layout of all the pages in a web site ,by editing single line. One of the goal of CSS is to allow users control over presentation. someone who find difficult to read existing text in red color can change the color of text as per his/her requirement. user can view the website in its browsers default setting.
EVOLUTION OF CASCADING STYLE SHEET

The basic purpose of cascading style sheet (CSS) is to separate the content of web document( which are written in any mark up language )from its presentation (that is written using css). Cascading Style Sheets were developed as a means for creating a consistent approach to providing style information for web documents. Since the development of SGML (Standard Generalized Markup Language), style sheets were used. Style Sheets start developing from the 1970S, however, later Cascading Style Sheets were created with a purpose of drawing a distinct line between the content of the document and the presentation of the document. Cascading Style Sheets became more popular as the HTML grew along the way.
.CSS evolved in the lights of expert web developers who incorporated their demanding features in it. w3c introduced nine cascading style sheets out of which two became the foundation cascading style sheets .those two style sheets were CHSS (cascading html style sheet) and stream based style sheet proposal (SSP) a language has resemblance to today's CSS. CSS are currently supported by Netscape navigator and Microsoft window3.0 and above.
BENEFITS OF CASCADING STYLE SHEET

CSS gives great style to your web pages that are written in any markup language. The main purpose of CSS is to define the presentation of html document CSS gives you level of control over various presentation characteristics of the document . CSS improve content accessibility, and provide better flexibility. It allows to present HTML and XHTML documents in more than one style. One of the goal of CSS is to allow users control over presentation. Enable multiple page formatting and reduce complexity
[an error occurred while processing this directive] Fast loading of web pages CSS-based web pages will speed up the loading of your pages considerably because the styles are all contained in one style sheet. Small file size The page design with CSS are small in size as compared to the HTML pages because mostly all styles are come in one style sheet. Great Accessibility CSS provide very good accessibility, even it provide voice accessibility of HTML and XHTML documents. Save time CSS stores snippets in special file from where they can be easily access to design the web pages .no need to design separate
tables .this saves the time of developer. Reduce complexity CSS makes you to get rid of lot of extra html codes, therefore your site looks good and cleaner. this makes it easy to alter the code if you want to edit it Separate content from presentation. An external style sheet contains all the style that you need to design a web site ,if you need to do change in your web site you just use that pre defined style sheet save in external file. SYNTAX OF CSS CSS syntax has two main parts one selector and one or two declaration. the selector is normally the html document you want to style and declaration is consists of a property and a value. The property is the style attribute you want to change. each property has a value. syntax. p {color: black ; font _size:15px;}
Explanation..
here p is the paragraph which is a selector color and font_ size are the properties black and 15px are the values of properties . CSS declarations are always end with semicolons(;) and declaration is surrounded with curly braces({}). CSS document contains comment which are help in the explanation of document .CSS comments start with /* and with */ like /* this is a CSS comment*/.CSS has three types style sheets which are used to insert CSS to the html document.
above syntex is mainly used in external and internal style sheets. these will be discussed in next chapter.
TYPES OF CASCADING STYLE SHEET
Cascading Style Sheet will give you much more control over the text on the page. cascading style sheet is the new feature that save lots of time of designer to style the page. Designer can give the size of font in numbers or in pixels and control the spacing .Three ways are used to insert CSS in web page. These are three types of style sheets which helps you to style your web page. 1.Inline style . 2.Embedded style sheet. 3.Linked style sheet
INLINE STYLE Inline style may be applied to any html element and modified only the specific instances of the element to which you applied it. to use inline [an error occurred while processing this directive] you add a style attribute to specific instance of element. using the following syntax. <ELEMENT STYLE property :value; property: value;... ></element> <html> <head> <title> style samples</title> </head> <h1 style ="color: red; font _size: 25px; font-name: Times Roman;"> This is CSS document</h1> </html> Inline style are used rarely because they are as much work as using the font tag.
EMBEDDED STYLE SHEET To use embedded style sheet style block is defined which should be placed in the head section of the document. This block consists of set of style rules where each rule is defines the style of html element or group of element. <html> <head> <title>Embedded style sheet example</title> <style type="txt/css"> </style> </head> </html> The required attribute of style element is type and it should be set to "txt/css" there are two main parts of embedded style sheet 1.selector - any html tab/element is the selector ,for every selector the property will be set. e.g..<p>,<h>,<b>, 2. property must have a value (declaration may be one or two) h1 {color :red;} body {color: black;} here body and h are the two selectors ,color is the property of two selectors ,red and black are the values property color. declarations are written within the curly braces({}) ,property should followed by colon(:) and value should followed by semi colon(;). <html> <head> <style type="text/css"> body { background-color: yellow; } h1 { font-size:36pt;color:green;
} h2 { color:blue;font-size:20pt; } p { margin-left:50px; } </style> </head> <body> <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body> </html> LINKED STYLE SHEET Linked style sheet is the easiest method of styling multiple html document. it is also called external style sheet. it is separate file which contains all the styling information. to link style sheet to the html document you use link element in the head of your document. to create linked style sheet you can use note pad and save the file with. css extension. now give link to css file in html document. the html file <html> <head> <link rel="style sheet" type="text/css" href="linked.css" /> </head> <body> <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body> </html> save the above file with .html extension in the same directory where css file is saved. The css file (style sheet file) body { background-color: grey;
} h1 { font-size:36pt; } h2 { color:blue;font-size:20pt } p { margin-left:50px; } save the above file with .css extension in the same directory where html file is saved. when html file open on browser the document will be styled in the way which was defined inside the style sheet file that is css file. other than above three types of style sheets two more selectors will discuss in next chapter .those selectors are called user defined selectos will be discussed in next chapter.
CASCADING STYLE SHEET ID AND CLASSES

CSS id and are classes are the user defined selectors .in addition to styling html document CSS allows you to specify your own selectors called "id "and "class" The ID selector ID is an HTML attribute that does not affect the display of an element and can be applied to any element. ID is used to specify a style for single, unique element . the ID selector uses the ID attribute of the html element and is defined with "#"pound sign.. <html> <head> <style type="text/css"> #main { text-align: center;
color: red; } </style> </head> <body> <p id="main">Hello World!</p> <p>this is paragraph of id attribute of css.</p> </body> </html> [an error occurred while processing this directive] The Class selector A class is simply a group of elements scattered throughout the document all which have same value for their class attribute. it is used to specify a style for group of elements unlike id selector class selector is used on several attributes. class selector uses the class attribute of html and defines with (.)dot.
<html> <head> <style type="text/css"> .center { text-align:center;font-size:20pt; } .right { text align :left;font-size:15pt;font-color:red; } </style> </head> <body> <h1 class="center">This heading will not be affected</h1> <p class="center">This paragraph will be center-aligned.</p> <p class="right">this is html document.</p>
</body> </html> DIV AND SPAN ELEMENT <DIV> tag The div tag did the logical division of web page. it also defines the style of whole sections of page. with help of DIV tag you could define a section of page and style it different from the surrounding of page. The div tag allows you to name certain section of your document so you can affect it. <html> <body> <h3>This is a html header</h3> <p>This is a html paragraph.</p> <div style="color: pink"> <h3>This is a html header</h3> <p>This is a html paragraph.</p> </div> </body> </html> <SPAN > tag Span tag has very similar property like <div >tag ,it also effect the style of text it encloses. The <span> tag simply tells the browser to apply the style and align rules to whatever is within the <span>. Use <span> when you want to change the style of elements without naming them in a separate division within the document. For example, if you had a Level 3 Heading (<h3>) that you wanted the second word to be red, you could surround that word with <<span> style="color : #ff0000;">2ndWord</<span>> and it would still be a part of the <h3>
tag as well, just red. <html> <head> <style type="text/css"> span. red {color:red;font-weight:italic} span. pink {color:pink;font-weight:italic} </style> </head> <body> <p>The div tag did the logical<span class="red"> division of </span>web page. <br>it also defines<span class="pink"> the style of whole<span> sections of page</br></p> </body> </html>
SOME EXAMPLES OF CSS

Let here we see the styling with help of examples. styling of web page can be done in various ways we are here discuss few types of styling 1.BACGROUND STYLING <html> <head> <style type="text/css"> h1 { background-color: silver; } p { background-color:lightblue; } div { background-color: pink; } </style> </head> <body> <h1>This is background of html file</h1>
<div> This is a text inside a div element. <p>This is paragraph of html has it's own background color.</p> We are still in the div element. </div> </body> </html> TEXT STYLING Text coloring ,text alignment ,and text decoration, font style. <html> <head> <title> this is text styling</title> <style type="text/css"> body { background color: light blue; } h1 { color: green; font-size:30pt;font-weight:times roman; text-align: center; } p { color: red; font-size:20;font-weight:times roman ;font-decoration: none; text-align: center; } </style> </head> <body> <h1> This is stylig of text in html </h1> <p> this para tells us about the styling of the text of html document</p> </body> </html> FONT STYLING Font styling consists font size, font color, font style, font family <html> <head> <title> font styling</title> <style type ="text/css"> h1
{ font- family:" times new roman", times ,serif; } h2 { font-family: Aerial; } p.font{font-size:20px; font-style: italic;} p.fontstyle{font-size:20px;font-style:bold;} </style> </head<> <body> <h1>This is font styling</h1> <h2>this is another heading</h2> <p class="font"> this is the paragraph which shows the font styling of the text</p> <p class="font style"> this is another paragraph shows the font styling of the text</p> </body> </html> LINK STYLING link is used to link web pages. while styling link provide style to the links colors etc. <html> <head> <title> This is link in css</title> <style type="text/css" a: link {color: greens;} /* unvisited link */ a: visited {color: pink;} /* visited link */ a: hover {color: light green;} /* mouse over link */ a: active {color: red;} /* selected link */ </style> </head> <body> <p><b><a href="www.r4r.co.in" target="_blank">This is a link</a></b></p> <p><b>Note:</b> a: hover MUST come after a: link and a: visited in the CSS definition in order to be effective.</p> <p><b>Note:</b> a: active MUST come after a: hover in the CSS definition in order to be effective.</p> </body> </html>
[an error occurred while processing this directive] TABLE STYLING Table styling is the way to style the table using table borders .by increasing or decreasing the width of table. following are the border styling of table. None: it defines border of table none means no border is present there. Solid: it makes the border of the table in solid format Dotted: is used to make the border of table dotted . Dashed: makes the border of the table dashed. Double: shows the border of the table in double format Inset: shows the border of table in 3D inset format. Outset: shows the border of the the table in 3D outset format. ridged: shows the table in 3D ridged form ,it depends on the color Inset: shows the border of table in 3D inset format. Outset: shows the border of the the table in 3D outset format. ridged: shows the table in 3D ridged form ,it depends on the color <head> <title> border style</title> <style type="text/css"> p.none { border-style: none;} p.solid{border-style:solid;} p.dashed{border-style:dashed;} p.inset{border-style:inset;} p.outset{border-style:outset;} p.ridge{borde-style:ridged;} </style> </head> <body> <p class="none">table style is none</p> <p class="solid"> table style is solid</p> <p class="dashed"> table style is dashed</p>
<p class="inset"> table style is inset </p> <p class="outset">table style is outset</p> <p class="ridge"> table style is ridge</p> </body> </html> Example which shows the table styling <html> <head> <style type="text/css"> #Employee { font-family:"times roman", Arial, Helvetica, sans-serif; width:100%; border-collapse:collapse; } #Employee td, #Employee th { font-size:1em; border:2px solid purple; padding:3px 7px 2px 7px; } #Employee th { font-size:1.1em; text-align:left; padding-top :5px; padding-bottom:4px; background-color:#A7C942; color:#ffffff; } #Employee tr.alt td { color:#0000F0; background-color:#EAF2D3; } </style> </head> <body> <table id="employee"> <tr> <th>First Name</th> <th>Last Name</th> <th> Employee ID</th> <th>Salary</th> </tr>
<tr> <td>Maria</td> <td>John</td> <td>10253</td> <td>10000</td> </tr> <tr> <td>Shweta</td> <td>Sharma</td> <td>10254</td> <td>12000</td> </tr> </body> </html>
SUMMARY OF CSS
CSS is used to create style sheets and to control the style and lay out of multiple websites at once. we have learned how to use CSS to add backgrounds, format text, add and format borders, and specify padding and margins of elements. we have also learn how to position an element. control the size of element, place the one element behind the other The basic purpose of cascading style sheet (CSS) is to separate the content of web document( which are written in an mark up language )from its presentation (that is written using css). Cascading Style Sheets were developed as a means for creating a consistent approach to providing style information for web documents.

CSS gives great style to your web pages that are written in any markup language. The main purpose of CSS is to define the presentation of html document CSS gives you level of control over various presentation characteristics of the document . CSS improve content accessibility, and provide better flexibility. It allows to present HTML and XHTML documents in more than one style. One of the goal of CSS is to allow users control over presentation. Enable multiple page formatting and reduce complexity
CSS Tutorials 21 days
Introduction of CSS
Difference between HTML and CSS Methods of Inserting CSS Linked internal CSS How to make comment in CSS How to make Text bold in CSS How to make Text Italic in CSS How to make Underlined text in CSS How to make margin on page Sample page template of CSS Working with background in CSS Working with Tables in CSS Working with Borders in CSS Working with Lists in CSS Working With Padding in CSS
CSS Dimensions Working with Positioning in CSS Working With Transparent image in CSS Working With navigations in CSS Working With CSS Left Frame Layout Working With CSS Right Frame Layout Working With CSS Top Frame Layout Working With CSS Bottom Frame Layout
Working With CSS Left and Right Frame Layout Creating Form with the help of CSS Working with comment div in CSS
Introduction of CSSCSS (Cascading Style Sheets ) is a language that is used in describe the presentation semantics like, the look and formatting of a document written in a markup language that is known as style sheet. Syntax of CSSIn Style sheet a list of rules are made. It is consists of one or more selectors and a declaration block. A declaration-block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon (:), a value. If there are multiple declarations in a block, a semi-colon (;) must be inserted to separate each declaration.
selector [, selector2, ...][:pseudo-class] { property: value; [property2: value2; ...] }
[an error occurred while processing this directive] Suppose we want to make highlight the heading-
h1 { color: white; background-color: orange !important; }
Advantages of CSS
Page reformatting Separation of content from presentation Flexibility
Difference between CSS and HTML
HTML is the hypertext markup language we can also make formatting text with HTML for example making a text bold in html.
<b> This is text for HTML </b>
Another disadvantage can be found in this example:- if you wanted to make the above text bold, make the font style Verdana and change its color to red, you would need a lot of code wrapped around the text.
<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif"> <strong>This is text for HTML</strong></font>
[an error occurred while processing this directive] This is verbose and contributes to making your HTML messy. With CSS, you can create a custom style elsewhere and set all its properties, give it a unique name and then tag your HTML to apply these stylistic properties. And in between the tags at the top of your web page you would insert this CSS code that defines the style we just applied:
<style type="text/css"> .myNewStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FF0000; } </style>
In the above example we embed the css code directly into the page itself. This is fine for smaller projects or in situations where the styles youre defining will only be used in a single page. There are many times when you will be applying your styles to many pages and it would be a hassle to have to copy and paste your CSS code into each page. You also find yourself having to edit each of these pages if you want to make a style change. Like with JavaScript, you can define/create your CSS styles in a separate file and then link it to the page you want to apply the code to<link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">
The above line of code links your external style sheet called myFirstStyleSheet.css to the HTML document. You place this code in between the <head> </head> tags in your web page.
Methods for inserting CSS Style sheet -
There are three ways of inserting a style sheet:

External style sheet Internal style sheet Inline style
External Style Sheet An external style sheet is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. You have to make sure that each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
<head> <link rel="stylesheet" type="text/css" href="myweb.css" /> </head>
[an error occurred while processing this directive] Internal Style Sheet An internal style sheet should be used for a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like given below <head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/same.gif");} </style> </head>
Inline Styles An inline style loses many of the advantages of style sheets by mixing content with presentation. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property.
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
How to create a linked external CSS style Sheet -
To create an external style sheet all you need to do is create a simple text document (on windows you simply right-click and select new -> text document) and then change the file from type .txt to .css. Points to remember for external CSS You dont add these tags in the CSS page itself as you would if you embedded the CSS code in your HTML <style type="text/css"></style>
[an error occurred while processing this directive] Since the CSS link in your web page says that you are linking to a CSS page, you dont need to declare (in the external CSS file) that the code in the CSS page is CSS. That is what the above tags do. Instead you would just add your CSS code directly to the page like so.
.myNewStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FF0000; } .my2ndNewStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FF0000; } .my3rdNewStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12pt; color: #FF0000; }
In the above example I have created a series CSS classes that can be applied to any HTML tag like so:
<h2 class=my3rdNewStyle>My CSS styled text</h2>
In the above example I applied a CSS style to a <h2> tag. Normally this tag sets the size of the text that it wraps to a size that is preset in the browser (ex: 10 pixels). When you apply a CSS class to it, the CSS code overrides the default size that you would normally get with an <h2> tag in favor of the size specified in the CSS class. So now you can see that CSS can override default HTML tag behavior.
How to make Comment in CSS style sheet We use comments to explain our code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. Comments can be write in CSS as following manner/*This is first comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }
[an error occurred while processing this directive] A CSS comment begins with "/*", and ends with "*/", like above code.
How to make text Bold using CSS style sheetCSS code for this is given below<style type="text/css"> .BoldStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FF0000; } </style>
[an error occurred while processing this directive] for activating this 'style operation', we need to insert this code in between the <head></head> tags at the top of your web page. Here we make a class named Boldstyle and inside this class i have mentioned the font-family ,fontweight and color for font. In order to make bold font we use font-weight in css.
How to make text italic using CSS style sheetCSS code for this is given below<style type="text/css"> .ItalicStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-style: italic; color: #FF0000; } </style>
[an error occurred while processing this directive] for activating this 'style operation', we need to insert this code in between the <head></head> tags at the top of your web page. Here we make a class named ItalicStyle and inside this class i have mentioned the font-family, font-style and color for font. In order to make italic font we use font-style : italic in css.
How to make underlined text using CSSCSS code for this is given below<style type="text/css"> .UnderlineStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-style: italic; text-decoration: underline; color: #FF0000; } </style>
[an error occurred while processing this directive]
for activating this 'style operation', we need to insert this code in between the <head></head> tags at the top of your web page. Here we make a class named ItalicStyle and inside this class i have mentioned the font-family, font-style and color for font. In order to make underline below the text we use text - decoration : underline;
CSS style sheet code for making page marginbody { }
margin-left: 15%; margin-right: 15%;
[an error occurred while processing this directive] As you can see, you can redefine any tag and change the way it looks! This can be very powerful.
div { background: rgb(204,204,255); padding: 0.5em; border: 1px solid #000000; }
The above CSS code sets that any <div></div> tag will now have a background color of rgb(204,204,255) and have a padding of 0.5em and a thin 1 pixel border that is solid black. A few things to explain about the above- Color in CSS can be expressed in a few ways:

In Hex -> for example: #000000 this is black and this: #FF0000 is red. In rgb -> rgb(204,204,255) is a light purple blue color. With named colors like: red or blue In the following example I will show you the Most Importantl CSS code that allows you to create link roll-over affects without images:
a:link { color: rgb(0, 0, 153) } a:visited { color: rgb(153, 0, 153) } a:hover { color: rgb(0, 96, 255) } a:active { color: rgb(255, 0, 102) }
The above CSS will cause your links to change color when someone hovers their mouse pointer over it, instant rollovers with no images! One important note with the above code, is that it is important that the style declarations be in the right order.
link-visited-hover-active, otherwise it may break in some browsers.
Creating basic page template with CSS style sheet. For this create a new text document and call it: mywebpage.css. Once created open that file and paste in this template CSS code that given below and then save it.
/* Generic Selectors */ body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #333333; background-color: #F9F9F9; } p { } width: 80%;
li { list-style-type: none; line-height: 150%; list-style-image: url(../images/arrowSmall.gif); } h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; font-weight: bold; color: #000000; } h2 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; font-weight: bold; color: #000000; border-bottom: 1px solid #C6EC8C; } /**************** Pseudo classes ****************/ a:link { color: #00CC00; text-decoration: underline; font-weight: bold; } li :link { color: #00CC00; text-decoration: none;
font-weight: bold;
a:visited { color: #00CC00; text-decoration: underline; font-weight: bold; } li a:visited { color: #00CC00; text-decoration: none; font-weight: bold; } a:hover { color: rgb(0, 96, 255); padding-bottom: 5px; font-weight: bold; text-decoration: underline; } li a:hover { display: block; color: rgb(0, 96, 255); padding-bottom: 5px; font-weight: bold; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #C6EC8C; } a:active { color: rgb(255, 0, 102); font-weight: bold; } /************************* ID's *************************/ #navigation { position: absolute; width: 210px; height: 600px; margin: 0; margin-top: 50px; border-right: 1px solid #C6EC8C; font-weight: normal; } #centerDoc { position: absolute; padding: 0 0 20px 0; /*top right bottom left*/ margin-top: 50px; margin-left: 235px; }
[an error occurred while processing this directive] We need to add some code to our HTML page. In between the <body></body> tags you will need to insert code as given below <div id="navigation"> <h2>Main navigation</h2> </div> <div id="centerDoc"> <h1>Main Heading</h1> <p>With CSS you define the colors and sizes in "styles". Then as you write your documents you refer to the styles. Therefore: if you change a certain style it will change the look of your entire site. 'To create the practice HTML page do the following:'.</p> <p>Follow the instructions here and create your basic HTML page and do it now! </p></div>
And in between the <head> </head> tags you will need to insert this<title>First CSS Tutorial</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="myCSS.css" rel="stylesheet" type="text/css">
Your web page will look like as below-
Working with background using CSS style sheet CSS background properties are used to define the background effects of an element. This can be used for background effects properties as below
background-color background-image background-repeat background-attachment background-position
Background Color The background-color property specifies the background color of an element. this can be define in color of a page is defined in the body selector:
body { background-color:#b0c4de; }
[an error occurred while processing this directive] The background color can be specified by:

name - a color name, like "red" RGB - an RGB value, like "rgb(255,0,0)" Hex - a hex value, like "#ff0000"
Background Image The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. The background image for a page can be set like this.
body { background-image:url('backg.gif'); }
Background Image - Repeat Horizontally or Vertically By default, the background-image property repeats an image both horizontally and vertically.Some images should be repeated only horizontally or vertically, or they will look strange, like belowbody { background-image:url('backg.png'); }
If the image is repeated only horizontally (repeat-x), the background will look betterbody { background-image:url('logo.png'); background-repeat:repeat-x; }
Background Image - Set position and no-repeat When using a background image, use an image that does not disturb the text. Showing the image only once is specified by the background-repeat property:
body { background-image:url('back.png'); background-repeat:no-repeat; }
Background - Shorthand property To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property. The shorthand property for background is simply "background":
body {background:#ffffff url('img_tree.png') no-repeat right top;}
Working with tables in CSS Creating Table Borders For specify table borders in CSS, we use the border property.
table, th, td { border: 1px solid black; }
Collapse Borders For border-collapse property sets whether the table borders are collapsed into a single border or separated.
table { border-collapse:collapse; } table,th, td { border: 1px solid black; }
Table Width and Height For adjusting Width and height of a table is defined by the width and height properties.
table { width:100%; } th { height:50px; }
Table Text Alignment The text in a table is aligned with the text-align and vertical-align properties. The text-align property sets the horizontal alignment, like left, right, or center.
td { text-align:right; }
[an error occurred while processing this directive] Table Padding For control the space between the border and content in a table, we use the padding property on td and th elements.
td { padding:15px; }
Table Color Following example specifies the color of the borders, and the text and background color of th elements.
table, td, th { border:1px solid green; } th { background-color:green; color:white; }
Working with borders in CSS -
Border Style The border-style property specifies what kind of border to display. Border-style none: dotted: dashed: solid: double: groove: ridge: inset: outset: Border Width The border-width property is used to set the width of the border.The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick. [an error occurred while processing this directive]
p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; }
Values: Defines no border Defines a dotted border Defines a dashed border Defines a solid border Defines two borders. The width of the two borders are the same as the border-width value Defines a 3D grooved border. The effect depends on the border-color value Defines a 3D ridged border. The effect depends on the border-color value Defines a 3D inset border. The effect depends on the border-color value Defines a 3D outset border. The effect depends on the border-color value
Border Color The border-color property is used to set the color of the border. The color can be set by: name - specify a color name, like "red" RGB - specify a RGB value, like "rgb(255,0,0)" Hex - specify a hex value, like "#ff0000"
You can also set the border color to "transparent".

p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; }
Border - Individual sides In CSS it is possible to specify different borders for different sides.
p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }
Working with Lists in CSS The CSS list properties allow you to:

Ordered lists - for different list item markers for Unordered lists - for different list item markers for
List With CSS, lists can be styled further, and images can be used as the list item marker. The type of list item marker is specified with the list-style-type property:
ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;}
Some of the property values are for unordered lists, and some for ordered lists. Values for Unordered Lists Value disc none circle square Values for Ordered Lists Value armenian decimal decimal-leading-zero georgian lower-alpha lower-greek lower-latin lower-roman upper-alpha upper-latin upper-roman Working with CSS padding CSS padding is used to define the space between the element border and the element content. Padding has property to clear an area around the content (inside the border) of an element and padding is affected by the background color of the element. Padding can be top, right, bottom, and left, and it can be changed independently using separate properties. Value length % For Example Description Defines a fixed padding (in pixels, pt, em, etc.) Defines a padding in % of the containing element Description The marker is traditional Armenian numbering The marker is a number The marker is a number padded by initial zeros (01, 02, 03, etc.) The marker is traditional Georgian numbering (an, ban, gan, etc.) The marker is lower-alpha (a, b, c, d, e, etc.) The marker is lower-greek (alpha, beta, gamma, etc.) The marker is lower-latin (a, b, c, d, e, etc.) The marker is lower-roman (i, ii, iii, iv, v, etc.) The marker is upper-alpha (A, B, C, D, E, etc.) The marker is upper-latin (A, B, C, D, E, etc.) The marker is upper-roman (I, II, III, IV, V, etc.) Description Default. The marker is a filled circle No marker The marker is a circle The marker is a square
padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px;
CSS Padding property can have following values. padding:25px 50px 75px 100px;

top padding is 25px right padding is 50px bottom padding is 75px left padding is 100px padding:25px 50px 75px;
top padding is 25px right and left paddings are 50px bottom padding is 75px padding:25px 50px; top and bottom paddings are 25px right and left paddings are 50px padding:25px; all four paddings are 25px
Working with CSS Dimensions
CSS dimension is used to control the height and width of an element. Its properties are given below. Property height Description auto length Sets the height of an element % inherit none Sets the maximum height of an length element % inherit none Sets the maximum width of an length element % inherit Sets the minimum height of an length Values
max-height
max-width min-height
element min-width Sets the minimum width of an element
width
Sets the width of an element
% inherit length % inherit auto length % inherit
Working with positioning in CSS Positioning CSS positioning properties will help you to position an element to place an element behind another, and specify what should happen when an element's content is too big. It can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depends on the positioning method. Positioning methods are given below
Static Positioning Fixed Positioning Relative positioned Absolute position
[an error occurred while processing this directive] Static Positioning HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. It is not affected by the top, bottom, left, and right properties. Fixed Positioning An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled:
p.pos_fixed { position:fixed; top:30px; right:5px; }
Relative Positioning A relative positioned element is positioned relative to its normal position.
h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }
Absolute Positioning An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>.
h2 { position:absolute; left:100px; top:150px; }
Overlapping Elements When elements are positioned outside the normal flow, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
img { position:absolute; left:0px; top:0px; z-index:-1 }
Creating a Transparent image in CSS To making transparent image in css code is written below<img src="klematis.jpg" width="150" height="113" alt="klematis" style="opacity:0.4;filter:alpha(opacity=40)" />
In Browser Firefox the property opacity:x for transparency, while IE uses filter:alpha(opacity=x). Image Transparency Mouse Over Effect <img src="logo.jpg" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> <img src="Logo1.jpg" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
HTML code is given below<html> <head> <style type="text/css"> div.background { } div.transbox { width:200px; height:180px; margin:30px 50px; background-color:#fffffA; border:1px solid black; filter:alpha(opacity=60); opacity:0.6; } div.transbox p { margin:30px 40px; font-weight:bold; color:#000000; } </style> </head> <body> <div class="background"> <img src="4c_steria.jpg" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> </div> </body> </html>
Working with Navigations Bar in CSS Navigation is the essential requirement for any web site. With CSS you can transform goodlooking navigation bars. A navigation bar is basically a list of links, so using the <ul> and <li> elements <ul> <li><a <li><a <li><a <li><a </ul>
href="default.aspx">Home</a></li> href="Home.aspx">News</a></li> href="contact.aspx">Contact</a></li> href="about.aspx">About</a></li>
[an error occurred while processing this directive] Now let's remove the bullets and the margins and padding from the listul { list-style-type:none; margin:0; padding:0; }
Vertical Navigation Barul { list-style-type:none; margin:0; padding:0; }
Horizontal Navigation BarThere are two ways to create a horizontal navigation bar. Using inline or floating list items. Inline List Items
li {
display:inline; }
Floating List Items
li { float:left; } a { display:block; width:60px; }
Working with CSS left Frame Layout Left Frame LayoutLayout is the most essential part for website designing. It supports to website in order to good looking and attaractive. Following example is for creating left layout frame.
<head> <title>CSS Left Frame Layout</title> <style type="text/css"> body{ margin: 0; padding: 0; border: 0; overflow: hidden; height: 100%; max-height: 100%; } #framecontent{ position: absolute; top: 0; bottom: 0; left: 0; width: 200px; height: 100%; overflow: hidden; background: navy; color: white; }
#maincontent{ position: fixed; top: 0; left: 200px; right: 0; bottom: 0; overflow: auto; background: #fff; } .innertube{ margin: 15px; } * html body{ padding: 0 0 0 200px; } * html #maincontent{ height: 100%; width: 100%; } </style>
</head> <body> <div id="framecontent"> <div class="innertube"> <h1>CSS Left Frame Layout</h1> <h3>Sample text here</h3> </div> </div> <div id="maincontent"> <div class="innertube"> <p style="text-align: center">Credits: <a href="http://www.r4r.co.in">E Learning Portal</a></p> </div> </div> </body> </html>
Output-
Working with Right Layout frame in CSSFollowing example will show how to make right layout frame in CSS:
<html> <head> <title>CSS Right Frame Layout</title> <style type="text/css"> body{ margin: 0; padding: 0; border: 0; overflow: hidden; height: 100%; max-height: 100%; } #framecontent{ position: absolute; top: 0; bottom: 0; right: 0; width: 200px; height: 100%; overflow: hidden; background: Green; color: white; } #maincontent{ position: fixed;
top: 0; left: 0; right: 200px; bottom: 0; overflow: auto; background: #fff; } .innertube{ margin: 15px; } * html body{ padding: 0 200px 0 0; } * html #maincontent{ height: 100%; width: 100%; } </style> </head> <body> <div id="framecontent"> <div class="innertube"> <h1>CSS Right Frame Layout</h1> <h3>Sample text here</h3> </div> </div> <div id="maincontent"> <div class="innertube"> <p><script type="text/javascript">filltext(255)</script></p> <p style="text-align: center">Credits: <a href="http://www.r4r.co.in">R4R CSS Tutorials</a></p> </div> </div> </body> </html>
Output-
Working With CSS Top Frame LayoutFollowing example is for creating top frame in website:
<html> <head> <title>CSS Top Frame Layout</title> <style type="text/css"> body{ margin: 0; padding: 0; border: 0; overflow: hidden; height: 100%; max-height: 100%; } #framecontent{ position: absolute; top: 0; left: 0; width: 100%; height: 130px; overflow: hidden; background-color: navy; color: white; }
#maincontent{ position: fixed; top: 130px; left: 0; right: 0; bottom: 0; overflow: auto; background: #fff; } .innertube{ margin: 15px; } * html body{ padding: 130px 0 0 0; } * html #maincontent{ height: 100%; width: 100%; } </style> </head> <body> <div id="framecontent"> <div class="innertube"> <h1>CSS Top Frame Layout</h1> <h3>Sample text here</h3> </div> </div> <div id="maincontent"> <div class="innertube"> <p style="text-align: center">Credits: <a href="http://www.r4r.co.in">R4R CSS Tutorials</a></p> </div> </div> </body> </html>
[an error occurred while processing this directive] Output-
Working With CSS Bottom Frame LayoutFollowing example will show how to make bottom frame layout in CSS-
<html> <head> <title>CSS Bottom Frame Layout</title> <style type="text/css"> body{ margin: 0; padding: 0; border: 0; overflow: hidden; height: 100%; max-height: 100%; } #framecontent{
position: absolute; bottom: 0; left: 0; width: 100%; height: 130px; overflow: hidden; background: navy; color: white; } #maincontent{ position: fixed; top: 0; left: 0; right: 0; bottom: 130px; overflow: auto; background: #fff; } .innertube{ margin: 15px; } * html body{ padding: 0 0 130px 0; } * html #maincontent{ height: 100%; width: 100%; } </style> </head> <body> <div id="framecontent"> <div class="innertube"> <h1>CSS Bottom Frame Layout</h1> <h3>Sample text here</h3> </div> </div> <div id="maincontent"> <div class="innertube"> <p style="text-align: center">Credits: <a href="http://www.r4r.co.in">R4R CSS Tutorials</a></p>
</div> </div> </body> </html>
Output-
Working With CSS Left and Right Frame LayoutFollowing example will show how to make left and right frame layout in CSS:
<html> <head> <title>CSS Left and Right Frames Layout</title> <style type="text/css"> body{ margin: 0; padding: 0; border: 0; overflow: hidden; height: 100%;
max-height: 100%; } #framecontentLeft, #framecontentRight{ position: absolute; top: 0; left: 0; width: 200px; height: 100%; overflow: hidden; background-color: navy; color: white; } #framecontentRight{ left: auto; right: 0; width: 150px; overflow: hidden; background-color: navy; color: white; } #maincontent{ position: fixed; top: 0; left: 200px; right: 150px; bottom: 0; overflow: auto; background: #fff; } .innertube{ margin: 15px; } * html body{ padding: 0 150px 0 200px; } * html #maincontent{ height: 100%; width: 100%; } </style> </head> <body> <div id="framecontentLeft"> <div class="innertube">
<h1>CSS Left and Right Frames Layout</h1> <h3>Sample text here</h3> </div> </div> <div id="framecontentRight"> <div class="innertube"> <h3>Sample text here</h3> </div> </div> <div id="maincontent"> <div class="innertube"> <p style="text-align: center">Credits: <a href="http://www.r4r.co.in">R4R CSS Tutorials </a></p> </div> </div> </body> </html>
Output:
Creating Form with the help of CSS-
For creating form in HTML page CSS can help for making formatting to text, textbox and button in order to looks beautiful. Following code will help to create form. CSS code is given below<style type="text/css"> .feedbackform { padding: 5px; } div.fieldwrapper { width: 550px; overflow: hidden; padding: 5px 0; } div.fieldwrapper label.styled { float: left; width: 150px; text-transform: uppercase; border-bottom: 1px solid red; margin-right: 15px; } div.fieldwrapper div.thefield { float: left; margin-bottom: 10px; } div.fieldwrapper div.thefield input[type="text"] { width: 250px; } div.fieldwrapper div.thefield textarea { width: 300px; height: 150px; } div.buttonsdiv{ margin-top: 5px; } div.buttonsdiv input{ width: 80px; background: #e1dfe0; } </style>
[an error occurred while processing this directive] HTML Code for this is given below<form class="feedbackform"> <div class="fieldwrapper"> <label for="username" class="styled">Your Name:</label> <div class="thefield"> <input type="text" id="username" value="" size="30" /> </div> </div> <div class="fieldwrapper"> <label for="email" class="styled">Email address:</label> <div class="thefield"> <input type="text" id="email" value="" size="30" /><br /> <span style="font-size: 80%">*Note: Please make sure it's correctly entered!</span> </div> </div> <div class="fieldwrapper"> <label for="somehighschool" class="styled">education:</label> <div class="thefield"> <ul style="margintop:0;"> <li><input type="radio" id="somehighschool" name="education" value=""/> <label for="somehighschool">Some Highschool</label></li> <li><input type="radio" id="highschool" name="education" value="" / <label for="highschool">Highschool graduate</label></li> <li><input type="radio" id="somecollege" name="education" value="" /> <label for="somecollege">Some college</label></li> <li><input type="radio" id="vocation" name="education" value="" /> <label for="vocation">Vocation school</label></li>
<li><input type="radio" id="college" name="education" value="" /> <label for="college">College graduate or higher</label></li> </ul> </div> </div> <div class="fieldwrapper"> <label for="html" class="styled">Skills:</label> <div class="thefield"> <ul style="margintop:0;"> <li><input type="checkbox" id="html" name="skills" value="" /> <label for="html">HTML/ CSS</label></li> <li><input type="checkbox" id="javascript" name="skills" value=""/> <label for="javascript">JavaScript</label></li> <li><input type="checkbox" id="ajax" name="skills" value="" /> <label for="ajax">Ajax and XML</label></li> <li><input type="checkbox" id="php" name="skills" value="" /> <label for="php">PHP and Database</label></li> </ul> <span style="font-size: 80%">* Please check all that apply.</span> </div> </div> <div class="fieldwrapper"> <label for="agegroup" class="styled">Department:</label> <div class="thefield"> <select id="agegroup"> <option value="2.1">HR department</option> <option value="3">Sales</option> <option value="4.1">Customer Service/ Support</option> <option value="5.2">Accounting</option>
</div> </div>
</select>
<div class="fieldwrapper"> <label for="about" class="styled">About yourself:</label> <div class="thefield"> <textarea id="about"></textarea> </div> </div> <div class="buttonsdiv"> <input type="submit" value="Submit" style="margin-left: 150px;" /> <input type="reset" value="Reset" /> </div> </form>
Output:
How to design comment div in CSSCSS code for deigning div<style type="text/css"> .uparrowdiv, .downarrowdiv, .leftarrowdiv, .rightarrowdiv{ width:600px; min-height:40px; background: black; color:white;
padding:5px; position:relative; word-wrap:break-word; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; margin-bottom:2em; } .uparrowdiv:after{ content:''; display:block; position:absolute; top:-20px; left:30px; width:0; height:0; border-color: transparent transparent black transparent; /*border color should be same as div div background color*/ border-style: solid; border-width: 10px; } .downarrowdiv:after{ content:''; display:block; position:absolute; top:100%; left:30px; width:0; height:0; border-color: black transparent transparent transparent; border-style: solid; border-width: 10px; } .leftarrowdiv:after{ content:''; display:block; position:absolute; top:10px; left:-20px; width:0; height:0; border-color: transparent black transparent transparent; border-style: solid; border-width: 10px; } .rightarrowdiv:after{ content:''; display:block; position:absolute; top:10px; left:100%;
width:0; height:0; border-color: transparent transparent transparent black; border-style: solid; border-width: 10px; } </style>
[an error occurred while processing this directive] HTML code for using CSS<body> <form id="form1" runat="server"> <div class="uparrowdiv"> This is a example of Div!! </div> <div class="downarrowdiv"> This is a example of Div!! </div> <div class="leftarrowdiv"> This is a example of Div!! </div> <div class="rightarrowdiv"> This is a example of Div!! </div> </form> </body>
Output:

Css

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Css

Enviado por

Direitos autorais:

Formatos disponíveis

R4R provide basic CSS Tutorials concept with CSS Examples .

CSS Interview Questions with Answers

Disadvantage of CSS 1. Inconsistent Browser Support

AN INTRODUCTION TO CASCADING STYLE SHEET

EVOLUTION OF CASCADING STYLE SHEET

BENEFITS OF CASCADING STYLE SHEET

TYPES OF CASCADING STYLE SHEET

CASCADING STYLE SHEET ID AND CLASSES

SOME EXAMPLES OF CSS

CSS Tutorials 21 days

h1 { color: white; background-color: orange !important; }

Page reformatting Separation of content from presentation Flexibility

Difference between CSS and HTML

Methods for inserting CSS Style sheet -

There are three ways of inserting a style sheet:

External style sheet Internal style sheet Inline style

How to create a linked external CSS style Sheet -

[an error occurred while processing this directive]

CSS style sheet code for making page marginbody { }

margin-left: 15%; margin-right: 15%;

link-visited-hover-active, otherwise it may break in some browsers.

Your web page will look like as below-

background-color background-image background-repeat background-attachment background-position

body { background-image:url('back.png'); background-repeat:no-repeat; }

table { width:100%; } th { height:50px; }

Working with borders in CSS -

You can also set the border color to "transparent".

padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px;

Working with CSS Dimensions

element min-width Sets the minimum width of an element

Sets the width of an element

% inherit length % inherit auto length % inherit

Static Positioning Fixed Positioning Relative positioned Absolute position

[an error occurred while processing this directive]

href="default.aspx">Home</a></li> href="Home.aspx">News</a></li> href="contact.aspx">Contact</a></li> href="about.aspx">About</a></li>

Vertical Navigation Barul { list-style-type:none; margin:0; padding:0; }

Floating List Items

li { float:left; } a { display:block; width:60px; }

[an error occurred while processing this directive]

[an error occurred while processing this directive]

[an error occurred while processing this directive] Output-

</div> </div> </body> </html>

Creating Form with the help of CSS-

Você também pode gostar