4. Web Technology CSS Basics-1

WEB TECHNOLOGY CASCADING STYLE SHEET BASIC DR. JYOTI YADAV

WEB LANGUAGE •Applying CSS- The different ways you can apply CSS to HTML. •Selectors, Properties, and Values - The bits that make up CSS. •Colors- How to use color? •Text- How to manipulate the size and shape of text. •Margins and Padding- How to space things out. •Borders- Erm. Borders. Things that go around things. •Putting It All Together- Throwing all of the above ingredients into one spicy hotpot.

WHY CSS ? As we know that HTML has limited design capabilities, we can’t be able to create most appealing, professional websites using just HTML. Using only HTML we can’t add various styles, animations, special effects, transitions, to web pages. We need to take help of CSS to create well designed websites. HTML and CSS together help us to create consistent, readable, accessible, manageable and appealing professional web sites. (Over-all: well designed websites.) CSS helps us to add style, special effects, animations, transitions, etc to our web pages.

WHAT IS CSS? CSS is the acronym for: ‘Cascading Style Sheets’. CSS is the sister language to HTML that allows you to style your web pages. An example of a style change would be to make words bold. In standard HTML you would use the <b> tag like so: <b>make me bold</b> This will make that specific paragraph red. But, if you remember, the best-practice approach is that the HTML should be a stand-alone, presentation free document, and so inline styles should be avoided wherever possible.

CASCADING STYLE SHEET/DOCUMENT • CSS contains collection of style rules some of them are passed on or inherited to child tags when applied to their parent tags. • CSS is something like a beauty kit for our web pages or entire website. It is used to add design aesthetics, design principles to websites and create most appealing and well designed web sites.

TREE REPRESENTATION OF HTML CODE <html> <head> <body> <title> <p> <p> <p> <b> <u> <b> <html> <head> <title> Home Page </title> </head> <body> <p>Welcome to <b> CSS </b> </p> <p>Welcome to CSS </p> <p>Welcome to </u> <b> CSS </b> </p> </body> </html>

BENEFITS AND LIMITATIONS OF CSS Advantages of CSS: • CSS allows us to add styles, animations, transition and various effects to web pages. • Create consistent and easy to maintain websites. • Easily implement design principles to websites. • Separate structure of web page from presentation of web page. develop web sites rapidly. • Create well designed websites. Limitations of CSS: • CSS is used to add design aesthetics, styles, and effects to web pages. • We can’t create more interactive (Dynamic / real-time) web sites using just CSS. • So, creating real time simulations, games, applications is not possible using CSS. • To overcome this limitation we use scripting languages like JavaScript, PHP, etc…

DECLARING CSS STYLE Style: Distinctive appearance Distinguish one element from other elements Ex: color, font-size, border, border-style etc….. Style Rule: styles are properties in CSS property-name : value Ex: Property-name Value Color Red Background-color Yellow Font-family Arial Font-size 24pt

DECLARING CSS STYLE Declaring style rules: property-name : value ; Ex: color : red; background-color : yellow; font-family : Arial; font-size : 24pt; Declaration list: color : red; background-color : yellow; font-family : Arial; font-size : 24pt; Declaration list is a collection of style rules separated by semicolons. OR Declaration list is a list of style rule declarations.

CSS STYLE RULE SET OF RULES CSS Style rule set: set of rules (declaration list) Syntax: selector { declaration list; } Ex: p { color : red; background-color : yellow; font-family : Arial; font-size : 24pt; }

APPLYING STYLES There are 3 different ways of applying styles : 1.Inline styles 2. Embedded Styles 3. External Styles

INLINE STYLES • styles that are placed within the tag itself. • we use style attribute to place inline styles. • value to the style attribute is declaration list. Limitations of inline style: • If we have many tags with common styles, then we have to copy • paste the entire declaration list to every other tag. • That increases the webpage size. • Increase in code size. • Code Redundancy. • No maintainability. • Time consuming. To overcome this limitation we use embedded styles.

INLINE STYLE <tagname style = “declaration list”> </tagname> Eg. <p style = “color:white;background-color:black; font-size:14pt;”>Welcome to CSS </p>

