13 CSS

Dr M. Vijayalakshmi

Introduction

CSS stands for “Cascading Style Sheets” which is a technology to control how elements are presented in the Web page.The term Cascading refers to the procedure that determines which style will apply to a certain section, if we have more than one style rule.The term Style refers to how you want a certain part of our page to look. We can set colors, fonts, alignment, borders, backgrounds, spacing, margins, and much more.The term Sheets represents that the “sheets” are like templates, or a set of rules, for determining how the webpage will look.So, CSS (all together) is a styling language that defines a set of rules to tell browsers how the webpage should look.A style sheet is a document that contains style information about one or more documents written in markup languages. It enables us to control rendering of styles such as fonts, color, type face, size and other aspects of document style.

What is “Style”?

“Style” is a command that you set to tell the browser how a certain section of your webpage should look.You can apply style on many HTML “elements like <p> <h1> <table> etc.

Advantages:

Most of the browsers cache external style sheets. So, once a style sheet is cached, there is no delay in document presentation.The size of a document using external style sheet is comparatively smaller and hence, download time is also smaller. This speeds up overall response time.

How to write style rules?

There are two parts when we write style rules: (1) selector and (2) declaration.Selector: It is the HTML element that you want to add style to. For e.g. <p> <h1> <table> etc.Declaration: It is the statement of style for that element. It is made up of property and value.They are defined as,

Selector {declaration;}

Declaration = {property: value;}

Property: defines what aspect you want to change. For e.g. color, font, margins, etc. Value: defines the exact setting for that aspect. For e.g. red, italic, 40px, etc. Examples:

h1 {color: red;}

h1 {color: blue; background-color: green;}

Where to put the style rules?

There are 4 ways to attach CSS to a page:

Inline Style Sheet – CSS is not attached in the <header> but is used directly within HTML tags.

Internal Style Sheet – Best used to control styling on one page.

External Style Sheet – Best used to control styling on multiple pages.

Imported Style Sheet – To import CSS from other style sheets.

Inline Style sheet

The style information is incorporated directly into the HTML tags.

</head>

<body>

<p style= “text-align: center;

font-weight: bold;

color: yellow;”>What was I thinking?</p>

</body>

Internal Style sheet

The style information is placed under the style tag in the head section of an HTML page. <head><title>My Wonderful Example

</title>

body {

text-align: left;

font-family: trebuchet, verdana;

}

</style>

</head>

External Style sheet

External style sheet is specified using the HTML <link> tag. The Style information is written in a separate file and is referenced from an HTML document.An external style sheet is useful when the same style is applied on different documents. <html>

<head><title>My Way</title>

</head>

</html>

Imported Style Sheet

We can import the style sheet using @import statement. The import statement is used within the style tag in an HTML document as follows

<style>

@import url(“style.css”);

</style>

Note: The import statement must be the first rule within a style tag.

Internal rules override the conflicting rules in the imported style sheets.

<style>

@import url(“style.css”);

p {color:green;}

</style>

The above mentioned style rule makes all paragraphs green even if style.css contains a different rule for paragraphs.

