Tuesday 20 August 2013

Comments within HTML & CSS , Selectors

HTML and CSS give you the ability to leave comments within the code. These comments can be used to help with organization, set reminders, and manage code more effectively. Comments become especially useful when there are multiple people working on the same code. Any content wrapped within comments will not be rendered on the page.
HTML comments wrap the content starting with <!-- and end with -->. CSS comments wrap the content starting with /* and end with */.

Selectors

Selectors, as mentioned earlier, are the determining factor as to which elements are to be stylized. In so, it is important to fully understand how to use selectors and how they can be leveraged. Some of the most common selectors include elements, IDs, and classes, or some combination of the three.

Type Selectors

Type selectors are the most basic selector. Simply enough, elements without any necessary attributes are targeted to apply styles. Type selectors are preferred whenever possible as they require less code and are easy to manage.
HTML
    

  1. <p>...</p>
    2.
CSS
    

  1. p { ... }
    2.

Class Selectors

Class selectors allow you to apply the same style to an array of elements by giving them all the same class attribute. Classes are denoted in CSS by identifying the class with a leading period. It is permissible to use the same class attribute on multiple elements on a page.
HTML
    

  1. <div class="awesome">...</div>
    2.
CSS
    

  1. .awesome { ... }
    2.

ID Selectors

ID selectors are similar to class selectors however they are used to target only one unique element at a time. Instead of using the class attribute, IDs naturally use the ID attribute. In place of a period, as with classes, IDs are denoted by identifying the ID with a leading hash sign. IDs are only allowed to be used once per page and should ideally be reserved for significant elements.
HTML
    

  1. <div id="shayhowe">...</div>
    2.
CSS
    

  1. #shayhowe { ... }
    2.

Combining Selectors

A beauty of CSS is the ability to combine selectors and inherit styles. This allows you to start with a more generic selector and work your way to being more specific as necessary. In addition, you can combine different selectors to be as specific as you wish.
    

  1. ul#social li {
    2. 

  2.   padding: 0 3px;
    3. 

  3. }
    4. 

    5. 

  5. ul#social li a {
    6. 

  6.   height: 17px;
    7. 

  7.   width: 16px;
    8. 

  8. }
    9. 

    10. 

  10. ul#social li.tumblr a {
    11. 

  11.   background: url('tumblr.png') 0 0 no-repeat;
    12. 

  12. }
    13.

Additional Selectors

Selectors can be extremely powerful and the selectors outlined above are only the beginning. Many more advanced selectors exist and are readily available. Before dropping classes or IDs on random elements check and see if there might be a better selector to do the job for you. It is also worth mentioning that not all advance selectors work in every browser, particularly with new selectors introduced in CSS3. If a selector doesn’t seem to be working properly check its browser support.

Referencing CSS

Once content is in place you may begin to style the HTML with CSS. There are a handful of different ways to reference CSS, some of which are better than others.
The best practice for referencing CSS is to include all of your styles within a single external stylesheet, referenced within the heading of a page. Using an external stylesheet allows you to use the same styles across an entire website and quickly make changes site wide.
Other options include internal and inline styles. These options are generally frowned upon as they make updating websites cumbersome and unwieldy.
    

  1. <!-- External CSS File -->
    2. 

  2. <link rel="stylesheet" href="file.css">
    3. 

    4. 

  4. <!-- Internal CSS -->
    5. 

  5. <style type="text/css">
    6. 

  6. p {
    7. 

  7.   color: #f60;
    8. 

  8.   font-size: 16px;
    9. 

  9. }
    10. 

  10. </style>
    11. 

    12. 

  12. <!-- Inline CSS -->
    13. 

  13. <p style="color: #f60; font-size: 16px;">Lorem ipsum dolor sit amet...</p>
    14.

Using External CSS Stylesheets

As mentioned above, the best way to reference CSS is with an external stylesheet. Doing so allows you to use one set of styles across an entire website. Making changes to the style of a website becomes painless, and users download less data overall to properly render the styles.
Within the head of the HTML document, the link element is used to define the relationship between the HTML file and the CSS file. Since you are linking to CSS the rel attribute with a value of stylesheet is used to specify the relationship. Furthermore, the href attribute is used to identify the location, or path, of the CSS file.
In order for the CSS to render, the path of the href attribute value must directly correlate to where the CSS file is stored. In the example above the file.css is stored within the root directory, the same location as the HTML file.
Should the CSS be within a subdirectory, the href attribute value would need to correlate this path accordingly. For example, if the file.css is stored within a subdirectory call styles the href attribute value would bestyles/file.css, using a forward slash to indicate different directories.
    

  1. <head>
    2. 

  2.   <link rel="stylesheet" href="styles/file.css">
    3. 

  3. </head>
    4.

Reset

By default every web browser has it’s own interpretation on how different elements are to be stylized. How Chrome decides to render an input field is likely going to be much different than how Internet Explorer renders an input field. To combat for cross browser compatibility CSS resets have become widely used.

Cross Browser Compatibility & Testing

As mentioned, different browsers render pages in different ways. Its important to recognize the value in cross browser compatibility and testing. Websites don’t need to look the same in every browser but they should beclose. What browsers you wish to support and to what degree is a decision you will need to make in accordance with what is best for your website.
CSS resets include a handful of rule sets that take every common HTML element and scale them down to one unified style. These resets involve removing any sizing, margins, paddings, or additional styles. Resets need to be the very first CSS styles to be rendered to ensure that all the styles there after are being applied to the skeleton of a page.
There are a ton of different resets available to use, all of which have their own forte. My personal favorite is Eric Meyers reset, which has been adapted to include a reset for the new HTML5 elements. Eric’s reset is short and to the point, but feel free to research your own resets and find what you’re comfortable using.

Code Validation

As proficient as we all are, we do make mistakes. Thankfully when writing HTML and CSS we have a validator that can check our work. The W3C has built both HTML and CSS validators that will scan your code looking for mistakes. Validating your code not only helps it render properly across all browsers, it also teaches you the best practices for writing code.
at