chapter 3-CSS (1)
chapter 3-CSS (1)
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 or border etc.
Value: Values are assigned to properties. For example color property can have value either red or
#F1F1F1 etc.
CSS Comments:
Comments are used to explain your code, and may help you when you edit the source code at a later
date.
Comments are ignored by browsers.
A CSS comment starts with /* and ends with */.
Comments can also span multiple lines:
CSS Selectors
➢ CSS selectors allow you to select and manipulate HTML elements.
➢CSS selectors are used to "find" or select HTML elements based on their id, class and type.
➢The element Selector
➢The element selector selects elements based on the element name (Tag name).
p{
2
text-align: center; color:red;
}
The Universal Selector
Rather than selecting elements of a specific type, the universal selector quite simply matches the name of
any element type:
*{
color: #000000;
}
The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
An id should be unique within a page
id selector is used if you want to select a single, unique element, so the id selector is used if you want
to select a single, unique element.
Uses a hash character + id of the element.
Example:
#para1{
text-align: center; h1#black {
color: red; color: #000000;
}
Do NOT start an ID and Class name with a number!
The class Selector
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.
Selects elements with a specific class attribute.
Uses a period character, followed by the name of the class.
Example:
.para2
{ text-align: center;color: red;}
You can also specify that only specific HTML elements should be affected by a class.
p. para2
{ text-align: center; color: red;}
CSS Selector/Grouping Selectors
Grouping Selectors: If you have elements with the same style definitions, like this:
P{
h1 { h2 {
text-align: center; text-align: center; text-align: center;
color: red; color: red; color: red;
} } }
you can group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
h1,h2,p {
text-align: center;
color: red;
}
3
Styling HTML with CSS:
When a browser reads a style sheet, it will format the document according to the information in the style
sheet.
Styling can be added to HTML elements in 3 ways:
Inline - using a style attribute in HTML elements
Internal - using a <style> element in the HTML <head> section
External - using one or more external CSS files
Inline Styling (Inline CSS)
Inline styling is useful for applying a unique style to a single HTML element:
Inline styling uses the style attribute.
This inline styling changes the text color of a single heading:
Style sheet rules can be applied directly to any HTML element using style attribute of the tag.
This should be done when there is a need to change the style of a particular HTML element.
Rules define in line with the element overrides the rules define in an external CSS file as well
as the rules defined in <style> element.
Example:<h1 style="color:blue">This is a Blue Heading</h1>
Internal Styling
It is recommended to define a common style sheet in a separate file from the html file if the style sheet is
needed to use to various pages. An external style sheet is simply a text file containing a list of CSS
rules sets. The file is saved with a .css extension and saved to any directory that can be accessed by the
web pages using it. A cascading style sheet file will have extension as .css and it will be including in
HTML files using <link> tag. The link element can be used to specify that a web page should use an
external style sheet. The link element only requires a start tag <link> and is inserted in between the
<head>…</head> tags of our web page document. It can be used as many times as we like. The link
element employs three important attributes:
rel: the value of this attribute is always stylesheet
type: the value of this attribute is always text/css.
href: the value of this attribute will be changed according to .css file to be referring to. This value can be
any relative or absolute path.
➢ You can be applied in to many pages.
➢ You can change the look of an entire web site by changing one file.
➢ They are defined in an external CSS file
➢ They linked to in the <head> section of an HTML page.
4
<head>
<link rel="stylesheet" href="styles.css"> </head>
Example
Consider we define a style sheet file style.css which has following rules:
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}
Here we defined three CSS rules which will be applicable to three different classes defined for the HTML
tags. Now let's make use of the above external CSS file in our following HTML document:
<!DOCTYPE html>
<html><head>
<title>HTML External CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head><body>
<p class="red">This is red</p>
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. You
can specify your color values in various formats. Following table tells you all
possible formats:
Format Syntax Example
Hex Code #RRGGBB p{color:#FF000
Short Hex Code #RGB p{color:#6A7;}
RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%
RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,
keyword aqua, black, etc. p{color:teal;}
CSS Background
➢CSS background properties are used to define the background effects of an element.
➢CSS properties used for
background effects:
background-color:
#6495ed;
o Specifies the background color of an element.
With CSS, a color is most often specified by:
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a color name - like "red"
Example: <p style="background-color:yellow;">
This text has a yellow background color.</p>
background-image
-specifies an image to use as the background of an element.
-background-image:url("paper.gif");
Example: <table style="background-image:url(/images/ uoglogy.gif);" >
<tr><td>This table has background image set.</td></tr></table>
background-repeat- By default, the background-image property repeats an image
both horizontally and vertically.
Some images should be repeated only horizontally or vertically
repeat-x-Repeat The image Horizontally
repeat-y-Repeat the image vertically
no-repeat
Example: <table style="background-image:url(/images/uoglogo.gif);
background-repeat: repeat;">
<tr><td>This table has background image which repeats multiple times.
6
</td></tr></table>
CSS Text
➢Text Color-The color property is used to set the color of the text.
Example: <p style="color:red;">
This text will be written in red.</p>
Text Alignment-The text-align property is used to set the horizontal alignment of a
text.
Text can be center, left, right, or justify.
When text-align is set to "justify", each line is stretched so that every line has equal
width, and the left and right margins are straight (like in magazines and newspapers).
Set the text direction: Following is the example which demonstrates how to set the
direction of a text. Possible values are ltr or rtl. Example
<p style="direction:rtl;">
This text will be renedered from right to left </p>
Text Decoration-The text-decoration property is used to set or remove decorations
from text.
The text-decoration property is mostly used to remove underlines from links for
design purposes.
It takes values none, overline ,line-through, underline.
Text Transformation-The text-transform property is used to specify
➢ uppercase-To Change all texts to Uppercase.
➢ lowercase letters in a text p {text-indent: 50px;
➢ capitalize the first letter of each word. text-tramsform:capitalize}
Text Indentation: The text-indent property is used to specify the indentation of the
first line of a text
Set the space between characters: Following is the example which demonstrates
how to set the space between characters. Possible values are normal or a number
specifying space.
Example:
<p style="letter-spacing:5px;">
This text is having space between letters.</p>
7
Set the space between words: Following is the example which demonstrates how to
set the space between words. Possible values are normal or a number specifying
space. <p style="word-spacing:5px;"> </p>
Font Family:
The font-family property is used to change the face of a font.
The font family of a text is set with the font-family property.
The font-family property should hold several font names. If the browser does
not support the first font, it tries the next font.
Note: If the name of a font family is more than one word, it must be in quotation
marks, like: "Times New Roman".
More than one font family is specified in a comma-separated list.
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.