@import url(http://www.xxx.com/red.css);

@import url(/stylesheets/pink.css); >

</style>

A <style> tag may contain an arbitrary number of import statements, but the order in which the style sheets are imported is important in determining cascading styles.

Cascading Rules

More specific rules gets preference over less specific rules.

p b {color:green;}

b{color:Red;}

In the following example the word ‘hello’ will be in red whereas the word ‘world’ will be in green color due to the above mentioned rule.

<b>hello</b> <p><b>world</b></p>

Order rules

The following figure shows the rules for resolving conflicting stylesInline Internal External Imported Browser’s Style Style Style Style

Default style ———————————————————————————————>

Highest priority lowest priority

Working of CSS

CSS works in conjunction with HTML. One way is that an HTML file (or multiple files) links to a CSS file (or multiple CSS files) and when the web browser displays the page, it references the CSS file(s) to determine how to display the content.

Another approach is that HTML elements are marked with “IDs” and “classes,” which are defined in the CSS file and using this the browser knows which styles belong to which element. Each element type (<h1>, <img>, <p>, <li>, etc.) can also be styled with CSS. IDs and classes are defined by the person writing the code and there are no default IDs and classes.

Difference between ID and Classes

IDs and classes function the same way. They both can provide the same styling functionality to an HTML element, however IDs are unique; each element can only have one ID, and that ID can only be on the page once. Classes are not unique; an element can have multiple classes, and multiple elements can have the same class.

IDs can be used to style elements that are different from anything else on the page. Classes can be used to style multiple elements on a single page that have things in common, like font size, color, or style.

The styles for each element, ID, or class used on an HTML page are defined in a CSS document.

Elements are declared with the element (HTML) tag; styles for the element are wrapped with curly brackets like

h1 { }

IDs are declared with a hash sign and the ID name; styles for the ID are wrapped with curly brackets like

#title { }

Classes are declared with a period and the class name; styles for the class are wrapped with curly brackets like

.bodytext

{

}

Anatomy of a style rule

Selector

{

Property 1 : value 1;

Property 2 : value 2;

Property N : value N;

}

The selector specifies which HTML elements are affected by the style rule.

The declaration specifies what the effect will be.

Grouping Selectors

Group the same selector with different declarations together on one line.

h1 {color: black;}

h1 {font-weight: bold;}

h1 {background: white;}

The above declarations can be grouped as,

h1 {

color: black;

font-weight: bold;

background: white;

}

Selectors having common declarations are grouped into a comma-separated list.

h1{color:red;}

h2{color:red;}

h3{color:red;}

The above declarations can be written as

h1,h2,h3{color:red;}

Selectors

Selectors are patterns used to select the elements we want to style. Now we will look at the demonstration of the different selectors.

Type selectors

A type selector is a simple selector, which is the name of a document element and it matches every single element of the document.

For e.g.: The selector b selects every <b> element.

Universal selector

CSS has a special selector *, which matches with every single element in the document. For eg: *{color:red;}.It makes all the text in the document red.

Compound Selectors

Selectors can be defined so that a style rule applies to an element only when it is a descendant of a certain other type of element. Examples:

ul ul { list-style-type : square }

This specifies that an unordered list inside another unordered list will be bulleted by squares.

h1 em em { color : red }

This specifies that emphasized text inside emphasized text in an <h1> header will appear in red. Compound selectors are more specific than simple selectors like

p { color : red }

div p { color : blue }

Descendant selectors

A descendant selector selects only those elements that are descendants of a particular element.

For e.g.

<div><b>C</b>ascading<b>S</b>tyle<b>S</b>heet</div> <p>descendant<b>selectors</b></p>

<p>this <b>is</b>a<i><b>paragraph</b></i></p>

To select all the <b> elements which are descendants of <i> element we need to give as, p i b which selects the word ‘paragraph’ from the above text.

Child selectors

Child selectors select elements that are immediate children of a specified element.

For e.g.: <p>This<b>is</b>a<i><b>paragraph</b></i><p> The selector p>b selects only highlighted <b> elements .

The selector p>i>b selects only the <b>element whose parent is the <i>element whose parent is ,in turn the <p> element.

Style Classes

Style classes allow us to control which elements of a given type should use a style rule. This method has two parts:

In the style sheet, the selector defines the class name, which is preceded by a period.

In the HTML, the tag includes the class attribute and specifies the value of the class name

Example:

Define the nodec class for anchor tags as,

a.nodec { text-decoration : none }

This suppresses the usual underlining. Use it in HTML like so, <a class=”nodec” href=”somepage.html”>Link text</a>

Style classes can also be “generic,” that is not tied to a specific element type.

Example:

Define the zowie class as,

.zowie { text-decoration : blink }

Use it on an emphasized element as,

<em class=”zowie”>Important!</em>

Use it with no other style attributes as,

<span class=”zowie”>Buy Now!</span>

The <span> and <div> Tags

These tags are provided to allow arbitrary chunks of HTML to be treated as elements. This is usually done in order to apply style attributes to them, as in the preceding example.

A <span> … </span> element defines an “inline” structure, i.e. it simply defines a stretch of text. Thus it can be used within a paragraph or table element without affecting the flow of the text.

A <div> … </div> element defines a “block” structure. Usually the browser will place line breaks before and after this element, but otherwise it has no effect itself.

Pseudo-classes

These are like style classes, but an element acquires a pseudo-class by user action or by a relationship other than descendancy.

In the style sheet, a pseudo-class name is preceded by a colon.

In the HTML, the pseudo-class name is NOT used with the affected tag, because it is implied.

Pseudo classes match elements using the information other than their name, content or attribute such as states of an anchor element.

Pseudo elements , on the other hand, address sub-parts of an element such as the first letter of a paragraph.

The general form is

Selector:pseudo-class{declaration}

Selector:pseudo-element{declaration}

Pseudo Classes and Elements

The :first-child, :last-child and only-child pseudo classes

The first-child pseudo class selects an element if it is the first child of its parent regardless of what this parent element is.

For eg: p:first-child selects all p elements that are the first children of any element.

The last-child pseudo class selects the last child element of any element.

For eg: p:last-child selects all p elements that are the last children of any element The only-child pseudo class selects an element if it is the only child of another element.

The anchor pseudo classes :link and :visited

The :link pseudo class applies to hyperlinks that have not been visited.The :visited pseudo class applies to hyperlinks that have already been visited at least once.

For e.g.:

a:link {color :blue;}

a:visited{color:red;}

The dynamic pseudo classes :hover, :active, :focus

The :hover pseudo class selects elements that are being designated by the user with a pointing device.

The :active pseudo class applies to an element that is currently being activated by the user.

The :focus pseudo class applies to an element that has currently got the focus by keyboard events or other means.

a:focus {color:green;}

a:hover{color:yellow;}

a:active{color:pink;}

The :first-line pseudo element

The :first-line pseudo element allows us to add styles to the first line of an element.

For e.g.:

p:first-line{text-decoration:underline;} underlines the first line of a paragraph.

The :first-letter pseudo element

The :first-letter pseudo element is used to add style to the first letter of the first line of block elements.

For e.g.:

p:first-letter {font-size:300%; float:left;}

Example of Pseudo Classes – first-line

<!DOCTYPE html>

<html>

<head>

<style>

p::first-line {

color: #ff0000;

font-variant: small-caps;

}

</style>

</head>

<body>

<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p> </body>

</html>

The :before and :after pseudo elements

The :before pseudo element inserts some new content before an existing element

The :after pseudo element inserts some new content after an existing element .

The content property is used to define the content to be inserted before and after the selected elements.

For e.g., :body > ol> li :before { content: ”chapter:”; }

Adds chapter before every <li> element which is a grandchildren of the <body> element.

Attribute Selector

Attribute Selector provide a way of selecting elements depending on the presence of an attribute or the presence of certain attribute values.

Simple Attribute Selector

It selects elements having specified attribute.

General syntax :

element[attribute_name] or

[attribute_name]

For e.g.: a[href] selects all <a>elements having the attribute href.

Attribute Selector – Example

<!DOCTYPE html>

<html>

<head>

<style>

a[target] {

background-color: yellow;

}

</style>

</head>

<body>

<p>The links with a target attribute gets a yellow background:</p> <a href=”http://www.w3schools.com”>w3schools.com</a>

<a href=”http://www.disney.com” target=”_blank”>disney.com</a> <a href=”http://www.wikipedia.org” target=”_top”>wikipedia.org</a>

<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p> </body>

</html>

Attribute Value Selector

Selecting elements based on the attribute value.

The syntax :

element[attribute_name=“attribute_Value”]

[attribute_name=“attribute_Value”]

Example:

p[type=“note”] selects all <p>elements having the type attribute value “note”.

<!DOCTYPE html>

<html>

<head>

<style>

a[target=_blank] { background-color: yellow;}

</style>

</head>

<body>

<p>The link with target=”_blank” gets a yellow background:</p> <a href=”http://www.w3schools.com”>w3schools.com</a>

<a href=”http://www.disney.com” target=”_blank”>disney.com</a> <a href=”http://www.wikipedia.org” target=”_top”>wikipedia.org</a>

<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>

</body>

</html>

Starts-with attribute value selector

The selector selects elements having an attribute value that starts with the value specified.

The general syntax :

Element[attribute_name^=“attribute_value”]

For example, the selector p[type^=“copy”] matches

<p type=“copyright”>copyright</p> as well as <p type=“copyleft”>copyleft..</p>

<!DOCTYPE html>

<html>

<head>

<style>

[class^=”top”] {

background: yellow;

}

</style>

</head>

<body>

<h1 class=”top-header”>Welcome</h1>

<p class=”top-text”>Hello world!</p>

<p class=”top-content”>Are you learning CSS?</p>

<p><b>Note:</b> For [<i>attribute</i>^=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>

</body>

</html>

Ends-with attribute value selector

This attribute selects elements having attribute value that ends with the value specified.

The general syntax :

Element[attribute_name$=“attribute_value”]

For e.g.,

a[href$=“.com”] – selects those anchor tags that point to .com websites and not any other domains.

Substring match attribute value selector

This selector selects those elements having an attribute value containing at least one occurrence of the

value specified.

The general syntax :

Element[attribute_name*=“attribute_value”]

For e.g.,

a[href*=“image”] – selects those anchor tags that have image in the href attribute.

The Class Selector

This selector is a specific case of one of many attribute value selectors with the attribute name class and “~=“ substituted by “.”

So p[class~=“bold”] and p.bold are identical in meaning.

It matches <p class=“bold”>..</p> as well as <p class=“italic bold”>..</p> but not <p class=“left”>..</p>

Class selectors are useful to control elements that belong to a group as well as to remove limitations of the selector.

The Class Selector – Example

<!DOCTYPE html>

<html>

<head>

<style>

.center {

text-align: center;

color: red;

}

</style>

</head>

<body>

<h1 class=”center”>Red and center-aligned heading</h1>

<p class=”center”>Red and center-aligned paragraph.</p>

</body>

</html>

ID Selectors

The id differs from class in that id identifies a single element whereas class identifies a set of related elements. An id selector selects a single element based on its unique id attribute value regardless of its position in the document tree. An id selector is defined by placing a # symbol before the selector name. The selector p #para1 selects the p elements having id attribute value para1.

So it matches <p id=“para1”>…</p> but not <div id=“para1”>..</div>.

Note: The id attributes should be unique Id selectors and other selectors can be combined.

For e.g.:

<div id=“book1”><h1>Web Technology</h1>

<p>HTML</p>

</div>

And

#book1 h1{color:red;} makes the h1 elements in the div tag to be red.

ID Selectors – Example

<!DOCTYPE html>

<html>

<head>

<style>

#para1 {

text-align: center;

color: red;

}

</style>

</head>

<body>

<p id=”para1″>Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body>

</html>

Summary

This module explains about CSS, adding different style sheets and its anatomy. The module also explores about Selectors, Pseudo Classes and elements. Moreover, the module also discusses about the Attribute Selectors, Class Selectors and ID selectors.

Web Links

www.w3schools.com
https://www.uvu.edu/web/docs/css_basics.pptm
www.hawaii.edu/lis/webteam/workshops/07fa.wksp3_basicCSS.ppt
htmlcssjavascript.com/downloads/css.ppt
www.dsm.fordham.edu/moniot/Classes/IntroWebM04/Chapter6-CSS.ppt