Tag: External Style Sheets
The id Selector
by Sagar Awasthi on May.28, 2009, under DIV/CSS, The id Selector, Web 2.0 Technology
You can also define CSS styles for HTML elements with the id selector. The id selector is defined with #. It has a Unique effect in HTML Document, as it is defined uniquely for each HTML Tag/Element.
The CSS style rule defined below will go with the element that has an “id” attribute with a value of “mycolor”:
# mycolor {color:green}
The style rule below will compare the “li” element that has an id with a value of ” link1″:
li#link1
{
text-align:center;
color:red
}
Again Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
CSS Comments
Comments are used to distribute your code among the working tags and your comments. It may help you when you edit the source code at a later date to recognize the part of code from the content present in your comments. A comment is ignored by browsers. A CSS comments starts with “/*”, and ends with “*/”, like this:
/*This is a comment*/
Grouping Various CSS Selector
by Sagar Awasthi on May.28, 2009, under Dreamweaver, Grouping Various CSS Selector, Web 2.0 Technology
You can make a group of various selectors. A comma will separate each selector. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:
h1,h2,h3,h4,h5,h6
{
color:green
}
What is CSS?
by Sagar Awasthi on May.28, 2009, under DIV/CSS, Introduction-CSS
CSS stands for Cascading Style Sheets, and used to define style for a HTML page i.e “how to display HTML elements”. Formats and Styles are normally writen in Style Sheets. Inline Styles were added to HTML 4.0 to solve a formatting Issues but with the change of technology, External styles has outpay Inline styles. External Style Sheets saves a lot of work. External Style Sheets are stored in CSS files and saved with “*.css” extension. We have to include the external stylesheet in our document with the tag given below:
<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>
By Style I mean the format or layout of displyed content. Let’s take an example of a style change would be to make words bold. In normal HTML you would use the <b> tag like so:
<b>Text is bold</b>
This work is fine, and there’s nothing wrong in it, but now if you say let’s change all the text of same page that you initially made bold to Italics, you then will go to each spot in the page and make the changes in the tag.
Another complication found in this example could be: let’s say you want to make the above content bold, make the font style “Georgia” and color to “Blue”, you’ld need to wrap up the content with lots of code, like below:
<font color=”#FF0000″ face=”Georgia”><strong>This is text</strong></font>
This is long-winded and makes your HTML more messy. With CSS, you can create a custom style in different file and define all properties or attributes, gives it a unique name which could ‘tag’ your HTML to apply these stylistic properties:
<p class=”myNewStyle”>My CSS styled text</p>
And either in External Style or in between the <head></head> tags of your web page you would insert this CSS code that defines the style we just applied:
<style type=”text/css”>
.myNewStyle {
font-family: Georgia;
font-weight: bold;
color: #FF0000;
}
</style>
In the above example we embed the css code directly into the page and it is called Embedded Style Sheet. This is fine for smal projects or at the time when the styles you’re defining will be used in a one page. Most of the times when you will be applying your styles to many pages and it would be a trouble copy-paste your CSS code into each page.
By using External CSS, you will be able to put out pages with much less work and can reduce your code lines, it load much faster than older ones, and will be easy to update and print!
Needless to say, you will have an lead over the competition. Yea!!!, BTW, all this is 100% standards compliant and should work in almost all the browsers being used today.
