basics of css

An
Introduction
to CSS
(Cascading
stylesheet)
Priya Goyal

CSS stands for Cascading Style Sheet.
Typical CSS file is a text file with an
extention.css and contains a series of
commands or rules. These rules tell the HTML how
to display.
*To create a style sheet, create a file using Notepad or Text Editor and
save it as a .css document and start writing the CSS code.

CSS Benefits
• Separates structure from presentation
• Provides advanced control of presentation
• Easy maintenance of multiple pages
• Faster page loading
• Better accessibility for disabled users
• Easy to learn

“HTML without CSS is like a piece of candy without a
pretty wrapper.”
Without CSS, HTML elements typically flow from top to
bottom of the page and position themselves to the left
by default.
With CSS help, we can create containers or DIVs to better
organize content and make a Web page visually
appealing.

Attaching a Style Sheet
Attach a style sheet to a page by adding the code to the <head> section of the HTML page.
There are 3 ways to attach CSS to a page:
1. External Style Sheet: Best used to control styling on multiple pages.
<link rel="stylesheet" type="text/css" href="css/styles.css" />
.css file
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
2. Internal Style Sheet: Best used to control styling on one page.
<style type=“text/css”>
h1 {color: red)
</style>
3. Inline Style Sheet*: CSS is not attached in the <header> but is used directly within HTML
tags.
<p style=“color: red”>Some Text</p>

CSS Rule Structure
A CSS RULE is made up of a selector
and a declaration. A declaration consists
of property and value.
selector {property: value;}
declaration
body { property: value; }
h1 { property: value; }
em { property: value; }
p { property: value; }

Universal Selector
The universal selector is an asterisk.
matches all element types in the document.
*{ }
The Type Selector
the same rules to several elements.
h1, h2, h3 {}
The Class Selector
< p class=”student” >…… < /p >
<div class=“student”>…….</div>
‘ . ‘ is used to denote a class
We can use a class selector in one of two ways here.
1)One way is to directly assign the class name ‘student’. By using this, same rules will be
applied to all elements whose class name is ‘student’.
.student {
}

2)We can apply the attributes to specific elements.
p.student {
text-align: center;
color: red;
}
The ID Selector
The id selector works just like a class selector, but works on the value of id attributes
#para1 {
text-align: center;
color: red;
}

The Border Properties
There are three properties of a border you can change:
border - color border - style border - width
The border - color Property
p {border-color:#ff0000;}
It may be
border - bottom - color
border - right - color
border - top - color
border - left – color
The border - width Property
p {border-width:4px;}
The value of the border - width property
cannot be given as a percentage.. It may be
thin
medium
Thick
Can also give
border - bottom - width
border - right - width
border - top - width
border - left - width

The border - style Property
p {border-style : solid;}
border - bottom - style
border - right - style
border - top - style
border - left - style

The padding Property
The padding property allows you to specify how much space should appear between
the content of an element and its border:
td {padding:5px;}
padding - bottom
padding - top
padding - left
padding - right

Background Color
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"
body {
background-color: #b0c4de;
}
Background Image
body {
background-image: url("paper.gif");
}

Background-repeat-
sets the background image position
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Two background images
body {
background-image: url("img_tree.gif"), url("img_flwr.gif");
background-color: #cccccc;
}

Background Position
background-position: left top|left center|left bottom|right top|right center|right
bottom|center top|center center|center bottom|x% y% (The right bottom corner is
100% 100%)|xpos ypos(0px 0px)|Initial|inherit;
Body{
Background-position : left top;
}
If you only specify one keyword, the other value will be "center“.

Background Attachment
background-attachment: scroll|fixed|local|initial|inherit;

TEXT FORMATTING
Text Color
The color property is used to set the color of the text. With CSS, a color is most often
specified by:
color: color|initial|inherit;
body {
color: blue;
}
h1 {
color: #00ff00;
}
Value Description
color Specifies the text color.
initial Sets this property to its default
value.
inherit Inherits this property from its
parent element.

Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text-align:center|right|left|justify
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}

