Introduction
This article is continuation of the HTML5/CSS3 Contest. You can read the part 1 http://www.codeproject.com/Articles/751542/Beginners-Guide-to-HTML-CSS-Building-the-Basics
Cascading Style Sheets (CSS) is a language for specifying how documents are presented to users. CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts
What is Cascading in CSS ?
The style is
chosen by cascading down from the more general rules to the specific rule
required. The most specific rule is chosen. Three main sources of style information form a cascade
- The browser's default styles for the markup language.
- Styles specified by a user who is reading the document.
- The styles linked to the document by its author. These can be specified in three places:
- In an external file.
- In a definition at the beginning of the document
- On a specific element in the body of the document
Why CSS ?
- CSS helps you to keep the information content of a document separate from the details of how to display it
- You keep the style separate from the content so that you can:
- Avoid duplication
- Make maintenance easier
- Use the same content with different styles for different purposes
Now, we know what CSS and how it's useful for web application, then let's get started for the CSS Basics.
Setting up a CSS document
CSS documents can be created by using any Text editor, with the file extension of ".css", Let's create "Styles.css" for this article
Basics of CSS
CSS Declaration. : As I mentioned above, each rule or declaration will be mentioned in CSS document. A property and value
pair is called a declaration. The declaration is also split into two parts, separated by a colon : property and value, below is the example of declaration of CSS rule
below is the basic example for how to use CSS,
<h1>This is heading with Red color </h1>
CSS style declarion in Styles.css
h1{
color:red;
}
CSS Selectors
selectors are patterns used to select the element(s) you want to style.
- Type selectors
- Class selectors
- ID selectors
- Universal selectors
- Attribute selectors
Let's visit each one of the selector type
- Type Selector : What if you want to target all elements on a page, according to their type, for eg: you want to apply style rule for all anchor (<a>) tag with blue color. Type selector will apply the rule for all element with specified type.
eg :
<div>
<a href="#">CodProject</a>
<ul>
<li><a href="#"> Style can be applied at any levl</a></li>
</ul>
</div>
a{
color:blue;
text-decoration:underline;
}
- Class Selector : Classes are used for re usability. what if you want to declare a generic rule for all common elements with having same class name. Class selector is declared by using "." before the class name.
eg :
<div>
<ul>
<li><a href="#" class="MenuItems"> Home</a>
</li>
<li><a href="#" class="MenuItems"> About us </a>
</li>
<li><a href="#" class="MenuItems"> Contact </a>
</li>
</ul>
</div>
in styles. css
.MenuItms {
- ID Selectors : ID Selectors helps to apply style rule for particular element with having the ID. Id selectors are used to apply unique rules. ID Selectors declared with "#" before the element ID
Eg:
<p id="para1">
text for styling the paragraph tags. ID selectors
</p>
#para1{
font-size:25pt;
font-weight:bold;
}
- Attribute selectors : based on the attribute we can style our web pages. attribute selector accepts
[attribute=valueToMatch]
| Rule | eg | |
1 | X[title] |
a[title]{ color:red;} | select the anchor tags that have a title attribute |
2 | elem[attributeName="ValueToMatch"] |
img[alt="txt"]{color:yellow;} | Select the all image tags, which having alt attribute with value of "txt" |
3 | elemt[attributeName^="ValueTomatch"]
Starts with selector |
a[href^="http"] {
margin:5px; padding:2px;
} | Get all the anchor tag with attribute starts with particular value. |
4 | elment[attributeName$="ValueToMatch"]
Ends with selector |
img[src$=".gif"]{border:1px solid red;} | Get all images, with source attribute ends with ".gif" |
| | | |
Backgrounds and Text
In CSS, we can do lot of styles for text, there are many CSS rules are there, let's list out them here
tr>>
Sl.No | CSS rules | Explanation | example |
1 | font-family | font-family property should have several font names. If the browser does not support the first font, it tries the next font. |
p{font-family:"Times New Roman", Times, serif;} |
2 | font-style | font style is used to give extra styles, such as Normal or Italic |
#p1{font-style:normal}
#p2{font-style:italic} |
3 | font-size | specifies the font size |
font-size: xx-small
font-size: x-small
font-size: small
font-size: medium
font-size: large
font-size: x-large
font-size: xx-large
font-size: larger
font-size: smaller
font-size: 12px
font-size: 0.8em
font-size: 80% |
| | | |
4 | font-weight | the weight or boldness of the font |
font-weight: normal
font-weight: bold
font-weight: lighter
font-weight: bolder |
| | | |
5 | background-color | property sets the background color of an element |
background-color: red
background-color: rgb(255, 255, 128)
background-color: hsla(50, 33%, 25%, 0.75)
background-color: currentColor
background-color: transparent
background-color: #bbff00 |
| | | |
6 | background-image | sets one or several background images for an element. |
background-image: nonebackground-image: url(http: |
| | | |
7 | background-repeat | background image can be repeated along the horizontal axis, the vertical axis, both, or not repeated at all. |
background-repeat: repeat-x
background-repeat: repeat-y
background-repeat: repeat
background-repeat: no-repeat |
| | | |
8 | background-position | property sets the initial position |
#someDiv{
background-image: url("logo.png");
background-position: top;
} |
CSS style guides for effective use
- Use ID selectors : ID are faster compared to class and other selctors
- Use CSS Sprites : CSS Sprites are really useful to reduce the number of requests for the server. Combine your background images into a single image and use the CSS background-image and background-position properties to display the required image
- Usage of CSS Resets : Browsers ship with different default styles : http://meyerweb.com/eric/tools/css/reset/
- Minify the CSS (remove extra spaces) or you can use online minifier
- try to make your selectors shorter, it will improve readability
References
- Mozilla Developer network https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
- How CSS Works http://www.slideshare.net/webdevninja/how-css-works
- CSS style Guides http://css-tricks.com/css-style-guides/
- google CSS style guides http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
Points of Interest
While writing article, i learnt about CSS Resets and how CSS works in the browser
History
Version 1.0 - Initial version