Scribd
Upload
4 views33 pages

CSS notes

Cascading Style Sheets (CSS) are text files that define how elements on a web page are displayed through property/value pairs, separating the structure of HTML from the visual presentation. CSS can be applied in three ways: external style sheets, embedded style sheets, and inline styles, each serving different purposes for styling web pages. CSS selectors allow targeting specific HTML elements based on their id, class, or type, and various properties are available for styling backgrounds, text, and fonts.

Uploaded by

sharanyavp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views33 pages

CSS notes

Cascading Style Sheets (CSS) are text files that define how elements on a web page are displayed through property/value pairs, separating the structure of HTML from the visual presentation. CSS can be applied in three ways: external style sheets, embedded style sheets, and inline styles, each serving different purposes for styling web pages. CSS selectors allow targeting specific HTML elements based on their id, class, or type, and various properties are available for styling backgrounds, text, and fonts.

Uploaded by

sharanyavp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

 Cascading style sheets (CSS) or simply “style sheets” are text files that contain one or more rules

es in the form of
property/value pairs for determining how elements in a web page should be displayed.
 They were developed with the aim to make the structure of the HTML web page ,and look and feel of the web page
and the elements present on the web page ,handled separately.
 The aim of developing CSS was to make HTML deal only with the structure of web pages and to make all style –
related aspects of web pages be handled in CSS.
 W3C has developed some specifications(or rules) for creating and using style sheets.these specifications are called
Cascading style sheets (CSS)specification.
Css syntax
Selector {property1:property-value; property2:property-value; property3:property-value;……….}
 Selector is the element that the rule defines ,
 property1, property2 and property3 are the properties(attributes)defined for that element ,and property1:property-
value; property2:property-value; property3:property-value; are values assigned to these properties.
 The portion of the syntax enclosed within the curly braces is termed as declaration.