Vertical-align Property
vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-
bottom|initial|inherit;
baseline Align the baseline of the element with the baseline of the parent element. This is default
length Raises or lower an element by the specified length. Negative values are allowed
% Raises or lower an element in a percent of the "line-height" property. Negative values are allowed
sub Aligns the element as if it was subscript
super Aligns the element as if it was superscript
top The top of the element is aligned with the top of the tallest element on the line
text-top The top of the element is aligned with the top of the parent element's font
middle The element is placed in the middle of the parent element
bottom The bottom of the element is aligned with the lowest element on the line
text-bottom The bottom of the element is aligned with the bottom of the parent element's font
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
img {
vertical-align: text-top;
}

Text Decoration
The text-decoration property is used to set or remove decorations from text.
Text-decoration:none|overline|underline|line-through;
a {
text-decoration: none;
}
h1 {
text-decoration: overline;
}

Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a
text.
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
p.class1 {
text-transform: uppercase;
}
h1{
text-transform:lowercase;
}

Text Indentation
The text-indent property is used to specify the indentation of the first line of a text.
text-indent: length|initial|inherit;
p {
text-indent: 50px;
}
It may be both in percentage or in pixels
length Defines a fixed indentation in px, pt, cm, em, etc. Default
value is 0
% Defines the indentation in % of the width of the parent
element

word-spacing Property
word-spacing: normal|length|initial|inherit;
p {
word-spacing: 30px;
}
Value Description
normal Defines normal space between words . This is default
length Defines an extra space between words in px, pt, cm, em, etc.
Negative values are allowed

letter-spacing Property
letter-spacing: normal|length|initial|inherit;
h1 {
letter-spacing: 2px;
}
h2 {
letter-spacing: -3px;
}
Value Description
normal No extra space between characters. This is default
length Defines an extra space between characters (negative values are
allowed)

Direction Property
direction: ltr|rtl|initial|inherit ;
div {
direction: rtl;
}
Value Description
ltr The writing direction is left-to-right.
This is default
rtl The writing direction is right-to-left
initial Sets this property to its default
value.
inherit Inherits this property from its
parent element.

Text-shadow Property
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
h1 {
text-shadow: 2px 2px #ff0000;
}
h-shadow Required. The position of the horizontal shadow. Negative values are
allowed
v-shadow Required. The position of the vertical shadow. Negative values are
allowed
blur-radius Optional. The blur radius. Default value is 0
color Optional. The color of the shadow.
none Default value. No shadow

Unicode-bidi Property
unicode-bidi: normal|embed|bidi-override|intitial|inherit;
div {
direction: rtl;
unicode-bidi: bidi-override;
}
Value Description
normal Does not use an additional level of embedding. This is default
embed Creates an additional level of embedding
bidi-override Creates an additional level of embedding. Reordering depends
on the direction property

White-space Property
white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;
p {
white-space: nowrap;
}
Value Description
normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is
default
Nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The
text continues on the same line until a <br> tag is encountered
Pre Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in
HTML
pre-line Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line
breaks
pre-wrap Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks

CSS Font
"Sans" means without
font: font-style font-variant font-weight font-size/line-height font-
family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
p.ex1 {
font: 15px arial, sans-serif;
}

font-style: normal|italic|oblique|initial|inherit;
Font-style
p.oblique {
font-style: italic
}
Font-variant
font-variant: normal|small-caps|initial|inherit;
p.small {
font-variant: small-caps;
} I/P-FONT-VARIANT: SMALL-CAPS;
O/P-MY NAME IS HEGE REFSNES.

font-weight
font-weight: normal|bold|bolder|lighter|number|initial|inherit;
p.normal {
font-weight: normal;
}
font-size
font-size:medium|xx-small|x-small|small|large|x-large|xx
large|smaller|larger|length|initial|inherit;
h1 {
font-size: 250%;
}
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
Note-Smaller-Sets the font-size to a smaller size than the parent element
%-Sets the font-size to a percent of the parent element's font size

