CSS How to
of 3
-
Upload
ankit-saha -
Category
Documents
-
view
214 -
download
0
Transcript of CSS How to
-
7/27/2019 CSS How to
1/3
8/4/13 CSS How to
w3schools.com/css/css_howto.asp 1/3
HOME HTML CSS JAVASCRIPT JQUERY XML ASP.NET PHP SQL MORE... REFERENCES | EXAMPLES | FORUM | ABOU
SHARE THIS PAGE
Like 76k
CSSBasic
CSS HOME
CSS Introduction
CSS Syntax
CSS Id & Class
CSS How To
CSSStyling
Styling Backgrounds
Styling Text
Styling Fonts
Styling Links
Styling Lists
Styling Tables
CSSBox Model
CSS Box Model
CSS Border
CSS Outline
CSS Margin
CSS Padding
CSSAdvanced
CSS Grouping/Nesting
CSS Dimension
CSS Display
CSS Pos itioning
CSS Floating
CSS Align
CSS Pseudo-class
CSS Pseudo-element
CSS Navigation Bar
CSS Image Gallery
CSS Image Opacity
CSS Image Sprites
CSS Media Types
CSS Attribute Selectors
CSS Summary
CSSExamples
CSS Examples
CSS Quiz
CSS Certificate
CSSReferences
CSS Reference
CSS Selectors
CSS Reference Aural
CSS Web Safe Fonts
CSS Units
CSS Colors
CSS Color Values
CSS Color Names
CSS Color HEX
Previous Next Chapter CSS How To...
When a browser reads a style sheet, it will format the document according to it.
Three Ways to Insert CSS
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 ideal whe n the style isapplied to many pages. With an external style sheet, you can
change the look of an entire Web site by changing one file. Each page must link to the style sheet using the
tag. The tag goes inside the head section:
An external style shee t can be written in any text editor. Thefile should not contain any html tags. Your style
sheet should be saved with a .css extension. Anexample ofa style sheet file is shown below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Do not add a space between the p roperty value and the unit (such as margin-left:20 px). The correct way is:
margin-left:20px
Internal Style SheetAn internal style sheet shou ld be used when a single document has a unique style. You define internal styles in
the head section of an HTML page, by using the tag, like this:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presenta tion. Use this method
sparingly!
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS
property. The example shows how to change the color and the left margin of a pa ragraph:
This is a paragraph.
Multiple Style Sheets
If some properties have been set for the s ame selector in different style sheets , the values w ill be inherited from
the more specific style sheet.
For example, an external style sheet has these prope rties for the h3 selector:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
And an internal style shee t has these properties for the h3 selector:
h3
{
text-align:right;
WEB HOSTING
Best Web Hosting
eUK Web Hosting
UK Reseller Hosting
Domain, Hosting & Emai
WEB BUILDING
Download XML Editor
FREE Website BUILDER
FREE Website C reator
Best Website Templates
STATISTICS
Browser Statistics
OS Statistics
Display Statistics
Search w3schools.com:
Select Language
http://w3schools.com/cssref/css_selectors.asphttp://w3schools.com/cssref/css_selectors.asphttp://w3schools.com/css/css_exam.asphttp://w3schools.com/css/css_examples.asphttp://w3schools.com/css/css_attribute_selectors.asphttp://w3schools.com/css/css_image_gallery.asphttp://w3schools.com/css/css_image_gallery.asphttp://w3schools.com/css/css_pseudo_elements.asphttp://w3schools.com/css/css_align.asphttp://w3schools.com/css/css_positioning.asphttp://w3schools.com/css/css_dimension.asphttp://w3schools.com/css/css_padding.asphttp://w3schools.com/css/css_border.asphttp://w3schools.com/css/css_border.asphttp://w3schools.com/css/css_list.asphttp://w3schools.com/css/css_font.asphttp://w3schools.com/css/css_background.asphttp://w3schools.com/css/css_syntax.asphttp://w3schools.com/css/css_syntax.asphttp://w3schools.com/css/default.asphttp://googleads.g.doubleclick.net/aclk?sa=L&ai=CwlKGAVX9Uei9PKvQigeir4GYD4_fz4gDAAAQASDn6PoBUNnC9KYHYOXC5IOkDsgBAqkC6BjGZZyahj7gAgCoAwHIA50EqgSBAU_QKP_o-ZEgyx1rNL2-TQ3ACE7o8XaRUVVbj-wUVl1lvjDqgOCeccI18yxkPUixp5IJKW11y8w9o9ZjGP27nntUUjnyXLkF4laKeKe1GQvr0UrDMcyeICCR95pNkYYfiguxePdGqPLSFZ-ydFRk5wcmG2WvRopgXsIIKVikf2a-eOAEAaAGFA&num=0&sig=AOD64_30nDJcRdMhVpuKIL1GFU6bRJ8WCg&client=ca-pub-3440800076797949&adurl=http://w3schools.com/cert/default.asphttp://googleads.g.doubleclick.net/aclk?sa=L&ai=CwlKGAVX9Uei9PKvQigeir4GYD4_fz4gDAAAQASDn6PoBUNnC9KYHYOXC5IOkDsgBAqkC6BjGZZyahj7gAgCoAwHIA50EqgSBAU_QKP_o-ZEgyx1rNL2-TQ3ACE7o8XaRUVVbj-wUVl1lvjDqgOCeccI18yxkPUixp5IJKW11y8w9o9ZjGP27nntUUjnyXLkF4laKeKe1GQvr0UrDMcyeICCR95pNkYYfiguxePdGqPLSFZ-ydFRk5wcmG2WvRopgXsIIKVikf2a-eOAEAaAGFA&num=0&sig=AOD64_30nDJcRdMhVpuKIL1GFU6bRJ8WCg&client=ca-pub-3440800076797949&adurl=http://w3schools.com/cert/default.asphttp://googleads.g.doubleclick.net/aclk?sa=L&ai=CwlKGAVX9Uei9PKvQigeir4GYD4_fz4gDAAAQASDn6PoBUNnC9KYHYOXC5IOkDsgBAqkC6BjGZZyahj7gAgCoAwHIA50EqgSBAU_QKP_o-ZEgyx1rNL2-TQ3ACE7o8XaRUVVbj-wUVl1lvjDqgOCeccI18yxkPUixp5IJKW11y8w9o9ZjGP27nntUUjnyXLkF4laKeKe1GQvr0UrDMcyeICCR95pNkYYfiguxePdGqPLSFZ-ydFRk5wcmG2WvRopgXsIIKVikf2a-eOAEAaAGFA&num=0&sig=AOD64_30nDJcRdMhVpuKIL1GFU6bRJ8WCg&client=ca-pub-3440800076797949&adurl=http://w3schools.com/cert/default.asphttp://www.w3schools.com/http://www.w3schools.com/http://w3schools.com/browsers/browsers_os.asphttp://w3schools.com/browsers/browsers_stats.asphttp://www.altova.com/ref/?s=w3s_text&q=xmlspyhttp://www.heartinternet.co.uk/http://w3schools.com/css/css_background.asphttp://www.eukhost.com/http://www.w3schools.com/http://googleads.g.doubleclick.net/aclk?sa=L&ai=CwlKGAVX9Uei9PKvQigeir4GYD4_fz4gDAAAQASDn6PoBUNnC9KYHYOXC5IOkDsgBAqkC6BjGZZyahj7gAgCoAwHIA50EqgSBAU_QKP_o-ZEgyx1rNL2-TQ3ACE7o8XaRUVVbj-wUVl1lvjDqgOCeccI18yxkPUixp5IJKW11y8w9o9ZjGP27nntUUjnyXLkF4laKeKe1GQvr0UrDMcyeICCR95pNkYYfiguxePdGqPLSFZ-ydFRk5wcmG2WvRopgXsIIKVikf2a-eOAEAaAGFA&num=0&sig=AOD64_30nDJcRdMhVpuKIL1GFU6bRJ8WCg&client=ca-pub-3440800076797949&adurl=http://w3schools.com/cert/default.asphttp://void%280%29/http://w3schools.com/browsers/browsers_display.asphttp://w3schools.com/browsers/browsers_os.asphttp://w3schools.com/browsers/browsers_stats.asphttp://www.dreamtemplate.com/?ref=w3txtfreehttp://www.wix.com/eteamhtml/400?utm_campaign=ma_w3schools.com&experiment_id=ma_w3schools.comlink2_400http://www.wix.com/eteamhtml/400?utm_campaign=ma_w3schools.com&experiment_id=ma_w3schools.comlink1_400Html&embed_tags=camp&utm_camp=hOUdCO-AmAMQm__j8AMhttp://www.altova.com/ref/?s=w3s_text&q=xmlspyhttp://www.webhosting.uk.com/cpanel-hosting.phphttp://www.heartinternet.co.uk/http://www.eukhost.com/http://www.lunarpages.com/id/w3schools/goto/w3schoolshttp://w3schools.com/css/css_background.asphttp://w3schools.com/css/css_id_class.asphttp://w3schools.com/cssref/css_colorsfull.asphttp://w3schools.com/cssref/css_colornames.asphttp://w3schools.com/cssref/css_colors_legal.asphttp://w3schools.com/cssref/css_colors.asphttp://w3schools.com/cssref/css_units.asphttp://w3schools.com/cssref/css_websafe_fonts.asphttp://w3schools.com/cssref/css_ref_aural.asphttp://w3schools.com/cssref/css_selectors.asphttp://w3schools.com/cssref/default.asphttp://w3schools.com/css/css_exam.asphttp://w3schools.com/css/css_quiz.asphttp://w3schools.com/css/css_examples.asphttp://w3schools.com/css/css_summary.asphttp://w3schools.com/css/css_attribute_selectors.asphttp://w3schools.com/css/css_mediatypes.asphttp://w3schools.com/css/css_image_sprites.asphttp://w3schools.com/css/css_image_transparency.asphttp://w3schools.com/css/css_image_gallery.asphttp://w3schools.com/css/css_navbar.asphttp://w3schools.com/css/css_pseudo_elements.asphttp://w3schools.com/css/css_pseudo_classes.asphttp://w3schools.com/css/css_align.asphttp://w3schools.com/css/css_float.asphttp://w3schools.com/css/css_positioning.asphttp://w3schools.com/css/css_display_visibility.asphttp://w3schools.com/css/css_dimension.asphttp://w3schools.com/css/css_grouping_nesting.asphttp://w3schools.com/css/css_padding.asphttp://w3schools.com/css/css_margin.asphttp://w3schools.com/css/css_outline.asphttp://w3schools.com/css/css_border.asphttp://w3schools.com/css/css_boxmodel.asphttp://w3schools.com/css/css_table.asphttp://w3schools.com/css/css_list.asphttp://w3schools.com/css/css_link.asphttp://w3schools.com/css/css_font.asphttp://w3schools.com/css/css_text.asphttp://w3schools.com/css/css_background.asphttp://w3schools.com/css/css_howto.asphttp://w3schools.com/css/css_id_class.asphttp://w3schools.com/css/css_syntax.asphttp://w3schools.com/css/css_intro.asphttp://w3schools.com/css/default.asphttp://www.stumbleupon.com/submit?url=http://www.w3schools.com/css/css_howto.asp%26title%3DCSS%20How%20tohttp://digg.com/submit?url=http://www.w3schools.com/css/css_howto.asp&title=CSS%20How%20tohttp://www.reddit.com/submit?url=http://www.w3schools.com/css/css_howto.asphttp://delicious.com/save?v=5&noui&jump=close&url=http://www.w3schools.com/css/css_howto.asp&title=CSS%20How%20tomailto:?&subject=CSS%20How%20to&body=Take%20a%20look%20at%20this%20page%20at%20W3Schools.com:%20http://www.w3schools.com/css/css_howto.asphttp://twitter.com/home?status=Currently%20reading%20http://www.w3schools.com/css/css_howto.asphttp://www.facebook.com/sharer.php?u=http://www.w3schools.com/css/css_howto.asphttp://w3schools.com/about/default.asphttp://w3schools.com/forum/default.asphttp://w3schools.com/sitemap/default.asp#exampleshttp://w3schools.com/sitemap/default.asp#referenceshttp://w3schools.com/sitemap/default.asphttp://w3schools.com/sql/default.asphttp://w3schools.com/php/default.asphttp://w3schools.com/aspnet/default.asphttp://w3schools.com/xml/default.asphttp://w3schools.com/jquery/default.asphttp://w3schools.com/js/default.asphttp://w3schools.com/css/default.asphttp://w3schools.com/html/default.asphttp://w3schools.com/default.asphttp://www.w3schools.com/ -
7/27/2019 CSS How to
2/3
8/4/13 CSS How to
w3schools.com/css/css_howto.asp 2/3
Previous Next Chapter
W3Schools' Online Certification
The perfect solution for professionals who need to balance work, family,
and career building.
More than 10 000 certificates a lready issued!
Get Your Certificate
font-size:20pt;
}
If the page with the internal style sheet also links to the external style shee t the properties for h3 will be:
color:red;
text-align:right;
font-size:20pt;
The color is inherited from the external style she et and the text-alignment and the font-size is replaced by the
internal style sheet.
Multiple Styles Will Cascade into One
Styles can be specified:
inside an HTML element
inside the head section of an HTML page
in an external CSS file
Tip:Even multiple external style sheets can be referenced inside a single HTML document.
Cascading order
What s tyle will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style shee t by the following
rules, where number four has the highest priority:
1. Browser default2. External style sheet3. Internal style sheet (in the head section)4. Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style
defined inside the tag, or in an external style sheet, or in a browser (a default value).
Note:If the link to the external style shee t is placed after the internal style sheet in HTML , the
external style sheet w ill override the internal style sheet!
The HTML Certificate documents your knowledge of HTML.
The HTML5 Ce rtificate documents your know ledge of advanced HTML5.
The CSS Certificate documents your knowledge of advanced CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The jQuery Certificate documents your know ledge of jQue ry.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Ce rtificate documents your knowledge of PHP and SQL (MySQL).
Top 10 Tutorials
HTML Tutorial
HTML5 TutorialCSS Tutorial
CSS3 Tutorial
JavaScript Tutorial
jQuery Tutorial
SQL Tutorial
PHP Tutorial
ASP.NET Tutorial
XML Tutorial
Top 10 References
HTML/HTML5 Reference
CSS 1,2,3 ReferenceCSS 3 Browser Support
JavaScript
HTML DOM
XML DOM
PHP Reference
jQuery Reference
ASP.NET Reference
HTML Colors
Examples
HTML Examples
CSS ExamplesXML Examples
JavaScript Examples
HTML DOM Examples
XML DOM Examples
AJAX Examples
ASP.NET Examples
Razor Examples
ASP Examples
Quizzes
HTML Quiz
HTML5 QuizXHTML Quiz
CSS Quiz
JavaScript Quiz
jQuery Quiz
XML Quiz
ASP Quiz
PHP Quiz
SQL Quiz
Color Picker
Statistics
Browser Statistics
Browser OS
http://www.googleadservices.com/pagead/aclk?sa=L&ai=C5lHHAlX9UeIGwcmKB47sgfAL6d_U8QWJzOLQU8CNtwEQASDn6PoBUKzP85v7_____wFg5cLkg6QOoAHXkujZA8gBAqkCtFLR8NGSUT7gAgCoAwHIA50EqgSiAU_QZbYFgat-NyKUGLcmVY_Tjy6aKTYmH66zgYcC0pBoNVTJ2sA9pYZkHSR3R8qxBnhfWh7MgWdMXglWLNyNTGg_DM40Qo4mOYKP2zUXECiZ1X25W6aryuLPfXV-za6YW-g_jrUCX7DQsRjNsK7CujyE3UTUezt3KyAjBdcDgCwb0Vy5g2ZJFdewKyKKEDz1D_ZDVScoXMQ1LPiGMJN9qSbUlOAEAYgGAaAGAoAHke2XJg&num=1&cid=5Ghgdkgm1UUXkHrPhQabsUgK&sig=AOD64_3IneMySmrAFnUL5t9CdC9FwnjYTg&client=ca-pub-3440800076797949&adurl=https://www.specialk.co.inhttp://w3schools.com/browsers/browsers_os.asphttp://w3schools.com/browsers/browsers_stats.asphttp://w3schools.com/tags/ref_colorpicker.asphttp://w3schools.com/quiztest/quiztest.asp?qtest=SQLhttp://w3schools.com/quiztest/quiztest.asp?qtest=PHPhttp://w3schools.com/quiztest/quiztest.asp?qtest=ASPhttp://w3schools.com/quiztest/quiztest.asp?qtest=XMLhttp://w3schools.com/quiztest/quiztest.asp?qtest=jQueryhttp://w3schools.com/quiztest/quiztest.asp?qtest=JavaScripthttp://w3schools.com/quiztest/quiztest.asp?qtest=CSShttp://w3schools.com/quiztest/quiztest.asp?qtest=XHTMLhttp://w3schools.com/quiztest/quiztest.asp?qtest=HTML5http://w3schools.com/quiztest/quiztest.asp?qtest=HTMLhttp://w3schools.com/asp/asp_examples.asphttp://w3schools.com/aspnet/webpages_examples.asphttp://w3schools.com/aspnet/aspnet_examples.asphttp://w3schools.com/ajax/ajax_examples.asphttp://w3schools.com/dom/dom_examples.asphttp://w3schools.com/htmldom/dom_examples.asphttp://w3schools.com/js/js_examples.asphttp://w3schools.com/xml/xml_examples.asphttp://w3schools.com/css/css_examples.asphttp://w3schools.com/html/html_examples.asphttp://w3schools.com/tags/ref_colornames.asphttp://w3schools.com/aspnet/webpages_ref_classes.asphttp://w3schools.com/jquery/jquery_ref_selectors.asphttp://w3schools.com/php/php_ref_array.asphttp://w3schools.com/dom/dom_nodetype.asphttp://w3schools.com/jsref/default.asphttp://w3schools.com/jsref/default.asphttp://w3schools.com/cssref/css3_browsersupport.asphttp://w3schools.com/cssref/default.asphttp://w3schools.com/tags/default.asphttp://w3schools.com/xml/default.asphttp://w3schools.com/aspnet/default.asphttp://w3schools.com/php/default.asphttp://w3schools.com/sql/default.asphttp://w3schools.com/jquery/default.asphttp://w3schools.com/js/default.asphttp://w3schools.com/css3/default.asphttp://w3schools.com/css/default.asphttp://w3schools.com/html/html5_intro.asphttp://w3schools.com/html/default.asphttp://w3schools.com/cert/default.asphttp://w3schools.com/cert/default.asphttp://w3schools.com/cert/default.asphttp://w3schools.com/cert/default.asphttp://w3schools.com/cert/default.asphttp://w3schools.com/cert/default.asphttp://w3schools.com/cert/default.asphttp://w3schools.com/cert/default.asphttp://w3schools.com/cert/default.asphttp://w3schools.com/cert/default.asphttp://w3schools.com/css/css_background.asphttp://w3schools.com/css/css_id_class.asp -
7/27/2019 CSS How to
3/3
8/4/13 CSS How to
w3schools.com/css/css_howto.asp 3/3
REPORT ERROR | HOME | TO P | PRINT | FORUM | ABOUT | ADVERTISE WITH US
SVG Examples Browser Display
W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.
While using this site, you agree to have read and accepted our terms of use and privacy policy.Copyright 1999-2013 by Refsnes Data. All Rights Reserved.
http://w3schools.com/about/about_copyright.asphttp://w3schools.com/about/about_privacy.asphttp://w3schools.com/about/about_copyright.asphttp://w3schools.com/browsers/browsers_display.asphttp://w3schools.com/svg/svg_examples.asphttp://w3schools.com/about/about_advert.asphttp://w3schools.com/about/default.asphttp://w3schools.com/forum/default.asphttp://w3schools.com/css/css_howto.asp?output=printhttp://w3schools.com/css/css_howto.asp#tophttp://w3schools.com/default.asphttp://w3schools.com/css/css_howto.asphttp://www.w3schools.com/
