• CSS stands for Cascading Style Sheets.
• CSS is a markup language which has a collection of formatting rules that control the appearance of content in a web page.
• CSS is a means of separating the content of an html document from the style and layout of that document.
• It is very useful for maintaining a web site since its appearance (controlled by properties of HTML tags) can be managed from just one file.
• CSS Styles also enhance your site's look, accessibility and reduces file size.
Advantages of CSS :
• Separae content from presentation
• Fast loading pages
• Small file size
• Print friendly
• Consistency
• Reusability
• Reduce clutter & Easy maintenance
• Flexibility of design – different media types
• Google benefits - Better search engine rankings
CSS Syntax :
• The CSS syntax is made up of three parts: a selector, a property and a value
• The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value
• The property and value are separated by a colon, and surrounded by curly braces.
• selector {property: value}
Examples :body {color: blue}p {font-family: "sans serif”}
Types of CSS :
• External :
Externalstyles are written in a separate document and then attached to various Web documents. External style sheets can affect any document they are attached to.
Connection made via the LINK tag. Use the optional TYPE attribute to specify a media type
• REL : This attribute is used to define the relationship between the
linked file and the HTML document.
Ø REL=‘Style Sheet’ specifies a persistent or preferred style
A preferred style is one that is automatically applied.
As shown below the combination of REL=StyleSheet and a TITLE attribute specifies a preferred style. Authors cannot specify more than one preferred style.
Example :
<LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print">
Ø REL=‘Alternate StyleSheet’ defines an alternate style.
An alternate style is indicated by REL="Alternate StyleSheet". As shown in the below example the user could choose to replace the preferred style sheet.
Example :<LINK REL="Alternate StyleSheet" HREF="color-24b.css“
TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print">
• Imported
– Allows for using style sheets from other sources
– Must be included at the beginning of the style sheet using the @import statement
– Other CSS rules can be included
The @import method was adopted by designers to hide advanced style sheets from fourth generation browsers
• Inline
– Style Elements are styled within the html tags (e.g.<td style=“”>) in the page.
– Advantage :
• Maximum control over a precise element targeting it directly
• Localized to a particular element
– Disadvantage :
• Must edit existing markup
• Limits the implementation of Global style sheets.
Inline CSS used with ‘div’ tags
• Internal/Embedded
– The page elements are styled under the style attribute located in the head of the document.
– Advantage :
• Full control over the specified document.
• Specific pages can be styled as per style requirements
– Disadvantage :
• You must edit in each and every specific pages where the specific styles are defined.
• Limits the implementation of Global style sheets.
Type Attribute tells the browsers how to interact with the content
Media Attribute allows us to differentiate our styles based on their ‘Delivery Method
CSS 1 Vs CSS 2 :
• W3C distinguishes two separate specifications: CSS level 1 and CSS level 2
• Level 1 is a subset of Level 2
• Level 2 adds media-specific style sheets that can support different kinds of display technology:
Example : Visual browsers, Handheld devices, etc
• Level 2 also adds interesting features like content positioning, table layout, and so on
• CSS1 specification is about 70 pages long. CSS2 is 300+ pages long
• Neither specification is fully supported by any browser, but Netscape 6 probably comes closest.
StyleOrder &Precedence :
• Browser default : First, the browser's default or user-defined CSS rules are applied
• External style sheet: Style sheets defined externally are applied
• Internal style : sheet (specified inside the <head> tag)
• Inline style (inside an HTML element): Specific styles applied to individual HTML elements are applied.
• !Important declaration allows you to increase the weight of a declaration. Declarations with an increased weight override their normal or non-important counterparts.
• The following example demonstrates declaring a CSS property as important.
<html>
<head>
<title>Cascading</title>
<style type="text/css">
H1 {font-face: arial; font-size: 12pt; color: red ! important;}
</style>
<title>Cascading</title>
<style type="text/css">
H1 {font-face: arial; font-size: 12pt; color: red ! important;}
</style>
</head>
<body><h1 style="color: blue;">TechRepublic.com</h1></body>
<body><h1 style="color: blue;">TechRepublic.com</h1></body>
</html>
Rules for Precedence :
- Following are the rules to calculate an item’s specificity :-
- Every ID selectors has a weight of 100 (e.g. #divtab1)
- Class selectors has a weight 10 each (e.g. .border)
- Element selectors has a weight 1 each (e.g. INPUT,H1,Body )
- You can add up these weights for CSS rules and the Higher number wins.
- Example :
<style type="text/css">
BODY H1{color:red;}
H1 {color: green;} </style>
H1 {color: green;} </style>
Unit of Measurement :
• You can measure CSS property values in two ways:
• Relative values have no fixed, specific value. Rather, they are calculated in comparison to a current value.
• Example: Indent might be specified in em spaces, which vary with the display size of the text.
Relative Measurement | ||
Unit | Abbreviation | Example |
pixels | px | width:300px; |
em space | em | text-indent:4em; |
x space | ex | line-height:3ex |
percentage | XX% | height:100% |
· Absolute values have a fixed, specific value. They let you, the page creator, be exact in your measurements and control the display of your Web pages.
· Example: The font size might be 14 point.
· When you are using absolute values always remember that the reader might be viewing your page in a different environment from what you expect.
Absolute Measurement | ||
Unit | Abbreviation | Example |
Points | pt | font-size : 12pt |
Picas | pc | text-indent:2pc |
centimeters | cm | text-indent:4cm |
Inches | In | text-indent:1in |
Millimeters | Mm | text-indent:8mm |
CSS Box Model Hierarchy:
CSS Background :
• The CSS background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page
Background Properties | ||
Property | Description | Values |
background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page | scroll fixed |
background-color | Sets the background color of an element | color-rgb color-hex color-nametransparent |
background-image | Sets an image as the background | url(URL) none |
background-position | Sets the starting position of a background image | top left top center top right center left centercenter center right bottom left bottom center bottom right x% y% xposypos |
background-repeat | Sets if/how a background image will be repeated | repeat repeat-x repeat-y no-repeat |
CSS Font :
• The CSS font properties allow you to change the font family, boldness, size, and the style of a text.
• These options can entirely replace the <font> tag.
Font Properties | ||
Property | Values | Example |
font-family | font name generic font | font-family:arial font-family:arial, helvetica |
font-style | Normal / italic/ oblique | font-style:normal |
font-variant | Normal/ small-caps | font-variant:small-caps |
font-weight | Normal/bold/bolder/lighter | font-weight:bold |
font-size | Normal/length/absolute/ relative/ percentage | font-size:14px |
CSS Text :
• The CSS text properties allow you to control the appearance of text.
Text Properties | |||
Property | Values | Example | Description |
line-height | Normal/number/ Length/percentage | line-height:normal /1.5/22px/150% | Sets the distance between lines |
text-decoration | None / underline / overline / line-through / blink | text-decoration:none | Adds decoration to text |
text-transform | None /capitalize /uppercase /lowercase | text-transform:none | Controls the letters in an element |
text-align | Left /right /center /justify | text-align:left | Aligns the text in an element |
text-indent | Length / percentage | text-indent:20px; /10% | Indents the first line of text in an element |
white-space | Normal / pre | white-space:normal | Sets how white space inside an element is handled |
Color | Required color | color:green; | Sets the color of a text |
CSS Border :
• The CSS border properties allow you to specify the style and color of an element's border.
Border Properties | |||||
Property | Description | Values | |||
border-color | Sets the color of the four borders, can have from one to four colors | color | |||
border-left | A shorthand property for setting all of the properties for the left border in one declaration | border-left-width border-style border-color | |||
border-right | A shorthand property for setting all of the properties for the right border in one declaration | border-right-width border-style border-color | |||
border-style | Sets the style of the four borders, can have from one to four styles | None /hidden/dotted/dashed/ solid/double/groove/ridge/inset outset | |||
Border Properties | |||||
Property | Description | Values | |||
border-top | A shorthand property for setting all of the properties for the top border in one declaration | border-top-width border-style border-color | |||
border-width | A shorthand property for setting the width of the four borders in one declaration, can have from one to four values | Thin /medium/thick/length | |||
border-top-color | Sets the color of the top border | border-color | |||
border-top-style | Sets the style of the top border | border-style | |||
border-top-width | Sets the width of the top border | thin medium thick length | |||
CSS Margin :
• The CSS margin properties define the space around elements. It is possible to use negative values to overlap content.
• A shorthand margin property can also be used to change all of the margins at once.
Margin Properties | ||
Property | Description | Values |
margin-bottom | Sets the bottom margin of an element | autolength % |
margin-left | Sets the left margin of an element | autolength % |
margin-right | Sets the right margin of an element | autolength % |
margin-top | Sets the top margin of an element | autolength % |
CSS Padding :
• The CSS padding properties define the space within the elements and pushes the contents in.
• A shorthand padding property can also be used to change all of the paddings at once.
Padding Properties | ||
Property | Description | Values |
padding-bottom | Sets the padding padding of an element | autolength % |
padding-left | Sets the left padding of an element | autolength % |
padding-right | Sets the right padding of an element | autolength % |
padding-top | Sets the top padding of an element | autolength % |
Position & Overflow
Position:
Syntax - {position : value} e.g. #mydiv{position : Absolute}
– Absolute, Relative, Static, Fixed
Overflow:
Syntax - {overflow : value} e.g. #mydiv{overflow : Auto}
– Auto, Visible, Hidden, Scroll
Float & Clear
Float:
Syntax - {float : value} e.g. #mydiv{float : Left}
– Left, Right
Clear:
Syntax - {clear : value} e.g. #mydiv{clear : Both}
– Left, Right, Both
Display & Visibility
Display:
Syntax - {display : value} e.g. #mydiv{display : none}
– None, block, inline
Visibility:
Syntax - {visibility : value} e.g. #mydiv{visibility : hidden}
– Hidden, visibile
Z-index
• Z-index:
Syntax - {z-index : value} e.g. {z-index : 0}
– Auto, Number
@ Rules
• Importing:
Syntax - @import url(addonstyles.css);
<style type="text/css" media="all">@import url(monkey.css);</style>
• Media Type:
Syntax - @media
<Style>
@media print {
body {
font-size: 10pt; font-family: times new roman, times, serif;
}
#navigation { display: none; }
}
</Style>
CSS Selectors
• The selector is the link between the HTML document and the style. It specifies what elements are affected by the declaration. The declaration is that part of the rule that sets forth what the effect It is a combination of some pattern that is matched against all elements in the web document it is linked to.
• When meeting with the criteria, specified in the CSS declaration, the rules are apply to the element(s).
For example:
P {font-family: Arial, Tahoma, Verdana; color: red}
------- ------------------------------------------------------------
Selector Declaration
• img[src="image4.gif"]{border-color: red;} /* will change image4.gif Border color to red*/
• img[src="image8.gif"]{border-color: red;} /* will change image8.gif Border color to red*/
• img[src="image10.gif"]{border-color: red;} /* will change image10.gif Border color to red*/
Type selectors
• A type selector is the name of an element type.
• This is the most common type of CSS selectors.
• It applies the style declaration to all HTML elements on a page that are same as this selector name, irrespective to their position in the document.
• Supported by ALL browsers
For example: h3 {color: green ;}
body {margin: 3px ;}
Class selectors
- This selector applies formatting rules to the HTML element which has a 'CLASS' attribute.
- It is denoted by preceding the value with a dot (".")
- Supported by ALL browsers
For example:
.textClass{ font-family: verdana; font-size: 11px; color: black;}
H1.textClass {font-family: verdana; font-size: 16px; color: red; font-weight:bold;}
ID selectors
- This selector applies formatting rules to the HTML element which has a ‘ID' attribute.
- It is denoted by preceding the value with a pound (“#")
- Supported by ALL browsers
For example:
CSS: #specialPara {font-family: Verdana; font-size 12px; color: gray; font-style: italic;}
HTML: <p id=”specialPara”>Your Text here</p>
Descendant selectors
- This selector applies formatting rules to the last element in a sequential hierarchy of HTML elements.
- HTML elements are separated by white space.
- Supported by ALL browsers
For example:
p strong {font-style:italic; color:red;}
body div p {text-decoration:none; color:gray;}
Child Selectors
- The difference between the Descendant selectors and Child selectors lies in the level of closeness.
- Relationship between 2 elements is denoted using a greater than sign (“>”).
- IE 7 (Win), IE 5.2 (Mac), Firefox 1.5, Safari 1.3.2, Opera 9
For example:
p > span > b {color: red}
Universal Selectors
- A wild card characters ‘Asterisk’ (“*”) represents the Universal Selector.
- If there are more than one component (e.g. *.centerText) then * can be omitted from the declaration.
- Supported by ALL browsers
For example:
* {
font-family: verdana, arial, Tahoma;
font-size: 11px;
color:gray;
}
Adjacent Sibling Selectors
- The very first right element under the same element is Adjacent Sibling to the left element.
- Elements are separated by a "+" symbol
- Supported by IE 7 (Win), IE 5.2 (Mac), Firefox 1.5**, Safari 1.3.2**, Opera 9
For example:
CSS: H2 + P {color: red; text-decoration:underline;}
HTML:<body>
<h2>Heading for the paragraph</h2>
<p>Some text as paragraph.</p>
<div> Some other text in div</div>
</body>
Attribute Selectors
- This selector applies a style to an element having specific attribute irrespective to its value.
- It is also can be used to format XML document.
- Supported by IE 7 (Win), Firefox 1.5, Safari 1.3.2, Opera 9
For example:
a[target] {
background-color: gray; border: 2px solid red ;
}
- Specific-Value Attribute Selector
A[href=“http://www.google.com”] {font-weight: bold; color: red ;}
- Space separated Value Attribute Selector
CSS: A[class~=“alpha”] {font-weight: bold; color: red ;}
HTML: <a href=”http://www.test.com” class=”alpha beta delta”>Click</a>
- Begin With Specific-Value Attribute Selector
IMG[src^=“http://www”] {border: 1px solid #000099}
- End With Specific-Value Attribute Selector
A[href$=“co.in”] {font-weight: bold; color-red ;}
- Contain-Value Attribute Selector
a[href*="google"]
{
font-style: italic;
background-color:gray;
}
Pseudo-classes & Elements
Pseudo Classes
- These are denoted with a colon (“:”) symbol putting it after the element name followed by the Pseudo Class name
- CSS have following Pseudo Classes currently:
Link, Active, Visited & Hover (Supported by IE 5+ (Win), Firefox 1.5, Safari 1.3.2, Opera 9)
A:link {font-size:11px;color:blue;}
A:visited {font-size:11px;color:green;}
A:hover {font-size:11px;color:red;}
A:active {font-size:11px;color:yellow;}
- First-Child (Supported by IE 5 (Mac), Firefox 1.5**, Safari 1.3.2**, Opera 9)
p:first-child {font-size:11px;color:red;font-style:italic}
- Last-Child (Supported by IE 5 (Mac), Firefox 1.5**, Safari 1.3.2**, Opera 9)
p:last-child {font-size:11px;color:red;font-style:italic}
- Focus (Supported by Firefox 1.5, Safari 1.3.2, Opera 9)
input:focus{background-color:red;font-style:italic}
Pseudo Elements
- These are also denoted with a colon (“:”) symbol putting it after the element name followed by the Pseudo Element name
- The difference between the two is Pseudo Elements affect some part of the content.
- CSS have following Pseudo Elements currently:
First-Letter (IE 5.5+ (Win), IE 5 (Mac), Firefox 1.5, Safari 1.3.2**, Opera 9)
P:first-letter {font-size:18px;font-weight:bold;}
- First-Line (IE 5.5+ (Win), IE 5 (Mac), Firefox 1.5, Safari 1.3.2**, Opera 9)
P:first-line {color:red;font-weight:bold;}
- Before (Supported by Firefox 1.5, Safari 1.3.2, Opera 9)
P:before {content: “Some Text to add”}
- After (Supported by Firefox 1.5, Safari 1.3.2, Opera 9)
P:after {content: “Some Text to add”}
CSS Hacks
- IE Hack
<!--[if IE]>
<style type="text/css">
@import 'iestyle.css';
</style>
/*Only versions 6 and higher will apply these rules, 5.0 and 5.5 will not.*/
#s\omewhere{ property:value; }
/*Only versions 5.5 and higher will apply these rules*/
html*#somewhere{ property:value; }
/*Only versions 7 will apply these rules*/
html>Body #somewhere{ property:value; }
/*No hack, all versions will apply these rules.*/
#somewhere { property:value; }