font-family
font-family: font|initial|inherit;
p {
font-family: Times New Roman;
}

Styling Links
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user’s mouse over it
a:active - a link the moment it is clicked
/* unvisited link */
a:link {
color: #FF0000;
text-decoration: none;
}
/* visited link */
a:visited {
color: #00FF00;
text-decoration: underline;
}
/* mouse over link */
a:hover {
color: #FF00FF;
background-color: #FF704D;
}
/* selected link */
a:active {
color: #0000FF;
}
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover

List
In HTML, there are two types of lists:
unordered lists (<ul>) - the list items are marked with bullets
ordered lists (<ol>) - the list items are marked with numbers or letters
list-style: list-style-type list-style-position list-style-image|initial|inherit;
list-style-type: disc|circle|decimal|decimal-leading-zero|lower-alpha|lower-latin|
lower-roman|none|square|upper-alpha;
list-style-position: inside|outside|initial|inherit;
list-style-image: none|url|initial|inherit;
ul {
list-style-image: url('sqpurple.gif');
}

Table
Table Borders
table, th, td {
border: 1px solid black;
}
Collapse border
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
Table Width and Height
table {
width: 100%;
}
th {
height: 50px;
}
Horizontal Text Alignment
th {
text-align: left;
}
Vertical Text Alignment
td {
height: 50px;
vertical-align: bottom;
}
Table Padding
td {
padding: 15px;
}
Table Color
th {
background-color: green;
color: white;
}

div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
CSS Box Model

Padding
padding: 25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px
padding: 25px 50px 75px;
top padding is 25px
right and left paddings are 50px
bottom padding is 75px
padding: 25px 50px;
top and bottom paddings are 25px
right and left paddings are 50px
padding: 25px;
all four paddings are 25px
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
Length may be in percentage, pixels, pt, em.

Margin
The margin property can have from one to four values. (same as padding).
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
Float and Clear
Clear
used to control the behavior of
floating elements
Clear property specifies on which
sides of an element floating
elements are not allowed to float.
div {
clear: left;
}
Float
used to wrap text around images.
img {
float: right;
margin: 0 0 10px 10px;
}

p {
max-height: 10px;
background-color: yellow;
}
p {
min-height: 2px;
background-color: yellow;
}
Max height of p must be <=10;
Min height of p must be >=2;
CSS Dimension

Display and Visibility
Hiding an Element - display:none or visibility:hidden
h1.hidden {
visibility: hidden;
}
h1.hidden {
display: none;
}
Visibility : hidden hides an element, but it will still take up the same space as
before. The element will be hidden, but still affect the layout.
Display : none hides an element, and it will not take up any space. The element
will be hidden, and the page will be displayed as if the element is not there.

Block and Inline Elements
Examples of block elements (has a line break before and after it):
<h1>
<p>
<li>
<div>
Examples of inline elements (does not force line breaks):
<span>
<a>
Changing How an Element is Displayed
li {
display: inline;
}
span {
display: block;
}

Positioning
Static Positioning
(by default)
Fixed Positioning
will not move even if the window is scrolled
Relative Positioning
• positioned relative to its normal position
• Relatively positioned elements are often used as container blocks for absolutely
positioned elements. (do not overlap)
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
position: fixed;
position: relative;

Absolute Positioning
• positioned relative to the first parent element that has a position other
than static. If no such element is found, the containing block is <html>
• Absolutely positioned elements can overlap other elements.
h2 {
position: absolute;
left: 100px;
top: 150px;
}
Overlapping Elements
The z-index property specifies the stack order of an element (which element
should be placed in front of, or behind, the others).
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}

Outline
Property Description Values
outline Sets all the outline properties in one declaration outline-color
outline-style
outline-width
inherit
outline-color Sets the color of an outline color_name
hex_number
rgb_number
invert
inherit
outline-style Sets the style of an outline none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width Sets the width of an outline thin
medium
thick
length
inherit

References
1. http://www.w3schools.com/css/

basics of css

More Related Content

What's hot

Similar to basics of css

Recently uploaded

basics of css