1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Why we use CSS?

Discussion in 'CSS' started by alisha0512, Jun 23, 2008.

  1. #1
    please anybody tell me what is the use of CSS?
     
    alisha0512, Jun 23, 2008 IP
  2. JohnGG49

    JohnGG49 Peon

    Messages:
    4
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Short answer. Make a change to any style of typeface or object on one place and effect all pages where it is used. Think of it as a 'Library' of 'definitions'. An example would be, if you had defined h1 as red and wanted to change it to blue, you make the change in the CSS and it changes all instances.
    Go to w3schools.com and get educated.
     
    JohnGG49, Jun 23, 2008 IP
    kentuckyslone likes this.
  3. alisha0512

    alisha0512 Banned

    Messages:
    345
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for your reply. Please tell me,Do we need any software for CSS?
     
    alisha0512, Jun 23, 2008 IP
  4. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #4
    Notepad will do it, but I recommend Notepad++, makes life easier ;)
     
    blueparukia, Jun 24, 2008 IP
  5. tarun1979

    tarun1979 Peon

    Messages:
    198
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #5
    CSS is used for

    Code reusability
    Clean code
    Easy handling of styling from a single file and more

    Any text editior can be used for this
     
    tarun1979, Jun 24, 2008 IP
  6. rowen77

    rowen77 Peon

    Messages:
    264
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Save time
    +
    Style a Document
    +
    Seperate presentation from structure
    +
    Make web pages load faster
     
    rowen77, Jun 24, 2008 IP
  7. Tobacconist

    Tobacconist Peon

    Messages:
    132
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Those are true + Google likes css sites:)
     
    Tobacconist, Jun 24, 2008 IP
  8. matejzr

    matejzr Peon

    Messages:
    34
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    CSS can be used locally by the readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, and reduce complexity and repetition in the structural content. CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.
     
    matejzr, Jun 24, 2008 IP
  9. C.Whyte

    C.Whyte Peon

    Messages:
    802
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #9
    It will also make your site run a lot faster
     
    C.Whyte, Jun 24, 2008 IP
  10. alisha0512

    alisha0512 Banned

    Messages:
    345
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    thanks for your reply.
    please tell me syntax of CSS.
     
    alisha0512, Jun 25, 2008 IP
  11. modern_mozart101

    modern_mozart101 Peon

    Messages:
    105
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    If you decide to make a change in style to your website it can be altered instantly without the need for manually altering the font/style of each individual web page
     
    modern_mozart101, Jun 25, 2008 IP
  12. Quevin

    Quevin Peon

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    I like CSSEdit for Mac, and TopStyle for PC. Sure, you can use notepad if you want to try and remember everything or you've got your reference book in your lap.
     
    Quevin, Jun 25, 2008 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Don't forget it can also save BANDWIDTH, and can save handshakes too through the use of techniques like image reduction.

    Anything you can declare in the CSS that is shared on multiple pages of your website will save bandwidth and speed page-loads. Your general page layout is usually consistant across all pages on a site - as such anything you declare in your CSS is already cached after the user visits your first page, they go to another page on your site and all that appearance info is already on their machine.

    It also simplifies adding/removing content if you are working directly with flat HTML files, AND simplifies controlling your output from PHP/ASP/CGI/SSI of choice as you can concentrate on using one or two tags in your code, instead of having to have ten to twenty tags with hordes of attributes making it hard to tell your CGI/SSI code apart from the HTML it outputs.

    It is also LESS overall code, therin easier to maintain. For example old school flat html you might have a section of news items all coded thus:

    <TABLE BORDER="1" CELLPADDING="0" CELLSPACING="8" BGCOLOR="#CCCCCC">
    	<TR>
    		<TH BGCOLOR="NAVY">
    			<FONT COLOR="WHITE">Jimbo makes a killing</FONT>
    		</TH><TH BGCOLOR="NAVY">
    			<FONT COLOR="WHITE">10/27/2007</FONT>
    		</TH>
    	</TR><TR>
    		<TD COLSPAN="2" BGCOLOR="#EEEEEE">
    			Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    			sed do eiusmod tempor incididunt ut labore et dolore magna
    			aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    			ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    		</TD>
    	</TR><TR>
    		<TH BGCOLOR="NAVY">
    			<FONT COLOR="WHITE">Quando Omni Flunkus Moritati</FONT>
    		</TH><TH BGCOLOR="NAVY">
    			<FONT COLOR="WHITE">10/27/2007</FONT>
    		</TH>
    	</TR><TR>
    		<TD COLSPAN="2" BGCOLOR="#DDDDDD">
    			Duis aute irure dolor in reprehenderit in voluptate velit
    			esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    			occaecat cupidatat non proident, sunt in culpa qui officia
    			deserunt mollit anim id est laborum
    		</TD>
    	</TR>
    </TABLE>
    Code (markup):
    Which comes in at almost 1k. 'modern' coders would use the following HTML (or something similar) to do the same thing:

    <div class="newsItem odd">
    	<h2>Jimbo makes a Killing <span>10/27/2007</span></h2>
    	<p>
    		Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    		sed do eiusmod tempor incididunt ut labore et dolore magna
    		aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    		ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    	</p>
    </div>
    
    <div class="newsItem even">
    	<h2>Quando Omni Flunkus Moritati</h2>
    	<p>
    		Duis aute irure dolor in reprehenderit in voluptate velit
    		esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    		occaecat cupidatat non proident, sunt in culpa qui officia
    		deserunt mollit anim id est laborum
    	</p>
    </div>
    Code (markup):
    Which at 630 or so bytes is two-thirds the size and a HELL of a lot easier to see what's going on... The CSS for that:

    * {
    	margin:0;
    	padding:0;
    }
    
    .newsItem {
    	color:#000;
    	background:#CCC;
    	padding:8px;
    }
    
    .newsItem h2 {
    	margin-bottom:8px;
    	padding-right:8em;
    	font:bold 100%/120% serif;
    	color:#FFF;
    	background:#008;
    }
    
    .newsItem h2 span {
    	display:block;
    	margin-top:-1.2em;
    	text-align:right;
    }
    
    .odd p {
    	background:#EEE;
    }
    
    .even p {
    	background:#DDD;
    }
    
    Code (markup):
    At 379 bytes might seem like we're just breaking even - but what if there were ten news items instead of just two? Each news item on it's own 'old school' without CSS ends up 477 bytes, while the 'new way' it's only 315 bytes - it can add up quickly since the CSS would not change.

    ... and one simple look at the differences in HTML should make it apparant why the new way is 'better' and generally considered 'simpler'.
     
    deathshadow, Jun 26, 2008 IP
  14. ferman

    ferman Well-Known Member

    Messages:
    968
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    140
    #14
    because...

    its SEO friendly.
    to make changes in all pages one css file is used.
     
    ferman, Jun 27, 2008 IP
  15. alisha0512

    alisha0512 Banned

    Messages:
    345
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    How CSS is SEO friendly?
     
    alisha0512, Jun 27, 2008 IP
  16. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #16
    Because it removes f*cked up code from your HTML
     
    blueparukia, Jun 27, 2008 IP
  17. childfont

    childfont Peon

    Messages:
    115
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    CSS is web design friendly not SEO friendly.

    if you want to make specific change in each and every page and on selected portion you just need to change in CSS file and the same changes will apply to each and every page, this will save time and makes website very well designed.

    Website with out having any external css also may get good rank, it just the code.
     
    childfont, Jun 27, 2008 IP
  18. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #18
    Yes, that is true. But who cares. If it'll get people removing things like "BORDER="0"" out of their HTML, I'll be happy.

    And the ;ess HTML you give to search engines, the easier it is for them to find content ;)
     
    blueparukia, Jun 27, 2008 IP
  19. xfreex

    xfreex Peon

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    you may change easier with css file
    and i think dreamweaver ise useful for css
    dreamweaver complete code automatically
     
    xfreex, Jun 29, 2008 IP