Eg:
body{background-color:#f0f8ff;font-family:arial}
shorthand property is a CSS property ,which enables you to set two or more properties in one declaration
eg: body{background:#0000ff url(c:\Image.jpg) repeat-x}
working with styles
we can create style in three ways:
 External Style Sheets
 Embedded Style Sheets
 Inline Styles

External Style Sheets


 Define style sheet rules in a separate .css file and then include that file in your HTML document using HTML
<link> tag.
 External style sheets are used to apply uniform style to many web pages.
 You can link your web page to an external style sheet by setting href attribute of the <link> element to the name of
the style sheet.
Eg
Style.css
body{background-color:pink;font-family:Arial}
a:link{color:#808080}
a:visited{color:#ffff00}
a:hover{color:#00ff00}
a:active{color:#ff0000}

externalstylesheet.html
<html>
<head>
<title>External style Sheets</title>
<link rel="stylesheet" href="style.css" type=”text/css” >
</head>
<body>
<h1>External Style Sheet Example</h1>
<a href="page1.html" target="_blank">
<h2>Page 1</h2></a>
<a href="page2.html" target="_blank">
<h2>Page 2</h2></a>
</body>
</html>
Advantages of External CSS Style Sheets
 The same style sheet can be reused by all of the web pages in your site. This saves you
from including the stylistic markup in each individual document.
 You can change the appearance of several pages by altering just the style sheet rather
than each individual page.
 Because the source document does not contain the style rules, different style sheets can
be attached to the same document. So you can use the same XHTML document with one
style sheet when the viewer is on a desktop computer, another style sheet when the user
has a handheld device, another style sheet when the page is being printed, and another
style sheet when the page is being viewed on a TV, and so on. You reuse the same
document with different style sheets for different visitors’ needs.
 A style sheet can import and use styles from other style sheets, making for modular
development and good reuse.

Embedded style sheets/Internal Style Sheet


 Define style sheet rules in header section of the HTML document using <style> tag.
 These style sheets are useful when you want to apply similar style to all the elements present on a web page.
Eg
Embeddedstylesheets.html
<html>
<head>
<title>Embedded style Sheets</title>
<style type="text/css">
body{background-color:#f0f8ff;font-family:Arial}
a:link{color:#808080}
a:visited{color:#ffff00}
a:hover{color:#00ff00}
a:active{color:#ff0000}
</style>
</head>
<body>
<h1>Embedded Style Sheet Example</h1>
<a href=page1.html target="_blank">
<h2>Page 1</h2>
<a href=page2.html target="_blank">
<h2>Page 1</h2>
</body>
</html>
Inline Style Sheet
 Define style sheet rules directly along with the HTML elements using style attribute.
 These are useful when you want to define specific styles for individual elements present on a webpage.
Example:-
<html>
<head>
<title>inline style Sheets</title>
</head>
<body>
<table border="1">
<caption>student details</caption>
<tr>
<th style="background-color:cyan">name</th>
<th style="background-color:#800000">DOB</th>
<th style="background-color:#800000">Address</th>
</tr>
<tr>
<td style=background-color:pink;font-family:courier;padding:10px;border-style:solid;border-width:3px;border-
color:#000000;>anu</td>

<td style="background-color:#808800">22-01-2000</td>
<td style="background-color:#808800">flat no22,shipra
</tr>
<tr>
<td style=background-color:pink;font-family:courier;padding:10px;border-style:solid;border-width:3px;border-
color:#000000;>rinu</td>
<td style="background-color:#808800">26-11-2002</td>
<td style="background-color:#808800">flat no23,shipra
</tr>
</table>
</body>
</html>

CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML
elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
1) CSS Element Selector
The element selector selects the HTML element by name.
Eg
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is
chosen to select a single, unique element.It is written with the hash character (#), followed by the id of the element.
Eg
<html>
<head>
<title>Embedded style Sheets</title>
<style type="text/css">
#para1 {text-align:center;color:blue;}
</style>
</head>
<body>
<p id="para1">Hello world!
<p>this paragraph is not affected by the style
</body>
</html>

3) CSS Class Selector


 The class selector is used to specify a style for a group of elements.
 This allows you to set a particular style for any HTML elements with the same class.
 The class selector uses the HTML class attribute ,and is defined with a period character “.” Followed by the class
name.
<style>
.class name {class definition}
</style>
Eg
<html>
<head>
<title>Embedded style Sheets</title>
<style type="text/css">
.para1 {text-align:center;color:blue;}
.para2 {text-align:left;color:violet;}
</style>
</head>
<body>
<h1 class="para1">Hello world!</h1>
<p class="para2">this paragraph is left aligned
</body>
</html>

Element specific style class-


If you want to specify that only one specific HTML element should be affected then you should use the element name with class
selector.starts with element name followed by a dot operator,followed by the class name.
<style>
element name.class name{class definition}
</style>
Eg:
<html>
<head>
<title>inline style Sheets</title>
<style>
body {background-color:lightgray}
th.color{background-color:#787878;color:#ffffff;}
.change{background-color:#f0f0f0}
</style>
</head>
<body>
<table border="1">
<caption>Student details</caption>
<tr>
<th class="color">Name</th>
<th class="color">DOB</th>
<th class="color">Address</th>
</tr>
<tr>
<td class="change">Anu</td>
<td class="change">22-01-2000</td>
<td class="change">flat no22,UP
</tr>
<tr>
<td class="change">Rinu</td>
<td class="change">26-11-2002</td>
<td class="change">flat no23,UP
</tr>
</table>
</body>
</html>

4) CSS Universal Selector


The universal selector is used as a wildcard character. It selects all the elements on the pages. The universal selector may be omitted if
other conditions exist on the target element.
<!DOCTYPE html>
<html>
<head>
<style>
{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

5) CSS Group Selector


The grouping selector is used to select all the elements with the same style definitions.
Grouping selector is used to minimize the code. Commas are used to separate each selector in grouping.
Eg:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
<h2>Hello Javatpoint.com (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>
CSS Comments
 Comments are used to explain your code and may help you when you edit the source code.
 Comments are ignored by the browsers.
 Begins with “/*” and ends with “*/”
 Eg: /*this is a comment*/
P {text-align:center;
/*this is another comment*/
Color:black;font-famiy:arial;}

Styling background
CSS backround properties are used to define the background effects of an element.
Property Background
Background  Is a shorthand property for background-
color,background-image,background-
repeat,background-attachment and background –
position.
 It sets all these background properties in one
declaration.
background-attachment  Specifies whether a background image is fixed or
scrolls when the user scrolls through the rest of the
page
background-color  Specifies the background color of an element
background-image  Specifies the background image of an element.
background –position.  Specifies the initial position of a background
image.(top left/center/right,center left/center/right,
bottom left/center/right,x% y%,x position
yposition)
background-repeat  Specifies how a background image is
repeated(repeat-x,repeat–y,no-repeat)
Eg:
<html>
<head>
<title>Embedded style Sheets</title>
<style type="text/css">
body{background-color:00ffbb;background-image:url('flower.jpg');
background-repeat:no-repeat;background-position:right top;
background-attachment:fixed;}
p{color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>Hello world!</h1>
sets a background color
<p>sets a font color
<br>
<br>
</body>
</html>

Styling Text
The following are the css text properties used for styling the text:
Property Description
Color Sets the colour of the text.
With css,a colour is most often specified by:
 a HEX value-like “#ff00000”
 an RGB value-like “rgb(255,0,0)”
 a colour name-like “red”
Direction Specifies the text direction/writing direction
Letter-spacing Increases or decreases the space between characters in a
text.
Line-height Sets the line height
Text-align  Specifies the horizontal alignment of text.
 Text can be left/right/center/justified
Text-decoration  Specifies the decoration added to text.
 This is mosly used to remove underlines from links
for design purposes.
 It can also used to decorate text.{text-
decoration:overline/linethrough/underline/blink;}

Text-indent Specifies the indentation of the first line in a text- block


Text-shadow Specifies the shadow effect added to text.
Text-transform  Controls the capitalization of text.
 It can be used to turn everything into
uppercase,lowercase or capitalize the first letter of
each word.
Vertical-align Sets the vertical alignment of an element
White-space Specifies how white-space inside an element is handled.
Word-spacing Increases or decreases the space between words in a text.

<html>
<head>
<title>styling font</title>
<style type="text/css">
body{color:green;}
h1{color:red;text-align:center;}
p.col{color:rgb(0,0,255);text-indent:50px;}
p.date{text-align:right}
p.upper{text-transform:uppercase;}
a{text-decoration:none;}
h2{text-decoration:overline;}
h3{text-decoration:line-through;}
h4{text-decoration:underline;}
</style>
</head>
<body>
<p class="date">30 Aug 2018</P>
<h1>Hello world!</h1>
<p class="col">this is an ordinary paragraph
<p>link to:<a href="http://www.google.com">google</a></p>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<p class="upper">this text is in uppercase</p>
</body>
</html>
Styling font
Css font properties define the font family,boldness,size and the style of a text.
Property Description
Font Sets all the font properties in one declaration
Font-family Specifies the font family for the text
Font size Specifies the font size of text
Font-style Specifies the font style for text
Font-variant Specifies whether or not a text should be displayed in a
small-caps font.
Font-weight Specifies the weight of a font
Font family
In CSS, there are two types of font family names:
generic family - a group of font families with a similar look (like "Serif" or"Monospace")
font family - a specific font family (like "Times New Roman" or "Arial")
Generic Family Font family Description
Serif Times New Roman Serif fonts have small lines at the
ends on some characters
Georgia
Sans-serif Arial "Sans" means without - these fonts
do not have the lines at the ends of
Verdana characters
Monospace Courier New Lucida All monospace characters have the
same width
Console

 The font family of a text is set with the font-family property.


 The font-family property should hold several font names as a "fallback" system. If the browser does not
support the first font, it tries the next font, and so on.
 Start with the font you want, and end with a generic family, to let the browser pick a similar font in the
generic family, if no other fonts are available.
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:
p{
font-family: "Times New Roman", Times, serif;
}
Eg
<html>
<head>
<title>styling font</title>
<style type="text/css">
p.serif{font-family:"times new roman",times,serif;}
p.sansserif{font-family:arial,helvetica,sans-serif;}
</style>
</head>
<body>
<h1>css font-family</h1>
<p class="serif">this is a paragraph,shown in the times new roman font</p>
<p class="sansserif">this is a paragraph,shown in the arial font</p>
</body>
</html>
Font style
The font-style property is mostly used to specify italic text.
This property has three values:
 normal - The text is shown normally
 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
<html>
<head>
<title>styling font</title>
<style type="text/css">
p.normal{font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>
<body>
<h1>css font-family</h1>
<p class="normal">this is a paragraph,normal</p>
<p class="italic">this is a paragraph,italic</p>
<p class="oblique">this is a paragraph,oblique</p>
</body>
</html>
Font size
 The font-size property sets the size of the text.
 Being able to manage the text size is important in web design. However, you should not use font size
adjustments to make paragraphs look like headings, or headings look like paragraphs.
 Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
 Sets the text to a specified size
 Does not allow a user to change the text size in all browsers (bad for accessibility
reasons)
 Absolute size is useful when the physical size of the output is known
Relative size:
 Sets the size relative to surrounding elements
 Allows a user to change the text size in browsers
Note: If you do not specify a font size, the default size for normal text, like paragraphs,
is 16px (16px=1em).

Set Font Size With Pixels


Setting the text size with pixels gives you full control over the text size:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p{
font-size: 14px;
}

Set Font Size With Em


 To allow users to resize the text (in the browser menu), many developers use em instead of pixels.
 The em size unit is recommended by the W3C.
 1em is equal to the current font size. The default text size in browsers is 16px. So, the
 default size of 1em is 16px.
 The size can be calculated from pixels to em using this formula: pixels/16=em
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p{
font-size: 0.875em; /* 14px/16=0.875em */
}

Styling Lists
The CSS list properties allow you to:
 Set different list item markers for ordered lists
 Set different list item markers for unordered lists
 Set an image as the list item marker
 Add background colors to lists and list items
In HTML, there are two main 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

Different List Item Markers


The list-style-type property allows you to control the shape or style of bullet point (also known as a marker) in the
case of unordered lists and the style of numbering characters in ordered lists.
The list-style-type property specifies the type of list item marker.
Value Description Example

decimal Number 1,2,3,4,5

decimal-leading-zero 0 before the number 01, 02, 03, 04, 05

lower-alpha Lowercase alphanumeric characters a, b, c, d, e

upper-alpha Uppercase alphanumeric characters A, B, C, D, E

lower-roman Lowercase Roman numerals i, ii, iii, iv, v

upper-roman Uppercase Roman numerals I, II, III, IV, V

lower-greek The marker is lower-greek alpha, beta, gamma

lower-latin The marker is lower-latin a, b, c, d, e

upper-latin The marker is upper-latin A, B, C, D, E

<html>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
<body>
<ul class=”a”>
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ul class=“b”>
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol class=“c”>
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<ol style=“d”>
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
Eg 2
<html>
<head>
</head>

<body>
<ul style = "list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style = "list-style-type:decimal;">


<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<ol style = "list-style-type:lower-alpha;">


<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<ol style = "list-style-type:lower-roman;">


<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
It will produce the following result −
o Maths
o Social Science
o Physics
 Maths
 Social Science
 Physics
1. Maths
2. Social Science
3. Physics
a. Maths
b. Social Science
c. Physics
i. Maths
ii. Social Science
iii. Physics
An Image as The List Item Marker
The list-style-image allows you to specify an image so that you can use your own bullet style. The syntax is similar to
the background-image property with the letters url starting the value of the property followed by the URL in brackets.
If it does not find the given image then default bullets are used.
ul {
list-style-image: url('flower.jpg');
}
Eg
<html>
<head>
</head>

<body>
<ul>
<li style = "list-style-image: url(/https/www.scribd.com/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol>
<li style = "list-style-image: url(/https/www.scribd.com/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>

Position The List Item Markers


The list-style-position property specifies the position of the list-item markers (bullet points).
"list-style-position: outside;" means that the bullet points will be outside the list item. The start of each line of a list
item will be aligned vertically. This is default:
 Coffee - A brewed drink prepared from roasted coffee beans...
 Tea
 Coca-cola
"list-style-position: inside;" means that the bullet points will be inside the list item. As it is part of the list item, it will
be part of the text and push the text at the start:
 Coffee - A brewed drink prepared from roasted coffee beans...
 Tea
 Coca-cola
Eg
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}

ul.b {
list-style-position: inside;
}
</style>
</head>
<body>

<h1>The list-style-position Property</h1>

<h2>list-style-position: outside (default):</h2>


<ul class="a">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea
plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the
Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two
of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>

<h2>list-style-position: inside:</h2>
<ul class="b">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea
plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the
Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two
of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>

</body>
</html>
Css tables
Table Borders
 To specify table borders in CSS, use the border property.
 The example below specifies a black border for <table>, <th>, and <td> elements:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<h2>Add a border to a table:</h2>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>

</body>
</html>
Notice that the table in the example above has double borders. This is because both the table and the <th> and <td>
elements have separate borders.

Collapse Table Borders


The border-collapse property sets whether the table borders should be collapsed into a
single border:
Firstnam Lastnam
e e
Peter Griffin
Lois Griffin

<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}

table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>

<h2>Let the borders collapse:</h2>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
If you only want a border around the table, only specify the border property for <table>:
table {
border: 1px solid black;
}

Table Width and Height


 Width and height of a table are defined by the width and height properties.
 The example below sets the width of the table to 100%, and the height of the <th> elements to 50px:

Eg:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}

table {
border-collapse: collapse;
width: 100%;
}

th {
height: 50px;
}
</style>
</head>
<body>

<h2>The width and height Properties</h2>


<p>Set the width of the table, and the height of the table header row:</p>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>

</body>
</html>

Horizontal Alignment
 The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.
 By default, the content of <th> elements are center-aligned and the content of <td>
elements are left-aligned.
Eg:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}

table {
border-collapse: collapse;
width: 100%;
}
th {
text-align: left;
}
</style>
</head>
<body>

<h2>The text-align Property</h2>


<p>This property sets the horizontal alignment (like left, right, or center) of the content in th or td:</p>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

Vertical Alignment
 The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or
<td>.
 By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).
Eg
<style>
table, td, th {
border: 1px solid black;
}

table {
border-collapse: collapse;
width: 100%;
}

td {
height: 50px;
vertical-align: bottom;
}
</style>

Table Padding
To control the space between the border and the content in a table, use the padding
property on <td> and <th> elements:
<style>
table, td, th {
border: 1px solid #ddd;
text-align: left;
}

table {
border-collapse: collapse;
width: 100%;
}

th, td {
padding: 15px;
}
</style>

Table Color
The example below specifies the background color and text color of <th> elements:
th {
background-color: #4CAF50;
color: white;
}

Horizontal Dividers
First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150

Add the border-bottom property to <th> and <td> for horizontal dividers:
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
</style>

Hoverable Table
Use the :hover selector on <tr> to highlight table rows on mouse over:
<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}

tr:hover {background-color:#f5f5f5;}
</style>

Striped Tables
First Name Last Name Savings
Peter Griffin $100

Lois Griffin $150

Joe Swanson $300


For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows
<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
text-align: left;
padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}


</style>

CSS Floating
 With CSS float,an element can be pushed to the left or right, allowing other elements to wrap around it.
 Float is very often used for images ,but it is also useful when working with layouts.
Css float properties and possible value
Property Description Values
Clear Specifies which sides of an element where other floating Left,right,both,none,inherit
elements are not allowed.
Float Specifies whether or not a box should float Left,right,none,inherit

 Elements are floated horizontally, this means that an element can only be floated left or right..
 The element after floating element will flow around it.
 The element before floating element will not be affected.
Eg:-
Img
{
float:left;
}

Floating elements next to each other


If you place several floating elements each other,they will float next to each other if there is room.
.thumb
{
Float:left;
Width:110px;
Height:90px;
Margin:5px;
}

Turning off float-using clear


.text_line
{
clear:both;
margin-bottom:2px;

CSS Image Gallery


CSS can be used to create an image gallery. Image Gallery is used to store and display collection of pictures<img> tag is
used to insert images in HTML documents.

<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
<a target="_blank" href="fjords.jpg">
<img src="5terre.jpg" alt="Cinque Terre" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="forest.jpg">
<img src="forest.jpg" alt="Forest" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="lights.jpg">
<img src="lights.jpg" alt="Northern Lights" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="mountains.jpg">
<img src="mountains.jpg" alt="Mountains" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div></body>
</html>

CSS Opacity / Transparency


the opacity property specifies the opacity/transparency of an element.

Transparent Image
The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:

img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>
<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
</body>
</html>

Transparent Hover Effect


The opacity property is often used together with the :hover selector to change the opacity on mouse-over:
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
eg
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">
</body>
</html>

Transparent Box
When using the opacity property to add transparency to the background of an element, all of its child elements
inherit the same transparency. This can make the text inside a fully transparent element hard to read:

div {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}
eg
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #4CAF50;
padding: 10px;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>When using the opacity property to add transparency to the background of an element, all of its child elements become
transparent as well. This can make the text inside a fully transparent element hard to read:</p>
<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>

</body>
</html>

Transparency using RGBA


If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The
following example sets the opacity for the background color and not the text:

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0
(fully transparent) and 1.0 (fully opaque).
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}
eg
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(76, 175, 80);
padding: 10px;
}

div.first {
background: rgba(76, 175, 80, 0.1);
}

div.second {
background: rgba(76, 175, 80, 0.3);
}

div.third {
background: rgba(76, 175, 80, 0.6);
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>With opacity:</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>
<p>With RGBA color values:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>
<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>
</body>
</html>

Text in Transparent Box

<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}

div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
CSS Navigation Bar
Navigation Bars
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking navigation bars.
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

Output
 Home
 News
 Contact
 About
Vertical Navigation Bar
To build a vertical navigation bar, you can style the <a> elements inside the list, in addition to the code above:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>
 display: block; - Displaying the links as block elements makes the whole link area clickable (not just the
text), and it allows us to specify the width (and padding, margin, height, etc. if you want)
 width: 60px; - Block elements take up the full width available by default. We want to specify a 60 pixels
width
You can also set the width of <ul>, and remove the width of <a>, as they will take up the full width available when
displayed as block elements.

Horizontal Navigation Bar


There are two ways to create a horizontal navigation bar. Using inline or floating list items.
Inline List Items
One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to the "standard"
code above:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

li {
display: inline;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

display: inline; - By default, <li> elements are block elements. Here, we remove the line breaks before and after
each list item, to display them on one line

Floating List Items


Another way of creating a horizontal navigation bar is to float the <li> elements, and specify a layout for the
navigation links
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: left;
}

li a {
display: block;
padding: 8px;
background-color: #dddddd;
}
</style>
 float: left; - use float to get block elements to slide next to each other
 display: block; - Displaying the links as block elements makes the whole link area clickable (not just the
text), and it allows us to specify padding (and height, width, margins, etc. if you want)
 padding: 8px; - Since block elements take up the full width available, they cannot float next to each other.
Therefore, specify some padding to make them look good
 background-color: #dddddd; - Add a gray background-color to each a element
Tip: Add the background-color to <ul> instead of each <a> element if you want a full-width background color:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dddddd;
}

You might also like