Visit Http://cbsecs - in Install Cbsecs Android App

visit http://cbsecs.
in
install cbsecs Android app
visit http://cbsecs.in
*
*
*
A CSS rule-set consists of a selector and a declaration block:
* Selector − A selector is an HTML tag at which a style will be applied.
This could be any tag like <h1> or <table> etc.
* Property − A property is a type of attribute of HTML tag. Put simply,
all the HTML attributes are converted into CSS properties. They
could be color, border etc.
* Value − Values are assigned to properties. For
example, color property can have value either red or #F1F1F1 etc.
Example :
table{ border :1px solid #C00; }
h1{color:‘red’; }
In this example all <p> elements will be center-aligned, with a red text
color:
Explanation:
* h1 is a selector in CSS (it points to the HTML element
you want to style: <h1>).
* color is a property, and red is the property value
* text-align is a property, and center is the property value
* The Universal Selectors
* The Type selectors
* The ID Selectors
* The Class Selectors
* Grouping Selectors
* The Child Selectors
* The Descendant Selectors
* The Attribute Selectors
* Multiple Style Rules
• When we want to apply a property on all the tags of the
web page.
• The universal selector ( * ) quite simply matches the
name of any element type.
• It selects all the tags present in the web page.
• Example
* { color: #000000; }
In this type of selector we directly write the name of the
tag on which we want to apply the CSS style.
Example:
Output:
• Different tags can belong to common class by the use of
class attribute.
• CSS style can be applied using the class attribute of the
tags.
• To select elements with a specific class, write a period (.)
character, followed by the class name.
Example
In this example all HTML elements with class=“group1" will be
red and left-aligned:
.group1 { text-align: left; color: red; }
In this example only <p> elements with class=“left" will be left-aligned:
The grouping selector selects all the HTML elements (tags)
with the same style definitions.
If we want to apply same CSS style on more than one tag
or element then we use this method.
Example :
Suppose the h1, h2, and p elements have the same style
definitions
Then we can write in this way
h1, h2, p {
text-align: center;
color: red;
}
• Suppose you want to apply a style rule to a particular
element only when it lies inside a particular element.
• As given in the following example, style rule will apply
to <b> element only when it lies inside <ol> tag.
Example:
ol b { color: #000000; }
You have seen the descendant selectors. There is one more
type of selector, which is very similar to descendants but have
different functionality. Consider the following example −
body > p {
color: #000000;
}
This rule will render all the paragraphs in black if they are
direct child of <body> element. Other paragraphs put inside
other elements like <div> or <td> would not have any effect
of this rule.
You can also apply styles to HTML elements with particular
attributes.
The style rule below will match all the input elements having
a type attribute with a value of text −
Example:
input[type = "text"] { color: #000000; }
The advantage to this method is that

the <input type = “radio" /> element is unaffected, and the
color applied only to the desired text fields.
There are four ways to insert CSS with your HTML document.
• External CSS
• Internal CSS
• Inline CSS
• Imported CSS - @import Rule
With an external style sheet, you can change the look of an
entire website by changing just one file!
Each HTML page must include a reference to the external
style sheet file inside the <link> element, inside the head
section.
Example:
<html> <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body> </html>
The <link> tag defines the relationship between the current
document and an external resource. Mostly used to link to
external style sheets. it is an empty element, it contains
attributes only.
attributes Value Description
Crossorigin anonymous Specifies how the element handles cross-origin
use-credentials requests
href URL Specifies the location of the linked document
Hreflang language_code Specifies the language of the text in the linked
document
Media media_query Specifies on what device the linked document will
be displayed
type media_type Specifies the media type of the linked document
Rel Alternate , author Required. Specifies the relationship between the
dns-prefetch , help current document and the linked document
icon , search
stylesheet
Example:
HTML file
External CSS file
Output on
Web browser
An internal style sheet may be used if one single HTML page
has a unique style. The internal style is defined inside the
<style> element, inside the head section.
Example:
An inline style may be used to apply a unique style for a
single element. To use inline styles, add the style attribute to
the relevant element. The style attribute can contain any CSS
property.
Example:
@import is used to import an external stylesheet in a manner
similar to the <link> element.
Here is the generic syntax of @import rule.
<head> @import "URL"; </head>

Or
<head> @import url("URL"); </head>
Example
Following is the example showing you how to import a style
sheet file into HTML document −
<head> @import "mystyle.css"; </head>
We have discussed four ways to include style sheet rules in a
an HTML document. Here is the rule to override any Style
Sheet Rule.
• Any inline style sheet takes highest priority. So, it will
override any rule defined in <style>...</style> tags or rules
defined in any external style sheet file.
• Any rule defined in <style>...</style> tags will override
rules defined in any external style sheet file.
• Any rule defined in external style sheet file takes lowest
priority, and rules defined in this file will be applied only
when above two rules are not applicable.
Comments are used to explain the code, and may help when
you edit the source code at a later date.
Comments are ignored by browsers.
A CSS comment is placed inside the <style> element, and
starts with /* and ends with */:
CSS uses color values to specify a color.
You can specify your color values in various formats. The
following table lists all the possible formats −
Format Syntax Example
Hex Code #RRGGBB p{color:#FF0000;}
Short Hex Code #RGB p{color:#6A7;}
RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}
RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}
keyword aqua, black, etc. p{color:teal;}

• The background-color property is used to set the
background color of an element.
<p style = "background-color:yellow;">
• The background-image property is used to set the
background image of an element.
body { background-image: url("/css/images/css.jpg");
background-color: #cccccc; }
• The background-repeat property is used to control the
repetition of an image in the background.
<style> body { background-image:url("/css/images/css.jpg");
background-repeat: repeat; } </style> or
<style> body { background-image:url("/css/images/css.jpg");
background-repeat: repeat-y; } </style>
• The background-position property is used to control the
position of an image in the background.
To set the background image position 100 pixels away
from the left side
<style> body { background-image:
url("/css/images/css.jpg"); background-position:100px; }
</style>
• The background-attachment property is used to control
the scrolling of an image in the background.
<style> body { background-image:
url('/css/images/css.jpg'); background-repeat: no-repeat;
background-attachment: fixed / scroll ; } </style>
You can set following font properties of an element −
• The font-family property is used to change the face of a font.
<p style = "font-family:georgia,garamond,serif;">
• The font-style property is used to make a font italic or
oblique.
<p style = "font-style:italic;">
• The font-variant property is used to create a small-caps
effect.
<p style = "font-variant:small-caps;">
• The font-weight property is used to increase or decrease how
bold or light a font appears.
<p style = "font-weight:bold;">
<p style = "font-weight:bolder;">
<p style = "font-weight:500;">
• The font-size property is used to increase or decrease the size
of a font.
You can set following font properties of an element −
• The font-size property is used to increase or decrease the size
of a font.
<p style = "font-size:20px;">
<p style = "font-size:small;">
<p style = "font-size:large;">
• The font property is used as shorthand to specify a number of

other font properties.
<p style = "font:italic small-caps bold 15px georgia;">
You can set following text properties of an element −
• The color property is used to set the color of a text.
• The direction property is used to set the text direction.
• The letter-spacing property is used to add or subtract space
between the letters that make up a word.
• The word-spacing property is used to add or subtract space
between the words of a sentence.
• The text-indent property is used to indent the text of a
paragraph.
• The text-align property is used to align the text of a document.
• The text-decoration property is used to underline, overline, and
strikethrough text.
• The text-transform property is used to capitalize text or convert
text to uppercase or lowercase letters.
• The text-shadow property is used to set the text shadow around
a text.
You can set the following image properties using CSS.
• The border property is used to set the width of an image
border.
• The height property is used to set the height of an image.
• The width property is used to set the width of an image.
• The -moz-opacity property is used to set the opacity of an
image.
You can set following properties of a hyper link −
• The :link signifies unvisited hyperlinks.
• The :visited signifies visited hyperlinks.
• The :hover signifies an element that currently has the
user's mouse pointer hovering over it.
• The :active signifies an element on which the user is
currently clicking.
You can set following properties of a hyper link −
• The :link signifies unvisited hyperlinks.
• The :visited signifies visited hyperlinks.
• The :hover signifies an element that currently has the
user's mouse pointer hovering over it.
• The :active signifies an element on which the user is
currently clicking.

Visit Http://cbsecs - in Install Cbsecs Android App

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Visit Http://cbsecs - in Install Cbsecs Android App

Uploaded by

Copyright:

Available Formats

visit http://cbsecs.

The advantage to this method is that

External CSS file

<head> @import "URL"; </head>

<head> @import "mystyle.css"; </head>

RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}

keyword aqua, black, etc. p{color:teal;}

• The font property is used as shorthand to specify a number of

You might also like