EMBEDDED STYLE • Styles that are placed within the style tag are called embedded styles.We use style tag to place embedded styles. • Declaration block: is used to group declarations separated by semicolon in one block, so that more than one styles can be applied on a selected element or more than one selected elements. { //beginning of a block color:white; // declaration of style rule 1 background-color:black; // declaration of style rule 2 font-size:24pt; // declaration of style rule 3 } // end of a block

EMBEDDED STYLE • Selector: is a string used to select an element or more than one elements to which we want to apply group of style rules. selector { color:white; background-color:black; font-size:24pt; } p //This P tag is used as a selector and is applied to the entire group of properties { color:white; background-color:black; font-size:24pt; }

EMBEDDED STYLE • Types of selectors: tag selector, class selector, id selector, and contextual selector. Limitations of Embedded Style: • If we have many web pages with common styles, then we have to copy paste all embedded declaration blocks to every other web page. • That increases the web site size. • Increase in code size. • Code Redundancy. • No maintainability. • Time consuming. • To overcome this limitation we use external style.

EXTERNAL STYLE • External Style Sheet is basically a .CSS file containing list of declaration blocks. • This .CSS file is linked to various web pages to apply common styles. • To link html and css files together we use link tag. attributes: href: href stands for Hyperlink reference type: indicates the content in the reference file. rel: rel indicates relationship, is style-sheet Advantage: • We can implement consistency throughout the website. • Reduces code redundancy. Reduces website size. Limitations: If we make any changes in the CSS file, then every other linked html page will get affected. So, we need to handle it carefully

WEB LANGUAGE To link html and css files together: <link href=“filename.css” type =“text/css” rel=“stylesheet”/> <link> tag should be placed within the <head> tag To link html and css files together we use link tag. attributes: href: href stands for Hyperlink reference type: indicates the content in the reference file. rel: rel indicates relationship, is style-sheet Advantage: We can implement consistency throughout the website. Reduces code redundancy. Reduces website size. Limitations: If we make any changes in the CSS file, then every other linked html page will get affected. So, we need to handle it carefully.

CSS- PRECEDENCE OF STYLES • The type of style being considered more important than other is known as precedence of style. • The order in which styles are placed determines which style rule takes the highest precedence. • The better understanding of precedence of styles will help us to create more organized and manageable code. • Order of precedence: 1. Inline styles 2. Internal (Embedded) styles 3. External styles. 4. Browser default styles.

CSS CASCADE VS INHERITANCE • Cascade: deals with precedence of style rules or CSS properties (i.e. the order in which properties are applied to an html element). • It solves conflict situations. • The rules of the cascade include: 1. Later properties (nearest) override earlier (farthest) properties 2. More specific selectors (less generic) override less specific (more generic) selectors

CSS CASCADE VS INHERITANCE Inheritance: • Deals with how styles poured down from a parent element to its child elements. • Certain properties, like font-family gets inherited. If you set a font- family on the body element, then it will get inherited by all the elements within the body. • The same is true for color, but it is not true for background color, border-style, margin or height which will always default to transparent, none, auto and auto.

TYPES OF SELECTORS 1. Tag selector 2. Class selector 3. ID selector 4. Group selector 5. Contextual selector a. Descendent selector b. Child selector c. Adjacent sibling selector d. General sibling selector 6. Attribute selector 7. Pseudo classes 8. Pseudo elements 9. Universal selector

TAG SELECTOR Syntax of CSS rule-set / rule: selector { declaration list; } To implement tag selector, In place of selector, we write tag name. Syntax of tag selector: tagname { declaration list; } It selects every html tag with the specified tag name and applies styles on them. Example for tag selector: p { color: green; font-size:16pt; border: 2px solid red; } It selects every p tag available on the page and applies specified styles on them.

CLASS SELECTOR To select tags by their “class attribute value” and apply styles on them we use class selector. Syntax of CSS rule-set / rule: selector { declaration list; } To implement class selector, in place of selector, we write class attribute value preceded by period(dot). Syntax of class selector: tagname class=”classattributevalue” .classattributevalue { declaration list; } It selects every html tag which has specified class attribute value and applies styles on them.

CLASS SELECTOR Example for class selector: p class=”solidborder” . solidborder { border: 2px solid red; } It selects every html tag available on the page with a specified class attribute value and applies specified styles on them. You can specify same class attribute value to more than one tag, if required. An html element can have list of class attribute values separated by white space, if required.

ID SELECTOR To select tags by their “id attribute value” and apply styles on them we use id selector. To implement id selector, In place of selector, we write id attribute value preceded by hash(#) symbol. In CSS # symbol indicates ID selector. Syntax of id selector: tagname id=”idattributevalue” #idattributevalue { declaration list; } It selects every html tag which has specified id attribute value and applies styles on them.

ID SELECTOR Example for id selector: h1 id=”solidborder” # solidborder { border: 2px solid red; } It selects every html tag available on the page with a specified id attribute value and applies specified styles on them. You should not specify same id attribute value to more than one tag. (i.e. id attribute value should be unique in the page). If you want to identify an html element uniquely in the page use id selector. An html element should not have list of id attribute values separated by white space. ID attribute value is not only used to identify an html element uniquely and apply styles on it. It is also used access an html element in JavaScript and allows us to add behavior to it.

GROUP SELECTOR / GROUPING SELECTORS • There are situations where different tags may have similar styles • To reduce code redundancy we create group selector • To implement group selector, in place of selector we write comma separated list of selectors Syntax of group selector: selector1, selector2, selector3 { declaration list; }

GROUP SELECTOR / GROUPING SELECTORS h3 { background-color:gray; color:white; border:2px solid black; } p { background-color:gray; color:white; border:2px solid black; } Instead of writing two separate rule-sets, we can group them to reduce code redundancy h3,p { background-color:gray; color:white; border:2px solid black; }

COMBINATION SELECTOR / COMBINING SELECTORS It is possible to combine a selector with other selectors to make more specific selection. To combine selectors, in place of selector without using any separator; we write selectors one beside another from generic to specific selector Syntax of Combination selector: selector1selector2 { declaration list; }

COMBINATION SELECTOR / COMBINING SELECTORS Ex: tagselectorclassselector { declaration list; } tagselectoridselector { declaration list; } classselectorattributeselector { declaration list; }

COMBINATION SELECTOR / COMBINING SELECTORS Ex: h1.redborder//tag selector +class selector { border:2px solid red; background-color:cyan; } p.redborder// tag selector + class selector { border:2px solid red; background-color:yellow; } p.redborder[align=”right”] //Combination of tag selector + class selector+attribute selector { border:2px solid red; background-color:magenta; }

DOCUMENT OBJECT MODEL TREE (DOM) • For every HTML code we can draw a Document Object Model tree (DOM tree). • DOM tree is drawn based on the parent and child relationship present between html elements. • A tree is a finite set of nodes. Nodes in the tree are represented by oval shape. Nodes are connected with one another by straight lines known as edges. • First node or top most node in the tree is known as root node. A node containing single child or multiple children is known as parent node. A node containing no children is known as leaf node. • Ancestors of a node are any node visited in the path from the selected node to the root node. (i.e. Parent, Grandparent, Grand grandparent, any node visited up to the root node are considered as Ancestors) • Descendants of a node are any node falling under the selected node tree. (i.e. Direct Children, Children’s Children, or any node that can be reachable from the selected node up to the leaf node is considered as descendant node) • Two or more nodes with same parent are known as siblings (i.e. brothers)

DOM TREE <div> <header> <h2> Heading Text </h2> <p> Paragraph Text </p> <a href='#'> HyperText </a> </header> </div> <div> <p> Paragraph Text </p> <a href='#'> HyperText </a> </div> <footer> <h2> Heading Text </h2> <p> Paragraph Text </p> <a href='#'> HyperText </a> </footer>

DESCENDENT SELECTOR (WHITE SPACE) Descendants of a node are any node falling under the selected node tree. (i.e. Direct Children, Children’s Children, and so on or any node that can be reachable from the selected node to the leaf nodes are considered as descendants of node) It selects any html element targeted by the selector written after the space character, which is/are descendant(s) of the any html element targeted by the selector written before the space character. To implement descendant selector, in place of selector; we write selectors one beside another separated by the white space character Syntax of Descendant Selector: selector1 selector2 { declaration list; } It selects any html element targeted by selector2, which is descendant(s) of any html element targeted by selector1 Ex: div p { border:2px solid red; } It selects any p element, which is descendant of any div element

CHILD SELECTOR / DIRECT CHILD SELECTOR It selects any HTML element targeted by the selector written after the greater than character, which is a direct child of the any HTML element targeted by the selector written before the greater than character. To implement child selector, in place of selector; we write selectors one beside another separated by the greater than character. Syntax of Child Selector: selector1 > selector2 { declaration list; } It selects any HTML element targeted by selector2, which is direct child of any HTML element targeted by selector1 Ex: div > p { border:2px solid red; } It selects any p element, which is direct child of any div element

ADJACENT SIBLING SELECTOR OF NEXT SIBLING SELECTOR • It selects any HTML element targeted by the selector written after the + character, which is/are sibling of and immediately preceded by any HTML element targeted by the selector written before the + character. • To implement adjacent sibling selector, in place of selector; we write selectors one beside another separated by + (plus) sign Syntax of Adjacent Sibling (+) Selector: selector1 + selector2 { declaration list; } It selects any HTML element targeted by the selector2, which is sibling of and immediately preceded by any HTML element targeted by the selector1 Ex: h2 + p { border:2px solid red; } It selects any p element which is sibling of and immediately preceded by any h2 element.

GENERAL SIBLING SELECTOR (~) It selects any HTML element targeted by the selector written after the ~ character, which is/are sibling of and need not be immediately preceded by but should be preceded by any HTML element targeted by the selector written before the ~ char. To implement general sibling selector, in place of selector; we write selectors one beside another separated by ~ (tilde) char. Syntax of Generic Sibling (~) Selector: selector1 ~ selector2 { declaration list; } It selects any HTML element targeted by the selector2, which is sibling of and need not be immediately preceded by but should be preceded by any HTML element targeted by the selector1 Ex: General sibling selector: h2 ~ p { border:2px solid red; } It selects any p element which is sibling of and need not be immediately preceded by but should be preceded by any h2 element Ex: Adjacent sibling selector: h2 + p { border:2px solid red; } It selects any p element which is sibling of and should be immediately preceded by any h2 element.

ATTRIBUTE SELECTOR [ ] Attribute selector is used to select HTML elements based on their attribute name and attribute value. Syntax of attribute selector: selector [attribute expression] { declaration list; } Where: selector is optional, it can be tag, class, id selector etc… attribute expression can be a valid combination of attribute name, value and associated operators. Ex: tag selector[attribute name=”value”] { declaration list; } It selects any HTML element targeted by the tag selector, which contains an attribute name where the attribute value exactly matches the value specified in attribute expression Ex: p[align=”right”] { border:2px solid red; } It selects any paragraph element, which contains an attribute align, where the align attribute value exactly matches the value right.

ATTRIBUTE SELECTOR [ ] 1. [attribute name] { declaration list; } It selects any html element, which contains an attribute name written in between the square brackets Ex: [align] { border:2px solid red; } It selects any html element, which contains an attribute with the name align 2. selector[attribute name] { declaration list; } It selects any html element targeted by the selector, which contains an attribute name written in between the square brackets Ex: p[align] { border:2px solid red; } It selects any paragraph element, which contains an attribute with the name align

ATTRIBUTE SELECTOR [ ] 3. selector[attribute name=”value”] { declaration list; } It selects any html element targeted by the selector, which contains an attribute name where the attribute value exactly matches with the value specified in attribute expression Ex: p[align=”center”] { border:2px solid red; } It selects any paragraph element, which contains an attribute align, where the align attribute value exactly matches with the value center. 4. selector[attribute name^=”value”]{ declaration list; } It selects any html element targeted by the selector, which contains an attribute name where the attribute value begins with the value specified in attribute expression Ex: a[href^=”https://”]{ border:2px solid red; } It selects any anchor element, which contains an attribute href, where href attribute value begins with https://

ATTRIBUTE SELECTOR [ ] 5. selector[attribute name$=”value”]{ declaration list; } It selects any html element targeted by the selector, which contains an attribute name where the attribute value ends with the value specified in attribute expression Ex: a[href$=”tutorials”]{ border:2px solid red; } It selects any anchor element, which contains an attribute href, where href attribute value ends with tutorials 6. selector[attribute name*=”value”]{ declaration list; } It selects any html element targeted by the selector, which contains an attribute name where the attribute value contains the value specified in attribute expression Ex: a[href*=”.com”]{ border:2px solid red; } It selects any anchor element, which contains an attribute href, where href attribute value contains .com.

ATTRIBUTE SELECTOR [ ] 7. selector[attribute name~=”value”] { declaration list; } It selects any html element targeted by the selector, which contains an attribute name where the attribute value is a space separated list of values, and contains a word specified as the value in the attribute expression Ex: a[title~=”my”] { border:2px solid red; } It selects any anchor element, which contains an attribute title, where title attribute value contains a word my

ATTRIBUTE SELECTOR [ ] 8. selector[attribute name|=”value”] { declaration list; } It selects any html element targeted by the selector, which contains an attribute name where the attribute value begins with the value specified in attribute expression and immediately followed by hyphen (-) character. Ex: a[lang|=”en”] { border:2px solid red; } It selects any anchor element, which contains an attribute lang, where lang attribute value begins with en word and immediately followed by hyphen (-) character.

PSEUDO CLASS SELECTOR Pseudo class selectors are used to select HTML elements based on their current status and apply styles on them. Syntax of Pseudo Class Selector: selector: pseudo class keyword { declaration list; } It selects any HTML element targeted by the selector, and applies specified styles based on the pseudo class keyword used Syntax for “hover” pseudo class selector: selector : hover { declaration list; } It selects any HTML element targeted by the selector, if its status is hovered (on mouse over) Ex: a:hover { background-color : orange; } It selects any anchor element, if its status is hovered

PSEUDO CLASS SELECTOR - NAVIGATION 1. selector : link { declaration list; } It selects any html element targeted by the selector, if its status is un-visited (or default) Ex: a:link { text-decoration : none; } It selects any anchor element, if its status is un-visited 2. selector : hover { declaration list; } It selects any html element targeted by the selector, if its status is hovered (on mouse over) Ex: a:hover { border-bottom : 5px solid blue; } It selects any anchor element, if its status is hovered

PSEUDO CLASS SELECTOR - NAVIGATION 3. selector : visited {declaration list;} It selects any html element targeted by the selector, if its status is visited (on click and page visit) Ex: a:visited { color : green; } It selects any anchor element, if its status is visited

PSEUDO CLASS SELECTOR -TARGET 4. selector : target {declaration list;} It selects any html element targeted by the selector, if its status is targeted (only when element id or name appears as targeted fragment identifier in the page URI.) Ex: p:target {border : 2px dotted red;} It selects any p element which is currently a targeted fragment identifier in the page URI (Uniform Resource Identifier).

PSEUDO CLASS SELECTOR - USER INTERFACE 1. selector : enabled { declaration list; } It selects any html element targeted by the selector, if its status is enabled (default) 2. selector : disabled { declaration list; } It selects any html element targeted by the selector, if its status is disabled Ex: input : enabled { background-color : yellow; } It selects any input element, if its status is enabled Ex: input : disabled { background-color : black; } It selects any input element, if its status is disabled

PSEUDO CLASS SELECTOR - USER INTERFACE 3. selector : checked { declaration list; } It selects any html element targeted by the selector, if its status is checked Ex: input : checked + span { color : white; background-color : red; } It selects any span element, if it is a sibling of and immediately preceded by input element which is in checked state

PSEUDO CLASS SELECTOR - USER INTERFACE 4. selector : focus { declaration list; } It selects any html element targeted by the selector, if its status is focused Ex: input : focus { color : white; background-color : red; } It selects any input element, if its status is focused

PSEUDO CLASS SELECTOR - USER INTERFACE 5. selector : optional { declaration list; } It selects any html element targeted by the selector, if its status is optional Ex: input : optional { color : white; background-color : red; } It selects any input element, if its status is optional

PSEUDO CLASS SELECTOR - USER INTERFACE 6. selector : required { declaration list; } It selects any html element targeted by the selector, if its status is required Ex: input : required { color : white; background-color : red; } It selects any input element, if its status is required

PSEUDO CLASS SELECTOR – VALID/INVALID 7. selector : invalid { declaration list; } It selects any html element targeted by the selector, if its status is invalid Ex: input : invalid { color : white; background-color : red; } It selects any input element, if its status is invalid

PSEUDO CLASS SELECTOR – VALID/INVALID 8. selector : valid { declaration list; } It selects any html element targeted by the selector, if its status is valid Ex: input : valid { color : white; background-color : green; } It selects any input element, if its status is valid

STRUCTURAL PSEUDO CLASS SELECTORS They are used to target html elements and apply styles based on the relationship present between the html elements in the DOM tree structure. (I.e. root, first-child, last-child etc.) 1. selector : root { declaration list; } It selects any html element targeted by the selector, if it is the root element in the DOM tree Ex: html : root { background-color : yellow; } It selects html tag, if it is root element in DOM tree. W.K.T. always html tag will be the root element of the DOM tree, hence root pseudo class selector always targets to html element

STRUCTURAL PSEUDO CLASS SELECTORS 2. selector : empty { declaration list; } It selects any html element targeted by the selector, if it is the empty element (has no content) Ex: p: empty { border:2px solid red; } It selects any p element, if it is the empty element

STRUCTURAL PSEUDO CLASS SELECTORS 3. selector : first-child { declaration list; } It selects any HTML element targeted by the selector, if it is the first child of its parent HTML element Ex: p: first-child { border:2px solid red; } It selects any p element, if it is the first child of its parent HTML element

STRUCTURAL PSEUDO CLASS SELECTORS 4. selector : last-child { declaration list; } It selects any html element targeted by the selector, if it is the last child of its parent html element Ex: p: last-child { border:2px solid red; } It selects any p element, if it is the last child of its parent HTML element 5. selector : only-child { declaration list; } It selects any HTML element targeted by the selector, if it is the only child of its parent HTML element Ex: p: only-child { border:2px solid red; } It selects any p element, if it is the only child of its parent HTML element

4. Web Technology CSS Basics-1

4. Web Technology CSS Basics-1

More Related Content

What's hot

Similar to 4. Web Technology CSS Basics-1

More from Jyoti Yadav

Recently uploaded

In this document

4. Web Technology CSS Basics-1