{"id":98,"date":"2018-07-26T08:43:24","date_gmt":"2018-07-26T08:43:24","guid":{"rendered":"http:\/\/csp12.epgpbooks.inflibnet.ac.in\/?post_type=chapter&p=98"},"modified":"2018-08-02T06:12:38","modified_gmt":"2018-08-02T06:12:38","slug":"css","status":"publish","type":"chapter","link":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/chapter\/css\/","title":{"rendered":"CSS"},"content":{"raw":"
\r\n\r\nIntroduction<\/strong>\r\n\r\n \r\n

CSS <\/strong>stands for \u201cCascading Style Sheets\u201d <\/strong>which is a technology to control how elements are presented in the Web page.The term Cascading<\/em> 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<\/em> 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<\/em> represents that the \u201csheets\u201d are like templates, or a set of rules, for determining how the webpage will look.So, CSS (all together) is a styling language<\/em><\/strong> 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.<\/p>\r\n

\u00a0<\/strong><\/p>\r\n

What is \u201cStyle\u201d?<\/strong><\/p>\r\n\r\n<\/div>\r\n

\r\n\r\n \r\n

\u00a0\u201cStyle\u201d 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 \u201celements like <p> <h1> <table> etc.<\/p>\r\n \r\n\r\nAdvantages:<\/strong>\r\n\r\n \r\n

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.<\/p>\r\n \r\n\r\nHow to write style rules?<\/strong>\r\n\r\n \r\n

There are two parts when we write style rules: (1) selector<\/em><\/strong> and (2) declaration<\/em>.<\/strong>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<\/em> and value<\/em>.They are defined as,<\/p>\r\n \r\n\r\nSelector {declaration;}\r\n\r\nDeclaration = {property: value;}\r\n\r\n \r\n

Property: <\/strong>defines what aspect you want to change. For e.g. color, font, margins, etc. Value<\/strong>: defines the exact setting for that aspect. For e.g. red, italic, 40px, etc. Examples:<\/em><\/strong><\/p>\r\n \r\n\r\nh1 {color: red;}\r\n\r\nh1 {color: blue; background-color: green;}\r\n\r\n \r\n\r\nWhere to put the style rules?<\/strong>\r\n\r\n \r\n\r\nThere are 4 ways<\/em><\/strong> to attach CSS to a page:\r\n\r\n \r\n\r\nInline Style Sheet<\/strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 - CSS is not attached in the <header> but is used directly within HTML tags.\r\n\r\n \r\n\r\nInternal Style Sheet<\/strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 - Best used to control styling on one page.\r\n\r\n \r\n\r\nExternal Style Sheet<\/strong>\u00a0\u00a0\u00a0\u00a0 - Best used to control styling on multiple pages.\r\n\r\n \r\n\r\nImported Style Sheet<\/strong>\u00a0\u00a0\u00a0 - To import CSS from other style sheets.\r\n\r\n<\/div>\r\n

\r\n\r\n\u00a0 <\/strong>\r\n\r\nInline Style sheet<\/strong>\r\n\r\n \r\n\r\nThe style information is incorporated directly into the HTML tags.\r\n\r\n \r\n\r\n<\/head>\r\n\r\n<body><\/strong>\r\n\r\n<p style= \u201ctext-align: center;\r\n\r\nfont-weight: bold;\r\n\r\ncolor: yellow;\u201d>What was I thinking?<\/p>\r\n\r\n<\/body><\/strong>\r\n\r\n \r\n\r\nInternal Style sheet<\/strong>\r\n\r\n \r\n\r\nThe style information is placed under the style tag in the head section of an HTML page. <head><\/strong><title>My Wonderful Example\r\n\r\n \r\n\r\n<\/title>\r\n\r\n<style type=\u201ctext\/css\u201d>\r\n\r\nbody\u00a0\u00a0\u00a0\u00a0\u00a0 {\r\n\r\ntext-align: left;\r\n\r\nfont-family: trebuchet, verdana;\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head><\/strong>\r\n\r\n \r\n\r\nExternal Style sheet<\/strong>\r\n\r\n \r\n

External style sheet is specified using the HTML <link><\/strong> 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><\/p>\r\n \r\n\r\n<head><\/strong><title>My Way<\/title>\r\n\r\n<link rel=\"stylesheet\"\u00a0\u00a0 href=\"http:\/\/www.annauniv.edu\/~myway.css\" type=\"text\/css\u201c>\r\n\r\n<\/head><\/strong>\r\n\r\n<body> <\/body>\r\n\r\n<\/html>\r\n\r\n<\/div>\r\n

\r\n\r\n\u00a0 \u00a0<\/strong>\r\n\r\nImported Style Sheet<\/strong>\r\n\r\n \r\n

We can import the style sheet using @import statement. The import statement is used within the style tag in an HTML document as follows<\/p>\r\n \r\n\r\n<style><\/strong>\r\n\r\n@import url(\u201cstyle.css\u201d);<\/strong>\r\n\r\n<\/style><\/strong>\r\n\r\n \r\n\r\nNote<\/em><\/strong>: The import statement must be the first rule within a style tag.<\/em>\r\n\r\n \r\n\r\nInternal rules override the conflicting rules in the imported style sheets.\r\n\r\n \r\n\r\n<style>\r\n\r\n@import url(\u201cstyle.css\u201d);\r\n\r\np\u00a0 {color:green;}\r\n\r\n<\/style>\r\n\r\n \r\n

The above mentioned style rule makes all paragraphs green even if style.css contains a different rule for paragraphs.<\/p>\r\n \r\n\r\n<style type=\"text\/css\u201c >\r\n\r\n@import url(http:\/\/www.xxx.com\/red.css);\r\n\r\n@import url(\/stylesheets\/pink.css); >\r\n\r\n<\/style>\r\n\r\n \r\n

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.<\/p>\r\n \r\n\r\nCascading Rules<\/strong>\r\n\r\n \r\n\r\nMore specific rules gets preference over less specific rules.\r\n\r\n \r\n\r\np b {color:green;}<\/strong>\r\n\r\nb{color:Red;}<\/strong>\r\n\r\n \r\n

In the following example the word \u2018hello\u2019 will be in red whereas the word \u2018world\u2019 will be in green color due to the above mentioned rule.<\/p>\r\n \r\n\r\n<b>hello<\/b> <p><b>world<\/b><\/p><\/strong>\r\n\r\n \r\n\r\n \r\n\r\nOrder rules<\/strong>\r\n\r\n \r\n\r\nThe following figure shows the rules for resolving conflicting stylesInline Internal External Imported Browser\u2019s Style Style Style Style<\/span>\r\n\r\n Default style <\/span>---------------------------------------------------------------------------------------------><\/strong>\r\n\r\n<\/div>\r\n

\r\n\r\nHighest priority\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 lowest priority\r\n\r\n \r\n\r\n\u00a0Working of CSS<\/strong>\r\n\r\n<\/div>\r\n
\r\n\r\n \r\n

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.<\/p>\r\n \r\n

Another approach is that HTML elements are marked with \u201cIDs\u201d and \u201cclasses,\u201d 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.<\/p>\r\n \r\n\r\nDifference between ID and Classes<\/strong>\r\n\r\n \r\n

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.<\/p>\r\n \r\n

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.<\/p>\r\n \r\n\r\nThe styles for each element, ID, or class used on an HTML page are defined in a CSS document.\r\n\r\n \r\n\r\nElements are declared with the element (HTML) tag; styles for the element are wrapped with curly brackets like\r\n\r\nh1 {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\nIDs are declared with a hash sign and the ID name; styles for the ID are wrapped with curly brackets like\r\n\r\n#title { }\r\n\r\n \r\n\r\nClasses are declared with a period and the class name; styles for the class are wrapped with curly brackets like\r\n\r\n<\/div>\r\n

\r\n\r\n\u00a0 \u00a0 .bodytext\r\n\r\n{\r\n\r\n}\r\n\r\n<\/div>\r\n\u00a0 \u00a0 \u00a0Anatomy of a style rule<\/strong>\r\n
\r\n\r\n \r\n\r\nSelector\r\n\r\n{\r\n\r\nProperty 1 : value 1;\r\n\r\nProperty 2 : value 2;\r\n\r\nProperty N : value N;\r\n\r\n}\r\n\r\n \r\n\r\nThe selector specifies which HTML elements are affected by the style rule.\r\n\r\nThe declaration specifies what the effect will be.\r\n\r\n \r\n\r\nGrouping Selectors<\/strong>\r\n\r\n \r\n\r\nGroup the same selector<\/strong> with different declarations together on one line.\r\n\r\n \r\n\r\nh1 {color: black;}\r\n\r\nh1 {font-weight: bold;}\r\n\r\nh1 {background: white;}\r\n\r\n \r\n\r\nThe above declarations can be grouped as,\r\n\r\n \r\n\r\nh1 {<\/strong>\r\n\r\ncolor: black;<\/strong>\r\n\r\nfont-weight: bold;<\/strong>\r\n\r\nbackground: white;<\/strong>\r\n\r\n}<\/strong>\r\n\r\n \r\n\r\nSelectors having common declarations are grouped into a comma-separated list.\r\n\r\n \r\n\r\nh1{color:red;}\r\n\r\nh2{color:red;}\r\n\r\nh3{color:red;}\r\n\r\n \r\n\r\nThe above declarations can be written as\r\n\r\n \r\n\r\nh1,h2,h3{color:red;}<\/strong>\r\n\r\n \r\n\r\nSelectors<\/strong>\r\n\r\n<\/div>\r\n

\u00a0 \u00a0 Selectors are patterns used to select the elements we want to style. Now we will look at the demonstration of the different selectors.<\/span><\/p>\r\n\r\n

\r\n\r\n\u00a0 \u00a0 <\/strong>\r\n\r\nType selectors<\/strong>\r\n\r\n \r\n

A type selector is a simple selector, which is the name of a document element and it matches every single element of the document.<\/p>\r\n \r\n\r\nFor e.g.: The selector b selects every <b> element.\r\n\r\n \r\n\r\nUniversal selector<\/strong>\r\n\r\n \r\n

CSS has a special selector *, which matches with every single element in the document. For eg: *{color:red;}.<\/strong>It makes all the text in the document red.<\/span><\/p>\r\n\r\n<\/div>\r\n

\r\n\r\n\u00a0 \u00a0 \u00a0Compound Selectors<\/strong>\r\n\r\n \r\n

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:<\/p>\r\n \r\n\r\nul ul { list-style-type : square }<\/strong>\r\n\r\n \r\n

This specifies that an unordered list inside another unordered list will be bulleted by squares.<\/p>\r\n \r\n\r\nh1 em em { color : red }<\/strong>\r\n\r\n \r\n

This specifies that emphasized text inside emphasized text in an <h1><\/strong> header will appear in red. Compound selectors are more specific than simple selectors like<\/p>\r\n \r\n\r\np { color : red }<\/strong>\r\n\r\ndiv p { color : blue }<\/strong>\r\n\r\n \r\n\r\nDescendant selectors<\/strong>\r\n\r\n \r\n\r\nA descendant selector selects only those elements that are descendants of a particular element.\r\n\r\n \r\n\r\nFor e.g.\r\n\r\n<div><b>C<\/strong><\/b>ascading<b>S<\/strong><\/b>tyle<b>S<\/strong><\/b>heet<\/div> <p>descendant<b>selectors<\/b><\/p>\r\n\r\n<p><\/strong>this <b>is<\/b>a<i><b>paragraph<\/em><\/b><\/i><\/p><\/strong>\r\n\r\n \r\n

To select all the <b> elements which are descendants of <i> element we need to give as, p i b<\/strong> which selects the word 'paragraph' from the above text.<\/p>\r\n\r\n<\/div>\r\n\u00a0 \u00a0Child selectors<\/strong>\r\n

\r\n\r\n \r\n

Child selectors select elements that are immediate children of a specified element.<\/p>\r\n

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

The selector p>i>b<\/strong> selects only the <b>element whose parent is the <i>element whose parent is ,in turn the <p> element.<\/p>\r\n \r\n\r\nStyle Classes<\/strong>\r\n\r\n \r\n\r\nStyle classes allow us to control which elements of a given type should use a style rule. This method has two parts:\r\n\r\n \r\n\r\nIn the style sheet, the selector defines the class name, which is preceded by a period.\r\n\r\nIn the HTML, the tag includes the class<\/strong> attribute and specifies the value of the class name\r\n\r\n \r\n\r\nExample:<\/em><\/strong>\r\n\r\n \r\n\r\nDefine the nodec<\/strong> class for anchor tags as,\r\n\r\na.nodec { text-decoration : none }\r\n\r\nThis suppresses the usual underlining. Use it in HTML like so, <a class=\"nodec\" href=\"somepage.html\">Link text<\/a>\r\n\r\nStyle classes can also be \u201cgeneric,\u201d that is not tied to a specific element type.\r\n\r\n \r\n\r\nExample:<\/em><\/strong>\r\n\r\n \r\n\r\nDefine the zowie<\/strong> class as,\r\n\r\n.zowie { text-decoration : blink }<\/strong>\r\n\r\nUse it on an emphasized element as,\r\n\r\n<em class=\"zowie\">Important!<\/em><\/strong>\r\n\r\nUse it with no other style attributes as,\r\n\r\n<span class=\"zowie\">Buy Now!<\/span><\/strong>\r\n\r\nThe <span> and <div> Tags<\/strong>\r\n\r\n<\/div>\r\n

\u00a0 \u00a0 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.<\/span><\/p>\r\n\r\n

\r\n

A <span><\/strong> ... <\/span><\/strong> element defines an \u201cinline\u201d 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.<\/p>\r\n

A <div><\/strong> ... <\/div><\/strong> element defines a \u201cblock\u201d structure. Usually the browser will place line breaks before and after this element, but otherwise it has no effect itself.<\/p>\r\n \r\n\r\nPseudo-classes<\/strong>\r\n\r\n \r\n

These are like style classes, but an element acquires a pseudo-class by user action or by a relationship other than descendancy.<\/p>\r\n \r\n

In the style sheet, a pseudo-class name is preceded by a colon.<\/p>\r\n \r\n

In the HTML, the pseudo-class name is NOT used with the affected tag, because it is implied.<\/p>\r\n \r\n

Pseudo classes match elements using the information other than their name, content or attribute such as states of an anchor element.<\/p>\r\n \r\n

Pseudo elements , on the other hand, address sub-parts of an element such as the first letter of a paragraph.<\/p>\r\n

The general form is<\/p>\r\n \r\n\r\nSelector:pseudo-class{declaration}<\/strong>\r\n\r\nSelector:pseudo-element{declaration}<\/strong>\r\n\r\nPseudo Classes and Elements<\/strong>\r\n\r\nThe :first-child, :last-child and only-child pseudo classes<\/strong>\r\n\r\n \r\n

The first-child<\/strong> pseudo class selects an element if it is the first child of its parent regardless of what this parent element is.<\/p>\r\n \r\n

For eg: p:first-child<\/strong> selects all p elements that are the first children of any element.<\/p>\r\n

The last-child<\/strong> pseudo class selects the last child element of any element.<\/p>\r\n

For eg: p:last-child<\/strong> selects all p elements that are the last children of any element The only-child<\/strong> pseudo class selects an element if it is the only child of another element.<\/p>\r\n

The anchor pseudo classes :link and :visited<\/strong><\/p>\r\n

The :link<\/strong> pseudo class applies to hyperlinks that have not been visited.The <\/span>:visited<\/strong> pseudo class applies to hyperlinks that have already been visited at least once.<\/span><\/p>\r\n \r\n\r\n\u00a0For e.g.:<\/span>\r\n\r\n<\/div>\r\n

\r\n\r\n\u00a0 \u00a0 a:link {color :blue;}<\/strong>\r\n\r\na:visited{color:red;}<\/strong>\r\n\r\nThe dynamic pseudo classes :hover, :active, :focus<\/strong>\r\n\r\n \r\n

The :hover<\/strong> pseudo class selects elements that are being designated by the user with a pointing device.<\/p>\r\n

The :active<\/strong> pseudo class applies to an element that is currently being activated by the user.<\/p>\r\n

The :focus<\/strong> pseudo class applies to an element that has currently got the focus by keyboard events or other means.<\/p>\r\n \r\n\r\na:focus {color:green;}<\/strong>\r\n\r\na:hover{color:yellow;}<\/strong>\r\n\r\na:active{color:pink;}<\/strong>\r\n\r\n \r\n\r\nThe :first-line pseudo element<\/strong>\r\n\r\n \r\n

The :first-line<\/strong> pseudo element allows us to add styles to the first line of an element.<\/p>\r\n

For e.g.:<\/p>\r\n

p:first-line{text-decoration:underline;} <\/strong>underlines the first line of a paragraph.<\/p>\r\n

The :first-letter pseudo element<\/strong><\/p>\r\n

The :first-letter<\/strong> pseudo element is used to add style to the first letter of the first line of block elements.<\/p>\r\n \r\n\r\nFor e.g.:\r\n\r\n \r\n\r\np:first-letter {font-size:300%; float:left;}<\/strong>\r\n\r\n \r\n\r\nExample of Pseudo Classes \u2013 first-line<\/strong>\r\n\r\n \r\n\r\n<!DOCTYPE html>\r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<style>\r\n\r\np::first-line {\r\n\r\ncolor: #ff0000;\r\n\r\nfont-variant: small-caps;\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n<body><\/span>\r\n\r\n<\/div>\r\n

\r\n

\u00a0 \u00a0<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><\/p>\r\n<\/html>\r\n\r\n<\/div>\r\n

\"\"<\/p>\r\n\r\n

\r\n

\u00a0 \u00a0 \u00a0The :before and :after pseudo elements<\/strong><\/p>\r\n

The :before pseudo element inserts some new content before an existing element<\/p>\r\n

The :after pseudo element inserts some new content after an existing element .<\/p>\r\n

The content<\/strong> property is used to define the content to be inserted before and after the selected elements.<\/p>\r\n

For e.g., :body > ol> li<\/strong> :before { content: \u201dchapter:\u201d; }<\/strong><\/p>\r\n

Adds chapter before every <li> element which is a grandchildren of the <body> element.<\/p>\r\n \r\n\r\nAttribute Selector<\/strong>\r\n\r\n \r\n

Attribute Selector provide a way of selecting elements depending on the presence of an attribute or the presence of certain attribute values.<\/p>\r\n \r\n\r\nSimple Attribute Selector<\/strong>\r\n\r\n \r\n\r\nIt selects elements having specified attribute.\r\n\r\nGeneral syntax :\r\n\r\nelement[attribute_name] or<\/strong>\r\n\r\n[attribute_name]<\/strong>\r\n\r\nFor e.g.: a[href]<\/strong> selects all <a>elements having the attribute href.\r\n\r\n \r\n\r\nAttribute Selector - Example<\/strong>\r\n\r\n<\/div>\r\n\u00a0 <!DOCTYPE html><\/span>\r\n\r\n<html><\/span>\r\n\r\n<head><\/span>\r\n\r\n<style><\/span>\r\n\r\na[target] {<\/span>\r\n\r\nbackground-color: yellow;<\/span>\r\n\r\n}<\/span>\r\n\r\n<\/style><\/span>\r\n\r\n<\/head><\/span>\r\n\r\n<body><\/span>\r\n

\r\n

\u00a0<p>The links with a target attribute gets a yellow background:<\/p> <a href=\"http:\/\/www.w3schools.com\">w3schools.com<\/a><\/p>\r\n<a href=\"http:\/\/www.disney.com\" target=\"_blank\">disney.com<\/a> <a href=\"http:\/\/www.wikipedia.org\" target=\"_top\">wikipedia.org<\/a>\r\n

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

\"\"<\/p>\r\n\r\n

\r\n\r\n \r\n\r\nAttribute Value Selector<\/strong>\r\n\r\n \r\n\r\nSelecting elements based on the attribute value.\r\n\r\n \r\n\r\nThe syntax :\r\n\r\nelement[attribute_name=\u201cattribute_Value\u201d]<\/strong>\r\n\r\nor<\/strong>\r\n\r\n[attribute_name=\u201cattribute_Value\u201d]<\/strong>\r\n\r\n \r\n\r\nExample:\r\n\r\n \r\n\r\np[type=\u201cnote\u201d] <\/strong>selects all <p>elements having the type attribute value \u201cnote\u201d.\r\n\r\n<!DOCTYPE html>\r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<style>\r\n\r\na[target=_blank] { background-color: yellow;}\r\n\r\n<\/style>\r\n\r\n<\/head><\/span>\r\n\r\n<body><\/span>\r\n\r\n<p>The link with target=\"_blank\" gets a yellow background:<\/p> <a href=\"http:\/\/www.w3schools.com\">w3schools.com<\/a><\/span>\r\n\r\n<a href=\"http:\/\/www.disney.com\" target=\"_blank\">disney.com<\/a> <a href=\"http:\/\/www.wikipedia.org\" target=\"_top\">wikipedia.org<\/a><\/span>\r\n\r\n<p><b>Note:<\/b> For [<i>attribute<\/i>] to work in IE8 and earlier, a DOCTYPE must be declared.<\/p><\/span>\r\n\r\n<\/body><\/span>\r\n\r\n<\/html><\/span>\r\n\r\n<\/div>\r\n

\"\"<\/p>\r\n\r\n

\r\n\r\n\u00a0 \u00a0 \u00a0Starts-with attribute value selector<\/strong>\r\n\r\n \r\n\r\nThe selector selects elements having an attribute value that starts with the value specified.\r\n\r\n \r\n\r\nThe general syntax :\r\n\r\n \r\n\r\nElement[attribute_name^=\u201cattribute_value\u201d]<\/strong>\r\n\r\nFor example, the selector p[type^=\u201ccopy\u201d]<\/strong> matches\r\n\r\n<p type=\u201ccopyright\u201d>copyright<\/p> as well as <p type=\u201ccopyleft\u201d>copyleft..<\/p>\r\n\r\n \r\n\r\n<!DOCTYPE html>\r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<style>\r\n\r\n[class^=\"top\"] {\r\n\r\nbackground: yellow;\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<h1 class=\"top-header\">Welcome<\/h1>\r\n\r\n<p class=\"top-text\">Hello world!<\/p>\r\n\r\n<p class=\"top-content\">Are you learning CSS?<\/p>\r\n

<p><b>Note:<\/b> For [<i>attribute<\/i>^=<i>value<\/i>] to work in IE8 and earlier, a DOCTYPE must be\u00a0<\/span>declared.<\/p><\/span><\/p>\r\n<\/body><\/span>\r\n\r\n<\/html><\/span>\r\n\r\n<\/div>\r\n

\"\"<\/p>\r\n\r\n

\r\n\r\n\u00a0 \u00a0Ends-with attribute value selector<\/strong>\r\n\r\n \r\n

This attribute selects elements having attribute value that ends with the value specified.<\/p>\r\n

The general syntax :<\/p>\r\n

Element[attribute_name$=\u201cattribute_value\u201d]<\/strong><\/p>\r\n

For e.g.,<\/p>\r\n

a[href$=\u201c.com\u201d] - <\/strong>selects those anchor tags that point to .com websites and not any other domains.<\/p>\r\n \r\n

Substring match attribute value selector<\/strong><\/p>\r\n

This selector selects those elements having an attribute value containing at least one occurrence of the<\/p>\r\n

value specified.<\/p>\r\n

The general syntax :<\/p>\r\n

Element[attribute_name*=\u201cattribute_value\u201d]<\/strong><\/p>\r\n

For e.g.,<\/p>\r\n

a[href*=\u201cimage\u201d] - <\/strong>selects those anchor tags that have image in the href attribute.<\/p>\r\n

The Class Selector<\/strong><\/p>\r\n

This selector is a specific case of one of many attribute value selectors with the attribute name class and \u201c~=\u201c substituted by \u201c.\u201d<\/p>\r\nSo p[class~=\u201cbold\u201d] and p.bold are identical in meaning.\r\n\r\nIt matches <p class=\u201cbold\u201d>..<\/p> as well as <p class=\u201citalic bold\u201d>..<\/p> but not <p class=\u201cleft\u201d>..<\/p>\r\n\r\nClass selectors are useful to control elements that belong to a group as well as to remove limitations of the selector.<\/span>\r\n\r\n<\/div>\r\n

\r\n\r\n \r\n\r\nThe Class Selector - Example<\/strong>\r\n\r\n \r\n\r\n<!DOCTYPE html>\r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<style>\r\n\r\n.center {\r\n\r\ntext-align: center;\r\n\r\ncolor: red;\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<h1 class=\"center\">Red and center-aligned heading<\/h1>\r\n\r\n<p class=\"center\">Red and center-aligned paragraph.<\/p>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n<\/div>\r\n

\"\"<\/p>\r\n\r\n

\r\n\r\n \r\n\r\nID Selectors<\/strong>\r\n\r\n \r\n

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.<\/p>\r\nSo it matches <p id=\u201cpara1\u201d>\u2026<\/p> but not <div id=\u201cpara1\u201d>..<\/div>.\r\n\r\n \r\n\r\nNote: <\/em><\/strong>The id attributes should be unique Id selectors and other selectors can be combined.\r\n\r\n \r\n\r\nFor e.g.:\r\n\r\n \r\n\r\n<div id=\u201cbook1\u201d><h1>Web Technology<\/h1><\/strong>\r\n\r\n<p>HTML<\/p><\/strong>\r\n\r\n<\/div><\/strong>\r\n\r\n\u00a0And<\/span>\r\n\r\n#book1 h1{color:red;} <\/strong>makes the h1 elements in the div tag to be red.<\/span>\r\n\r\n<\/div>\r\n\u00a0 ID Selectors - Example<\/strong>\r\n\r\n \r\n\r\n<!DOCTYPE html>\r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<style>\r\n\r\n#para1 {\r\n\r\ntext-align: center;\r\n\r\ncolor: red;\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<p id=\"para1\">Hello World!<\/p>\r\n\r\n<p>This paragraph is not affected by the style.<\/p>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n

\"\"<\/p>\r\n \r\n\r\nSummary<\/strong>\r\n\r\n \r\n

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.<\/p>\r\n \r\n\r\n \r\n\r\nWeb Links<\/strong>\r\n

    \r\n \t
  • www.w3schools.com<\/em><\/li>\r\n \t
  • https:\/\/www.uvu.edu\/web\/docs\/css<\/strong>_basics.ppt<\/strong>m<\/em><\/li>\r\n \t
  • www.hawaii.edu\/lis\/webteam\/workshops\/07fa.wksp3_basicCSS<\/strong>.ppt<\/strong><\/em><\/li>\r\n \t
  • htmlcss<\/strong>javascript.com\/downloads\/css<\/strong>.ppt<\/strong><\/em><\/li>\r\n \t
  • www.dsm.fordham.edu\/moniot\/Classes\/IntroWebM04\/Chapter6-CSS<\/strong>.ppt<\/strong><\/em><\/li>\r\n<\/ul>\r\n \r\n\r\n ","rendered":"
    \n

    Introduction<\/strong><\/p>\n

     <\/p>\n

    CSS <\/strong>stands for \u201cCascading Style Sheets\u201d <\/strong>which is a technology to control how elements are presented in the Web page.The term Cascading<\/em> 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<\/em> 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<\/em> represents that the \u201csheets\u201d are like templates, or a set of rules, for determining how the webpage will look.So, CSS (all together) is a styling language<\/em><\/strong> 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.<\/p>\n

    \u00a0<\/strong><\/p>\n

    What is \u201cStyle\u201d?<\/strong><\/p>\n<\/div>\n

    \n

     <\/p>\n

    \u00a0\u201cStyle\u201d 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 \u201celements like <p> <h1> <table> etc.<\/p>\n

     <\/p>\n

    Advantages:<\/strong><\/p>\n

     <\/p>\n

    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.<\/p>\n

     <\/p>\n

    How to write style rules?<\/strong><\/p>\n

     <\/p>\n

    There are two parts when we write style rules: (1) selector<\/em><\/strong> and (2) declaration<\/em>.<\/strong>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<\/em> and value<\/em>.They are defined as,<\/p>\n

     <\/p>\n

    Selector {declaration;}<\/p>\n

    Declaration = {property: value;}<\/p>\n

     <\/p>\n

    Property: <\/strong>defines what aspect you want to change. For e.g. color, font, margins, etc. Value<\/strong>: defines the exact setting for that aspect. For e.g. red, italic, 40px, etc. Examples:<\/em><\/strong><\/p>\n

     <\/p>\n

    h1 {color: red;}<\/p>\n

    h1 {color: blue; background-color: green;}<\/p>\n

     <\/p>\n

    Where to put the style rules?<\/strong><\/p>\n

     <\/p>\n

    There are 4 ways<\/em><\/strong> to attach CSS to a page:<\/p>\n

     <\/p>\n

    Inline Style Sheet<\/strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 – CSS is not attached in the <header> but is used directly within HTML tags.<\/p>\n

     <\/p>\n

    Internal Style Sheet<\/strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 – Best used to control styling on one page.<\/p>\n

     <\/p>\n

    External Style Sheet<\/strong>\u00a0\u00a0\u00a0\u00a0 – Best used to control styling on multiple pages.<\/p>\n

     <\/p>\n

    Imported Style Sheet<\/strong>\u00a0\u00a0\u00a0 – To import CSS from other style sheets.<\/p>\n<\/div>\n

    \n

    \u00a0 <\/strong><\/p>\n

    Inline Style sheet<\/strong><\/p>\n

     <\/p>\n

    The style information is incorporated directly into the HTML tags.<\/p>\n

     <\/p>\n

    <\/head><\/p>\n

    <body><\/strong><\/p>\n

    <p style= \u201ctext-align: center;<\/p>\n

    font-weight: bold;<\/p>\n

    color: yellow;\u201d>What was I thinking?<\/p><\/p>\n

    <\/body><\/strong><\/p>\n

     <\/p>\n

    Internal Style sheet<\/strong><\/p>\n

     <\/p>\n

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

     <\/p>\n

    <\/title><\/p>\n

    <style type=\u201ctext\/css\u201d><\/p>\n

    body\u00a0\u00a0\u00a0\u00a0\u00a0 {<\/p>\n

    text-align: left;<\/p>\n

    font-family: trebuchet, verdana;<\/p>\n

    }<\/p>\n

    <\/style><\/p>\n

    <\/head><\/strong><\/p>\n

     <\/p>\n

    External Style sheet<\/strong><\/p>\n

     <\/p>\n

    External style sheet is specified using the HTML <link><\/strong> 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><\/p>\n

     <\/p>\n

    <head><\/strong><title>My Way<\/title><\/p>\n

    <link rel=”stylesheet”\u00a0\u00a0 href=”http:\/\/www.annauniv.edu\/~myway.css” type=”text\/css\u201c><\/p>\n

    <\/head><\/strong><\/p>\n

    <body> <\/body><\/p>\n

    <\/html><\/p>\n<\/div>\n

    \n

    \u00a0 \u00a0<\/strong><\/p>\n

    Imported Style Sheet<\/strong><\/p>\n

     <\/p>\n

    We can import the style sheet using @import statement. The import statement is used within the style tag in an HTML document as follows<\/p>\n

     <\/p>\n

    <style><\/strong><\/p>\n

    @import url(\u201cstyle.css\u201d);<\/strong><\/p>\n

    <\/style><\/strong><\/p>\n

     <\/p>\n

    Note<\/em><\/strong>: The import statement must be the first rule within a style tag.<\/em><\/p>\n

     <\/p>\n

    Internal rules override the conflicting rules in the imported style sheets.<\/p>\n

     <\/p>\n

    <style><\/p>\n

    @import url(\u201cstyle.css\u201d);<\/p>\n

    p\u00a0 {color:green;}<\/p>\n

    <\/style><\/p>\n

     <\/p>\n

    The above mentioned style rule makes all paragraphs green even if style.css contains a different rule for paragraphs.<\/p>\n

     <\/p>\n

    <style type=”text\/css\u201c ><\/p>\n

    @import url(http:\/\/www.xxx.com\/red.css);<\/p>\n

    @import url(\/stylesheets\/pink.css); ><\/p>\n

    <\/style><\/p>\n

     <\/p>\n

    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.<\/p>\n

     <\/p>\n

    Cascading Rules<\/strong><\/p>\n

     <\/p>\n

    More specific rules gets preference over less specific rules.<\/p>\n

     <\/p>\n

    p b {color:green;}<\/strong><\/p>\n

    b{color:Red;}<\/strong><\/p>\n

     <\/p>\n

    In the following example the word \u2018hello\u2019 will be in red whereas the word \u2018world\u2019 will be in green color due to the above mentioned rule.<\/p>\n

     <\/p>\n

    <b>hello<\/b> <p><b>world<\/b><\/p><\/strong><\/p>\n

     <\/p>\n

     <\/p>\n

    Order rules<\/strong><\/p>\n

     <\/p>\n

    The following figure shows the rules for resolving conflicting stylesInline Internal External Imported Browser\u2019s Style Style Style Style<\/span><\/p>\n

    Default style <\/span>———————————————————————————————><\/strong><\/p>\n<\/div>\n

    \n

    Highest priority\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 lowest priority<\/p>\n

     <\/p>\n

    \u00a0Working of CSS<\/strong><\/p>\n<\/div>\n

    \n

     <\/p>\n

    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.<\/p>\n

     <\/p>\n

    Another approach is that HTML elements are marked with \u201cIDs\u201d and \u201cclasses,\u201d 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.<\/p>\n

     <\/p>\n

    Difference between ID and Classes<\/strong><\/p>\n

     <\/p>\n

    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.<\/p>\n

     <\/p>\n

    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.<\/p>\n

     <\/p>\n

    The styles for each element, ID, or class used on an HTML page are defined in a CSS document.<\/p>\n

     <\/p>\n

    Elements are declared with the element (HTML) tag; styles for the element are wrapped with curly brackets like<\/p>\n

    h1 {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/p>\n

    IDs are declared with a hash sign and the ID name; styles for the ID are wrapped with curly brackets like<\/p>\n

    #title { }<\/p>\n

     <\/p>\n

    Classes are declared with a period and the class name; styles for the class are wrapped with curly brackets like<\/p>\n<\/div>\n

    \n

    \u00a0 \u00a0 .bodytext<\/p>\n

    {<\/p>\n

    }<\/p>\n<\/div>\n

    \u00a0 \u00a0 \u00a0Anatomy of a style rule<\/strong><\/p>\n

    \n

     <\/p>\n

    Selector<\/p>\n

    {<\/p>\n

    Property 1 : value 1;<\/p>\n

    Property 2 : value 2;<\/p>\n

    Property N : value N;<\/p>\n

    }<\/p>\n

     <\/p>\n

    The selector specifies which HTML elements are affected by the style rule.<\/p>\n

    The declaration specifies what the effect will be.<\/p>\n

     <\/p>\n

    Grouping Selectors<\/strong><\/p>\n

     <\/p>\n

    Group the same selector<\/strong> with different declarations together on one line.<\/p>\n

     <\/p>\n

    h1 {color: black;}<\/p>\n

    h1 {font-weight: bold;}<\/p>\n

    h1 {background: white;}<\/p>\n

     <\/p>\n

    The above declarations can be grouped as,<\/p>\n

     <\/p>\n

    h1 {<\/strong><\/p>\n

    color: black;<\/strong><\/p>\n

    font-weight: bold;<\/strong><\/p>\n

    background: white;<\/strong><\/p>\n

    }<\/strong><\/p>\n

     <\/p>\n

    Selectors having common declarations are grouped into a comma-separated list.<\/p>\n

     <\/p>\n

    h1{color:red;}<\/p>\n

    h2{color:red;}<\/p>\n

    h3{color:red;}<\/p>\n

     <\/p>\n

    The above declarations can be written as<\/p>\n

     <\/p>\n

    h1,h2,h3{color:red;}<\/strong><\/p>\n

     <\/p>\n

    Selectors<\/strong><\/p>\n<\/div>\n

    \u00a0 \u00a0 Selectors are patterns used to select the elements we want to style. Now we will look at the demonstration of the different selectors.<\/span><\/p>\n

    \n

    \u00a0 \u00a0 <\/strong><\/p>\n

    Type selectors<\/strong><\/p>\n

     <\/p>\n

    A type selector is a simple selector, which is the name of a document element and it matches every single element of the document.<\/p>\n

     <\/p>\n

    For e.g.: The selector b selects every <b> element.<\/p>\n

     <\/p>\n

    Universal selector<\/strong><\/p>\n

     <\/p>\n

    CSS has a special selector *, which matches with every single element in the document. For eg: *{color:red;}.<\/strong>It makes all the text in the document red.<\/span><\/p>\n<\/div>\n

    \n

    \u00a0 \u00a0 \u00a0Compound Selectors<\/strong><\/p>\n

     <\/p>\n

    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:<\/p>\n

     <\/p>\n

    ul ul { list-style-type : square }<\/strong><\/p>\n

     <\/p>\n

    This specifies that an unordered list inside another unordered list will be bulleted by squares.<\/p>\n

     <\/p>\n

    h1 em em { color : red }<\/strong><\/p>\n

     <\/p>\n

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

     <\/p>\n

    p { color : red }<\/strong><\/p>\n

    div p { color : blue }<\/strong><\/p>\n

     <\/p>\n

    Descendant selectors<\/strong><\/p>\n

     <\/p>\n

    A descendant selector selects only those elements that are descendants of a particular element.<\/p>\n

     <\/p>\n

    For e.g.<\/p>\n

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

    <p><\/strong>this <b>is<\/b>a<i><b>paragraph<\/em><\/b><\/i><\/p><\/strong><\/p>\n

     <\/p>\n

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

    \u00a0 \u00a0Child selectors<\/strong><\/p>\n

    \n

     <\/p>\n

    Child selectors select elements that are immediate children of a specified element.<\/p>\n

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

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

     <\/p>\n

    Style Classes<\/strong><\/p>\n

     <\/p>\n

    Style classes allow us to control which elements of a given type should use a style rule. This method has two parts:<\/p>\n

     <\/p>\n

    In the style sheet, the selector defines the class name, which is preceded by a period.<\/p>\n

    In the HTML, the tag includes the class<\/strong> attribute and specifies the value of the class name<\/p>\n

     <\/p>\n

    Example:<\/em><\/strong><\/p>\n

     <\/p>\n

    Define the nodec<\/strong> class for anchor tags as,<\/p>\n

    a.nodec { text-decoration : none }<\/p>\n

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

    Style classes can also be \u201cgeneric,\u201d that is not tied to a specific element type.<\/p>\n

     <\/p>\n

    Example:<\/em><\/strong><\/p>\n

     <\/p>\n

    Define the zowie<\/strong> class as,<\/p>\n

    .zowie { text-decoration : blink }<\/strong><\/p>\n

    Use it on an emphasized element as,<\/p>\n

    <em class=”zowie”>Important!<\/em><\/strong><\/p>\n

    Use it with no other style attributes as,<\/p>\n

    <span class=”zowie”>Buy Now!<\/span><\/strong><\/p>\n

    The <span> and <div> Tags<\/strong><\/p>\n<\/div>\n

    \u00a0 \u00a0 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.<\/span><\/p>\n

    \n

    A <span><\/strong> … <\/span><\/strong> element defines an \u201cinline\u201d 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.<\/p>\n

    A <div><\/strong> … <\/div><\/strong> element defines a \u201cblock\u201d structure. Usually the browser will place line breaks before and after this element, but otherwise it has no effect itself.<\/p>\n

     <\/p>\n

    Pseudo-classes<\/strong><\/p>\n

     <\/p>\n

    These are like style classes, but an element acquires a pseudo-class by user action or by a relationship other than descendancy.<\/p>\n

     <\/p>\n

    In the style sheet, a pseudo-class name is preceded by a colon.<\/p>\n

     <\/p>\n

    In the HTML, the pseudo-class name is NOT used with the affected tag, because it is implied.<\/p>\n

     <\/p>\n

    Pseudo classes match elements using the information other than their name, content or attribute such as states of an anchor element.<\/p>\n

     <\/p>\n

    Pseudo elements , on the other hand, address sub-parts of an element such as the first letter of a paragraph.<\/p>\n

    The general form is<\/p>\n

     <\/p>\n

    Selector:pseudo-class{declaration}<\/strong><\/p>\n

    Selector:pseudo-element{declaration}<\/strong><\/p>\n

    Pseudo Classes and Elements<\/strong><\/p>\n

    The :first-child, :last-child and only-child pseudo classes<\/strong><\/p>\n

     <\/p>\n

    The first-child<\/strong> pseudo class selects an element if it is the first child of its parent regardless of what this parent element is.<\/p>\n

     <\/p>\n

    For eg: p:first-child<\/strong> selects all p elements that are the first children of any element.<\/p>\n

    The last-child<\/strong> pseudo class selects the last child element of any element.<\/p>\n

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

    The anchor pseudo classes :link and :visited<\/strong><\/p>\n

    The :link<\/strong> pseudo class applies to hyperlinks that have not been visited.The <\/span>:visited<\/strong> pseudo class applies to hyperlinks that have already been visited at least once.<\/span><\/p>\n

     <\/p>\n

    \u00a0For e.g.:<\/span><\/p>\n<\/div>\n

    \n

    \u00a0 \u00a0 a:link {color :blue;}<\/strong><\/p>\n

    a:visited{color:red;}<\/strong><\/p>\n

    The dynamic pseudo classes :hover, :active, :focus<\/strong><\/p>\n

     <\/p>\n

    The :hover<\/strong> pseudo class selects elements that are being designated by the user with a pointing device.<\/p>\n

    The :active<\/strong> pseudo class applies to an element that is currently being activated by the user.<\/p>\n

    The :focus<\/strong> pseudo class applies to an element that has currently got the focus by keyboard events or other means.<\/p>\n

     <\/p>\n

    a:focus {color:green;}<\/strong><\/p>\n

    a:hover{color:yellow;}<\/strong><\/p>\n

    a:active{color:pink;}<\/strong><\/p>\n

     <\/p>\n

    The :first-line pseudo element<\/strong><\/p>\n

     <\/p>\n

    The :first-line<\/strong> pseudo element allows us to add styles to the first line of an element.<\/p>\n

    For e.g.:<\/p>\n

    p:first-line{text-decoration:underline;} <\/strong>underlines the first line of a paragraph.<\/p>\n

    The :first-letter pseudo element<\/strong><\/p>\n

    The :first-letter<\/strong> pseudo element is used to add style to the first letter of the first line of block elements.<\/p>\n

     <\/p>\n

    For e.g.:<\/p>\n

     <\/p>\n

    p:first-letter {font-size:300%; float:left;}<\/strong><\/p>\n

     <\/p>\n

    Example of Pseudo Classes \u2013 first-line<\/strong><\/p>\n

     <\/p>\n

    <!DOCTYPE html><\/p>\n

    <html><\/p>\n

    <head><\/p>\n

    <style><\/p>\n

    p::first-line {<\/p>\n

    color: #ff0000;<\/p>\n

    font-variant: small-caps;<\/p>\n

    }<\/p>\n

    <\/style><\/p>\n

    <\/head><\/p>\n

    <body><\/span><\/p>\n<\/div>\n

    \n

    \u00a0 \u00a0<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><\/p>\n

    <\/html><\/p>\n<\/div>\n

    \"\"<\/p>\n

    \n

    \u00a0 \u00a0 \u00a0The :before and :after pseudo elements<\/strong><\/p>\n

    The :before pseudo element inserts some new content before an existing element<\/p>\n

    The :after pseudo element inserts some new content after an existing element .<\/p>\n

    The content<\/strong> property is used to define the content to be inserted before and after the selected elements.<\/p>\n

    For e.g., :body > ol> li<\/strong> :before { content: \u201dchapter:\u201d; }<\/strong><\/p>\n

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

     <\/p>\n

    Attribute Selector<\/strong><\/p>\n

     <\/p>\n

    Attribute Selector provide a way of selecting elements depending on the presence of an attribute or the presence of certain attribute values.<\/p>\n

     <\/p>\n

    Simple Attribute Selector<\/strong><\/p>\n

     <\/p>\n

    It selects elements having specified attribute.<\/p>\n

    General syntax :<\/p>\n

    element[attribute_name] or<\/strong><\/p>\n

    [attribute_name]<\/strong><\/p>\n

    For e.g.: a[href]<\/strong> selects all <a>elements having the attribute href.<\/p>\n

     <\/p>\n

    Attribute Selector – Example<\/strong><\/p>\n<\/div>\n

    \u00a0 <!DOCTYPE html><\/span><\/p>\n

    <html><\/span><\/p>\n

    <head><\/span><\/p>\n

    <style><\/span><\/p>\n

    a[target] {<\/span><\/p>\n

    background-color: yellow;<\/span><\/p>\n

    }<\/span><\/p>\n

    <\/style><\/span><\/p>\n

    <\/head><\/span><\/p>\n

    <body><\/span><\/p>\n

    \n

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

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

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

    <\/html><\/p>\n<\/div>\n

    \"\"<\/p>\n

    \n

     <\/p>\n

    Attribute Value Selector<\/strong><\/p>\n

     <\/p>\n

    Selecting elements based on the attribute value.<\/p>\n

     <\/p>\n

    The syntax :<\/p>\n

    element[attribute_name=\u201cattribute_Value\u201d]<\/strong><\/p>\n

    or<\/strong><\/p>\n

    [attribute_name=\u201cattribute_Value\u201d]<\/strong><\/p>\n

     <\/p>\n

    Example:<\/p>\n

     <\/p>\n

    p[type=\u201cnote\u201d] <\/strong>selects all <p>elements having the type attribute value \u201cnote\u201d.<\/p>\n

    <!DOCTYPE html><\/p>\n

    <html><\/p>\n

    <head><\/p>\n

    <style><\/p>\n

    a[target=_blank] { background-color: yellow;}<\/p>\n

    <\/style><\/p>\n

    <\/head><\/span><\/p>\n

    <body><\/span><\/p>\n

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

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

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

    <\/body><\/span><\/p>\n

    <\/html><\/span><\/p>\n<\/div>\n

    \"\"<\/p>\n

    \n

    \u00a0 \u00a0 \u00a0Starts-with attribute value selector<\/strong><\/p>\n

     <\/p>\n

    The selector selects elements having an attribute value that starts with the value specified.<\/p>\n

     <\/p>\n

    The general syntax :<\/p>\n

     <\/p>\n

    Element[attribute_name^=\u201cattribute_value\u201d]<\/strong><\/p>\n

    For example, the selector p[type^=\u201ccopy\u201d]<\/strong> matches<\/p>\n

    <p type=\u201ccopyright\u201d>copyright<\/p> as well as <p type=\u201ccopyleft\u201d>copyleft..<\/p><\/p>\n

     <\/p>\n

    <!DOCTYPE html><\/p>\n

    <html><\/p>\n

    <head><\/p>\n

    <style><\/p>\n

    [class^=”top”] {<\/p>\n

    background: yellow;<\/p>\n

    }<\/p>\n

    <\/style><\/p>\n

    <\/head><\/p>\n

    <body><\/p>\n

    <h1 class=”top-header”>Welcome<\/h1><\/p>\n

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

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

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

    <\/body><\/span><\/p>\n

    <\/html><\/span><\/p>\n<\/div>\n

    \"\"<\/p>\n

    \n

    \u00a0 \u00a0Ends-with attribute value selector<\/strong><\/p>\n

     <\/p>\n

    This attribute selects elements having attribute value that ends with the value specified.<\/p>\n

    The general syntax :<\/p>\n

    Element[attribute_name$=\u201cattribute_value\u201d]<\/strong><\/p>\n

    For e.g.,<\/p>\n

    a[href$=\u201c.com\u201d] – <\/strong>selects those anchor tags that point to .com websites and not any other domains.<\/p>\n

     <\/p>\n

    Substring match attribute value selector<\/strong><\/p>\n

    This selector selects those elements having an attribute value containing at least one occurrence of the<\/p>\n

    value specified.<\/p>\n

    The general syntax :<\/p>\n

    Element[attribute_name*=\u201cattribute_value\u201d]<\/strong><\/p>\n

    For e.g.,<\/p>\n

    a[href*=\u201cimage\u201d] – <\/strong>selects those anchor tags that have image in the href attribute.<\/p>\n

    The Class Selector<\/strong><\/p>\n

    This selector is a specific case of one of many attribute value selectors with the attribute name class and \u201c~=\u201c substituted by \u201c.\u201d<\/p>\n

    So p[class~=\u201cbold\u201d] and p.bold are identical in meaning.<\/p>\n

    It matches <p class=\u201cbold\u201d>..<\/p> as well as <p class=\u201citalic bold\u201d>..<\/p> but not <p class=\u201cleft\u201d>..<\/p><\/p>\n

    Class selectors are useful to control elements that belong to a group as well as to remove limitations of the selector.<\/span><\/p>\n<\/div>\n

    \n

     <\/p>\n

    The Class Selector – Example<\/strong><\/p>\n

     <\/p>\n

    <!DOCTYPE html><\/p>\n

    <html><\/p>\n

    <head><\/p>\n

    <style><\/p>\n

    .center {<\/p>\n

    text-align: center;<\/p>\n

    color: red;<\/p>\n

    }<\/p>\n

    <\/style><\/p>\n

    <\/head><\/p>\n

    <body><\/p>\n

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

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

    <\/body><\/p>\n

    <\/html><\/p>\n<\/div>\n

    \"\"<\/p>\n

    \n

     <\/p>\n

    ID Selectors<\/strong><\/p>\n

     <\/p>\n

    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.<\/p>\n

    So it matches <p id=\u201cpara1\u201d>\u2026<\/p> but not <div id=\u201cpara1\u201d>..<\/div>.<\/p>\n

     <\/p>\n

    Note: <\/em><\/strong>The id attributes should be unique Id selectors and other selectors can be combined.<\/p>\n

     <\/p>\n

    For e.g.:<\/p>\n

     <\/p>\n

    <div id=\u201cbook1\u201d><h1>Web Technology<\/h1><\/strong><\/p>\n

    <p>HTML<\/p><\/strong><\/p>\n

    <\/div><\/strong><\/p>\n

    \u00a0And<\/span><\/p>\n

    #book1 h1{color:red;} <\/strong>makes the h1 elements in the div tag to be red.<\/span><\/p>\n<\/div>\n

    \u00a0 ID Selectors – Example<\/strong><\/p>\n

     <\/p>\n

    <!DOCTYPE html><\/p>\n

    <html><\/p>\n

    <head><\/p>\n

    <style><\/p>\n

    #para1 {<\/p>\n

    text-align: center;<\/p>\n

    color: red;<\/p>\n

    }<\/p>\n

    <\/style><\/p>\n

    <\/head><\/p>\n

    <body><\/p>\n

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

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

    <\/body><\/p>\n

    <\/html><\/p>\n

     <\/p>\n

    \"\"<\/p>\n

     <\/p>\n

    Summary<\/strong><\/p>\n

     <\/p>\n

    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.<\/p>\n

     <\/p>\n

     <\/p>\n

    Web Links<\/strong><\/p>\n

      \n
    • www.w3schools.com<\/em><\/li>\n
    • https:\/\/www.uvu.edu\/web\/docs\/css<\/strong>_basics.ppt<\/strong>m<\/em><\/li>\n
    • www.hawaii.edu\/lis\/webteam\/workshops\/07fa.wksp3_basicCSS<\/strong>.ppt<\/strong><\/em><\/li>\n
    • htmlcss<\/strong>javascript.com\/downloads\/css<\/strong>.ppt<\/strong><\/em><\/li>\n
    • www.dsm.fordham.edu\/moniot\/Classes\/IntroWebM04\/Chapter6-CSS<\/strong>.ppt<\/strong><\/em><\/li>\n<\/ul>\n

       <\/p>\n

       <\/p>\n","protected":false},"author":4,"menu_order":13,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":["dr-m-vijayalakshmi"],"pb_section_license":""},"chapter-type":[],"contributor":[58],"license":[],"class_list":["post-98","chapter","type-chapter","status-publish","hentry","contributor-dr-m-vijayalakshmi"],"part":3,"_links":{"self":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/chapters\/98","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/wp\/v2\/users\/4"}],"version-history":[{"count":15,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/chapters\/98\/revisions"}],"predecessor-version":[{"id":540,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/chapters\/98\/revisions\/540"}],"part":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/chapters\/98\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/wp\/v2\/media?parent=98"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/pressbooks\/v2\/chapter-type?post=98"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/wp\/v2\/contributor?post=98"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/wp-json\/wp\/v2\/license?post=98"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}