Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
62 views

Cascading Style Sheet (CSS) : The Type Selectors

CSS handles the styling of elements on a web page, including colors, fonts, layout, and variations for different devices. CSS rules contain a selector to specify the element targeted, a property to set such as color or font-size, and a value to apply such as red or 16px. Styles can be embedded within HTML, linked via an external CSS file, or defined inline on elements. CSS rules can override each other, with inline styles taking precedence over internal and external styles.

Uploaded by

Sinnakannu Senthilnathan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
62 views

Cascading Style Sheet (CSS) : The Type Selectors

CSS handles the styling of elements on a web page, including colors, fonts, layout, and variations for different devices. CSS rules contain a selector to specify the element targeted, a property to set such as color or font-size, and a value to apply such as red or 16px. Styles can be embedded within HTML, linked via an external CSS file, or defined inline on elements. CSS rules can override each other, with inline styles taking precedence over internal and external styles.

Uploaded by

Sinnakannu Senthilnathan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Cascading Style sheet (CSS)

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of
fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or
colors are used, layout designs, variations in display for different devices and screen sizes as well as a variety
of other effects.
A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding
elements in your document. A style rule is made of three parts
 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.

You can put CSS Style Rule Syntax as follows :


selector { property: value; }

The Type Selectors


This is the same selector we have seen above. Again, one more example to give a color to all level 1 headings:
h1 { color: #36CFFF; }

The Universal Selectors


Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any
element type −
* { color: #000000; }
This rule renders the content of every element in our document in black.

The Descendant Selectors


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 <em> element only when it lies inside <ul> tag.
ul em { color: #000000; }

The Class Selectors


You can define style rules based on the class attribute of the elements. All the elements having that class will
be formatted according to the defined rule.
.black { color: #000000; }
This rule renders the content in black for every element with class attribute set to black in our document. You
can make it a bit more particular. For example:
h1.black { color: #000000;}
This rule renders the content in black for only <h1> elements with class attribute set to black.

You can apply more than one class selectors to given element. Consider the following example:
<p class="center bold">This para will be styled by the classes center and bold.</p>

The ID Selectors
You can define style rules based on the id attribute of the elements. All the elements having that id will be
formatted according to the defined rule.
#black { color: #000000; }

CSS Inclusion
 Embedded CSS - The <style> Element (Internal CSS)
You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside
<head>...</head> tags. Rules defined using this syntax will be applied to all the elements available in
the document.
<!DOCTYPE html>
<html>
<head>
<style type = "text/css" media = "all">
body { background-color: linen;}
h1 { color: maroon; margin-left: 40px;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

 Inline CSS - The style Attribute


You can use style attribute of any HTML element to define style rules. These rules will be applied to
that element only.
<element style = "...style rules....">

 External CSS - The <link> Element


The <link> element can be used to include an external stylesheet file in your HTML document.
An external style sheet is a separate text file with .css extension. You define all the Style rules within
this text file and then you can include this file in any HTML document using <link> element.
<head><link type = "text/css" href = "..." media = "..." /></head>

 Imported CSS - @import Rule


@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("URL");
</head>

CSS Rules Overriding


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.

CSS Comments
Many times, you may need to put additional comments in your style sheet blocks. So, it is very easy to
comment any part in style sheet. You can simple put your comments inside /*.....this is a comment in style
sheet.....*/.
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is a multi-line comment */
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

CSS Colors
CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an
element (i.e., its text) or else for the background of the element. They can also be used to affect the color of
borders and other decorative effects.

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;}

CSS - Background
 The background-color property is used to set the background color of an element.
 The background-image property is used to set the background image of an element.
 The background-repeat property is used to control the repetition of an image in the background.
 The background-position property is used to control the position of an image in the background.
 The background-attachment property is used to control the scrolling of an image in the background.
 The background property is used as a shorthand to specify a number of other background properties.

Set the Background Color


Following is the example which demonstrates how to set the background color for an element.
<html>
<head>
<body>
<p style = "background-color:yellow;">
This text has a yellow background color.</p>
</body>
</head>
<html>

Set the Background Image Position


The following example demonstrates how to set the background image position 100 pixels away from the left
side.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p>Tutorials point</>
</body>
</html>

CSS Fonts
 The font-family property is used to change the face of a font.
 The font-style property is used to make a font italic or oblique.
 The font-variant property is used to create a small-caps effect.
 The font-weight property is used to increase or decrease how bold or light a font appears.
 The font-size property is used to increase or decrease the size of a font.
 The font property is used as shorthand to specify a number of other font properties.

Set the Font Family


<html>
<head>
</head>
<body>
<p style="font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the default serif font
depending on which font you have at your system.
</p>
</body>
</html>

Set the Font Style


Following is the example, which demonstrates how to set the font style of an element. Possible values are
normal, italic and oblique.
<html>
<head>
</head>
<body>
<p style="font-style:italic;">
This text will be rendered in italic style
</p>
</body>
</html>
Set the Font Variant
The following example demonstrates how to set the font variant of an element. Possible values are normal
and small-caps.
<html>
<head>
</head>
<body>
<p style="font-variant:small-caps;">
This text will be rendered as small caps
</p>
</body>
</html>
Set the Font Weight
The following example demonstrates how to set the font weight of an element. The font-weight property
provides the functionality to specify how bold a font is. Possible values could be normal, bold, bolder, lighter,
100, 200, 300, 400, 500, 600, 700, 800, 900.
<html>
<head>
</head>
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:500;">This font is 500 weight.</p>
</body>
</html>

Set the Font Size


The following example demonstrates how to set the font size of an element. The font-size property is used to
control the size of fonts. Possible values could be xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger, size in pixels or in %.
<html>
<head>
</head>
<body>
<p style="font-size:20px;">This font size is 20 pixels</p>
<p style="font-size:small;">This font size is small</p>
<p style="font-size:large;">This font size is large</p>
</body>
</html>

CSS - Text
 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 white-space property is used to control the flow and formatting of text.
 The text-shadow property is used to set the text shadow around a text.

Set the Text Color


The following example demonstrates how to set the text color. Possible value could be any color name in any
valid format.
<p style="color:red;">

Set the Text Direction


The following example demonstrates how to set the direction of a text. Possible values are ltr or rtl.
<p style="direction:rtl;">
Set the Space between Characters
The following example demonstrates how to set the space between characters. Possible values are normal or
a number specifying space..

<p style="letter-spacing:5px;">

Set the Space between Words


The following example demonstrates how to set the space between words. Possible values are normal or a
number specifying space.
<p style="word-spacing:5px;">

Set the Text Indent


The following example demonstrates how to indent the first line of a paragraph. Possible values are % or a
number specifying indent space.
<p style="text-indent:1cm;">

Set the Text Alignment


The following example demonstrates how to align a text. Possible values are left, right, center, justify.
<p style="text-align:right;">This will be right aligned.</p>

Decorating the Text


The following example demonstrates how to decorate a text. Possible values are none, underline, overline,
line-through, blink.
<p style="text-decoration:underline;">This will be underlined</p>

Set the Text Cases


The following example demonstrates how to set the cases for a text. Possible values are none, capitalize,
uppercase, lowercase.
<p style="text-transform:capitalize;">This will be capitalized</p>
<p style="text-transform:uppercase;">This will be in uppercase</p>
<p style="text-transform:lowercase;">This will be in lowercase</p>

Set the Text Shadow


The following example demonstrates how to set the shadow around a text. This may not be supported by all
the browsers.
<p style="text-shadow:4px 4px 8px blue;">if your browser supports the CSS text-shadow property, this text
will have a blue shadow.</p>

CSS images
1. The border property is used to set the width of an image border.
<img style="border:0px;" src="/css/images/logo.png" />
<img style="border:3px dashed red;" src="/css/images/logo.png" />

2. The height property is used to set the height of an image.


<img style="border:1px solid red; height:100px;" src="/css/images/logo.png" />
<img style="border:1px solid red; height:50%;" src="/css/images/logo.png" />

3. The width property is used to set the width of an image.


<img style="border:1px solid red; width:150px;" src="/css/images/logo.png" />
<img style="border:1px solid red; width:100%;" src="/css/images/logo.png" />
CSS LINKS
 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.

<style type="text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>

CSS-Tables
 The border-collapse specifies whether the browser should control the appearance of the adjacent
borders that touch each other or whether each cell should maintain its style.
<html>
<head>

<style type="text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>

</head>
<body>
<table class="one">
<caption>Collapse Border Example</caption>
<tr><td class="a"> Cell A Collapse Example</td></tr>
<tr><td class="b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class="two">
<caption>Separate Border Example</caption>
<tr><td class="a"> Cell A Separate Example</td></tr>
<tr><td class="b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>

 The border-spacing specifies the width that should appear between table cells.
<html>
<head>

<style type="text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
</style>

</head>
<body>
<table class="one" border="1">
<caption>Separate Border Example with border-
spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />

<table class="two" border="1">


<caption>Separate Border Example with border-
spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>

</body>
</html>

 The caption-side captions are presented in the <caption> element. By default, these are rendered
above the table in the document. You use the caption-side property to control the placement of the
table caption.
<html>
<head>

<style type="text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style="width:400px; border:1px solid black;">
<caption class="top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />

<table style="width:400px; border:1px solid black;">


<caption class="bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />

<table style="width:400px; border:1px solid black;">


<caption class="left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />

<table style="width:400px; border:1px solid black;">


<caption class="right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
</body>
</html>

CSS Borders
 The border-color specifies the color of a border.

<style type="text/css">
p.example1{
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2{
border:1px solid;
border-color:#009900; /* Green */
}
</style>

 The border-style specifies whether a border should be solid, dashed line, double line, or one of the
other possible values.
The border-style Property
o none: No border. (Equivalent of border-width:0;)
o solid: Border is a single solid line.
o dotted: Border is a series of dots.
o dashed: Border is a series of short lines.
o double: Border is two solid lines.
o groove: Border looks as though it is carved into the page.
o ridge: Border looks the opposite of groove.
o inset: Border makes the box look like it is embedded in the page.
o outset: Border makes the box look like it is coming out of the canvas.
o hidden: Same as none, except in terms of border-conflict resolution for table elements.

border-bottom-style changes the style of bottom border.


border-top-style changes the style of top border.
border-left-style changes the style of left border.
border-right-style changes the style of right border.

 The border-width specifies the width of a border.


border-bottom-width changes the width of bottom border.
border-top-width changes the width of top border.
border-left-width changes the width of left border.
border-right-width changes the width of right border.

CSS Margin
The margin specifies a shorthand property for setting the margin properties in one declaration.
The margin-bottom specifies the bottom margin of an element.
The margin-top specifies the top margin of an element.
The margin-left specifies the left margin of an element.
The margin-right specifies the right margin of an element.

<p style="margin: 15px; border:1px solid black;">


all four margins will be 15px
</p>

CSS Padding
The padding-bottom specifies the bottom padding of an element.
The padding-top specifies the top padding of an element.
The padding-left specifies the left padding of an element.
The padding-right specifies the right padding of an element.
The padding serves as shorthand for the preceding properties.

<p style="padding-bottom: 15px; border:1px solid black;">


This is a paragraph with a specified bottom padding
</p>

You might also like