CSS TEMPLATES(CASCAD STYLE SHEET)
A CSS (CASCADING STYLE SHEET) is a file separates the websites from the (X) HTML content's file.
The (X) HTML file arrange the contains but for presentation (Border, style, color, table etc).we use these CSS sheet.
We can use CSS sheet in two methods like INTERNAL and EXTERNAL style sheet.
1. INTERNAL STYLE SHEET:
In this we simply placing the CSS code in within the tags of each (X) HTML file.
The format is like:
<title>
<br /> <style type=”text/CSS”>
<br /> CSS Content Goes Here
<br /> </style>
<br /> </head>
<br /> <Body></body>
<br /> In this method if we change for a single page are changes to all pages. This method can be used if we need style for one page.
<br />
<br />2. EXTERNAL STYLE SHEET:
<br /> An external CSS file can be created with any text or HTML editor such as “Notepad” or “Dreamweaver”. A CSS file contains no (X) HTML, only CSS. We have to save it with the CSS file extension. You can link to the file externally by placing one of the following links in the head section of every (X) HTML file you want to style with the CSS file.
<br />
<br /> <link rel=”stylesheet” type=”text/css” href=“Path To stylesheet.css” />
<br />
<br /> By using an external style sheet, you’re entire (X) HTML files link to one CSS file in order to style the pages. This means, that if you need to alter the design of all your pages, you only need to edit one CSS file to make global changes to your entire website.
<br />
<br /> Here are a few reasons this is better.
<br />
<br /> Easier Maintenance
<br /> Reduced File Size
<br /> Reduced Bandwidth
<br /> Improved Flexibility
<br />
<br /> We can write CSS code using respective syntax.
<br /> The syntax for CSS is different than that of (X) HTML markup. It consists of only 3 parts
<br /> Selector {property: value}
<br /> The selector is the (X) HTML element that you want to style. The property is the actual property title, and the value is the style you apply to that property.
<br />Each selector can have multiple properties, and each property within that selector can have independent values. The property and value are separated with a colon and contained within curly brackets. Multiple properties are separated by a semi colon. Multiple values within a property are sperated by commas, and if an individual value contains more than one word you surround it with quotation marks. As shown below.
<br />
<br /> Body {
<br /> background: #eeeeee;
<br /> font-family: “Trebuchet MS”, Verdana, Arial, serif;
<br /> }
<br />
<br /> As you can see in the above code it from the color from the font-family with a semi-colon, separated the various fonts with commas and contained the “Trebuchet MS” within quotations marks. The final result sets the body color to light grey, and sets the font to ones that most users will have installed on there computer.
<br />
<br /> Combining Selectors
<br /> You can combine elements within one selector in the following fashion.
<br /> h1, h2, h3, h4, h5, h6 {
<br /> color: #009900;
<br /> font-family: Georgia, sans-serif;
<br /> }
<br /> In the above code its combine to all headings like h1 to h6 to one selector.Each one is separated by comma.
<br /> The final result of the above code sets all headers to green and to the specified font.
<br />
<br />
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
Posted by
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta content='https://www.blogger.com/profile/11315833318856881831' itemprop='url'/>
<a class='g-profile' href='https://www.blogger.com/profile/11315833318856881831' rel='author' title='author profile'>
<span itemprop='name'>Pradeep Mahananda</span>
</a>
</span>
</span>
<span class='post-timestamp'>
at
<meta content='https://webdesigningfly.blogspot.com/2009/10/css-templatescascad-style-sheet.html' itemprop='url'/>
<a class='timestamp-link' href='https://webdesigningfly.blogspot.com/2009/10/css-templatescascad-style-sheet.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-10-08T09:10:00-07:00'>9:10 AM</abbr></a>
</span>
<span class='post-comment-link'>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-257319298'>
<a href='https://www.blogger.com/post-edit.g?blogID=8445637990337430811&postID=1656020371810681146&from=pencil' title='Edit Post'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<div class='post-share-buttons goog-inline-block'>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
</span>
</div>
</div>
</div>
<div class='comments' id='comments'>
<a name='comments'></a>
<h4>No comments:</h4>
<div id='Blog1_comments-block-wrapper'>
<dl class='avatar-comment-indent' id='comments-block'>
</dl>
</div>
<p class='comment-footer'>
<div class='comment-form'>
<a name='comment-form'></a>
<h4 id='comment-post-message'>Post a Comment</h4>
<p>
</p>
<a href='https://www.blogger.com/comment/frame/8445637990337430811?po=1656020371810681146&hl=en' id='comment-editor-src'></a>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' width='100%'></iframe>
<script src='https://www.blogger.com/static/v1/jsbin/2315299244-comment_from_post_iframe.js' type='text/javascript'></script>
<script type='text/javascript'>
BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
</script>
</div>
</p>
</div>
</div>
</div></div>
</div>
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' href='https://webdesigningfly.blogspot.com/2009/10/html.html' id='Blog1_blog-pager-newer-link' title='Newer Post'>Newer Post</a>
</span>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='https://webdesigningfly.blogspot.com/2009/10/css-templates_08.html' id='Blog1_blog-pager-older-link' title='Older Post'>Older Post</a>
</span>
<a class='home-link' href='https://webdesigningfly.blogspot.com/'>Home</a>
</div>
<div class='clear'></div>
<div class='post-feeds'>
<div class='feed-links'>
Subscribe to:
<a class='feed-link' href='https://webdesigningfly.blogspot.com/feeds/1656020371810681146/comments/default' target='_blank' type='application/atom+xml'>Post Comments (Atom)</a>
</div>
</div>
</div></div>
</div>
<div id='sidebar-wrapper'>
<div class='sidebar section' id='sidebar'><div class='widget Followers' data-version='1' id='Followers1'>
<h2 class='title'>Followers</h2>
<div class='widget-content'>
<div id='Followers1-wrapper'>
<div style='margin-right:2px;'>
<div><script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<div id="followers-iframe-container"></div>
<script type="text/javascript">
window.followersIframe = null;
function followersIframeOpen(url) {
gapi.load("gapi.iframes", function() {
if (gapi.iframes && gapi.iframes.getContext) {
window.followersIframe = gapi.iframes.getContext().openChild({
url: url,
where: document.getElementById("followers-iframe-container"),
messageHandlersFilter: gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER,
messageHandlers: {
'_ready': function(obj) {
window.followersIframe.getIframeEl().height = obj.height;
},
'reset': function() {
window.followersIframe.close();
followersIframeOpen("https://www.blogger.com/followers/frame/8445637990337430811?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByMwMDAwMDAiByM5OTk5OTkqByNmNmY2ZjYyByM5RTUyMDU6ByMwMDAwMDBCByM5OTk5OTlKByMwMDAwMDBSByM5OTk5OTlaC3RyYW5zcGFyZW50\x26pageSize\x3d21\x26hl\x3den\x26origin\x3dhttps://webdesigningfly.blogspot.com");
},
'open': function(url) {
window.followersIframe.close();
followersIframeOpen(url);
},
'blogger-ping': function() {
}
}
});
}
});
}
followersIframeOpen("https://www.blogger.com/followers/frame/8445637990337430811?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByMwMDAwMDAiByM5OTk5OTkqByNmNmY2ZjYyByM5RTUyMDU6ByMwMDAwMDBCByM5OTk5OTlKByMwMDAwMDBSByM5OTk5OTlaC3RyYW5zcGFyZW50\x26pageSize\x3d21\x26hl\x3den\x26origin\x3dhttps://webdesigningfly.blogspot.com");
</script></div>
</div>
</div>
<div class='clear'></div>
</div>
</div><div class='widget BlogArchive' data-version='1' id='BlogArchive1'>
<h2>Blog Archive</h2>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://webdesigningfly.blogspot.com/2010/'>
2010
</a>
<span class='post-count' dir='ltr'>(2)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://webdesigningfly.blogspot.com/2010/02/'>
February
</a>
<span class='post-count' dir='ltr'>(2)</span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>
▼
</span>
</a>
<a class='post-count-link' href='https://webdesigningfly.blogspot.com/2009/'>
2009
</a>
<span class='post-count' dir='ltr'>(47)</span>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>
▼
</span>
</a>
<a class='post-count-link' href='https://webdesigningfly.blogspot.com/2009/10/'>
October
</a>
<span class='post-count' dir='ltr'>(10)</span>
<ul class='posts'>
<li><a href='https://webdesigningfly.blogspot.com/2009/10/diwali.html'>Diwali</a></li>
<li><a href='https://webdesigningfly.blogspot.com/2009/10/w3c-validation.html'>W3C VALIDATION</a></li>
<li><a href='https://webdesigningfly.blogspot.com/2009/10/web-hosting-services.html'>WEB HOSTING SERVICES</a></li>
<li><a href='https://webdesigningfly.blogspot.com/2009/10/web-server-in-linux.html'>Web Server in Linux</a></li>
<li><a href='https://webdesigningfly.blogspot.com/2009/10/html.html'>HTML</a></li>
<li><a href='https://webdesigningfly.blogspot.com/2009/10/css-templatescascad-style-sheet.html'>CSS TEMPLATES(CASCAD STYLE SHEET)</a></li>
<li><a href='https://webdesigningfly.blogspot.com/2009/10/css-templates_08.html'>CSS TEMPLATES</a></li>
<li><a href='https://webdesigningfly.blogspot.com/2009/10/css-templates.html'>CSS TEMPLATES</a></li>
<li><a href='https://webdesigningfly.blogspot.com/2009/10/american-professional-football.html'>AMERICAN PROFESSIONAL FOOTBALL ASSOCIATION</a></li>
<li><a href='https://webdesigningfly.blogspot.com/2009/10/great-features-of-seo.html'>Great features of the SEO</a></li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://webdesigningfly.blogspot.com/2009/09/'>
September
</a>
<span class='post-count' dir='ltr'>(35)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://webdesigningfly.blogspot.com/2009/08/'>
August
</a>
<span class='post-count' dir='ltr'>(2)</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class='clear'></div>
</div>
</div><div class='widget Profile' data-version='1' id='Profile1'>
<h2>About Me</h2>
<div class='widget-content'>
<a href='https://www.blogger.com/profile/11315833318856881831'><img alt='My photo' class='profile-img' height='80' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmHl8qTyonX-v_fycfmzJpWsShT_Sbjr7ElbjsszOXJJ4KuBB4xb33rU41F7HY_IxPCf-NiGkBLjkH3dWgMswgU61K2-r3ighHFc4gyg0AXX-pCkqN-6i2s026x99eDQ/s220/pradeep.jpg' width='80'/></a>
<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' href='https://www.blogger.com/profile/11315833318856881831' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'>
Pradeep Mahananda
</a>
</dt>
<dd class='profile-textblock'>I am A Very Cool Person</dd>
</dl>
<a class='profile-link' href='https://www.blogger.com/profile/11315833318856881831' rel='author'>View my complete profile</a>
<div class='clear'></div>
</div>
</div></div>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div>
<!-- end content-wrapper -->
</div></div>
<!-- end outer-wrapper -->
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/984859869-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY5OXhcWFgNbf_Dp7o4X7_gX5bGvmA:1732184428658';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8445637990337430811','//webdesigningfly.blogspot.com/2009/10/css-templatescascad-style-sheet.html','8445637990337430811');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '8445637990337430811', 'title': 'Web Designing', 'url': 'https://webdesigningfly.blogspot.com/2009/10/css-templatescascad-style-sheet.html', 'canonicalUrl': 'https://webdesigningfly.blogspot.com/2009/10/css-templatescascad-style-sheet.html', 'homepageUrl': 'https://webdesigningfly.blogspot.com/', 'searchUrl': 'https://webdesigningfly.blogspot.com/search', 'canonicalHomepageUrl': 'https://webdesigningfly.blogspot.com/', 'blogspotFaviconUrl': 'https://webdesigningfly.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Web Designing - Atom\x22 href\x3d\x22https://webdesigningfly.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Web Designing - RSS\x22 href\x3d\x22https://webdesigningfly.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Web Designing - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/8445637990337430811/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Web Designing - Atom\x22 href\x3d\x22https://webdesigningfly.blogspot.com/feeds/1656020371810681146/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/8f7002974bbf4dbb', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'http://webdesigningfly.blogspot.com/', 'pageType': 'item', 'postId': '1656020371810681146', 'pageName': 'CSS TEMPLATES(CASCAD STYLE SHEET)', 'pageTitle': 'Web Designing: CSS TEMPLATES(CASCAD STYLE SHEET)'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'isResponsive': false, 'isAlternateRendering': false, 'isCustom': false}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'CSS TEMPLATES(CASCAD STYLE SHEET)', 'description': '\t\t\t\r \r A CSS (CASCADING STYLE SHEET) is a file separates the websites from the (X) HTML content\x27s file.\r The (X) HTML file arrange the conta...', 'url': 'https://webdesigningfly.blogspot.com/2009/10/css-templatescascad-style-sheet.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 1656020371810681146}}]);
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2646514562-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/1964470060-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FollowersView', new _WidgetInfo('Followers1', 'sidebar', document.getElementById('Followers1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'sidebar', document.getElementById('Profile1'), {}, 'displayModeFull'));
</script>
</body>
</html>