Cascading Style Sheet

CSS
Cascading Style Sheet

CSS
• CSS is used to define styles for your web pages,
including the design, layout and variations in display
for different devices and screen sizes.
• 3 ways of inserting a style sheet
– External CSS
– Internal CSS
– Inline CSS
Advantages
• CSS saves time - You can write CSS once and then
reuse same sheet in multiple HTML pages. You can
define a style for each HTML element and apply it to
as many Web pages as you want.
• Pages load faster - If you are using CSS, you do not
need to write HTML tag attributes every time. Just
write one CSS rule of a tag and apply it to all the
occurrences of that tag. So less code means faster
download times.
• Easy maintenance - To make a global change, simply
change the style, and all elements in all the web
pages will be updated automatically.
• Superior styles to HTML - CSS has a much wider
array of attributes than HTML, so you can give a far
better look to your HTML page in comparison to
HTML attributes.
• Multiple Device Compatibility - Style sheets allow
content to be optimized for more than one type of
device. By using the same HTML document, different
versions of a website can be presented for handheld
devices such as PDAs and cell phones or for printing.
• Global web standards - Now HTML attributes are
being deprecated and it is being recommended to
use CSS. So its a good idea to start using CSS in all the
HTML pages to make them compatible to future
browsers.
CSS Syntax
• CSS syntax has two main parts.
– Selector
– Declaration
• Selector defines entity to which CSS Style to be
applied, and declaration contains the CSS properties
as well as value of these properties.
Syntax Example
Selector p
{ {
Property 1 : value; color: red;
Property 2 : value; text-align: center;
} }
Inserting CSS
• A CSS style sheet can be linked to an HTML
document in a variety of ways.
• 3 ways of inserting a style sheet
– External CSS
– Internal CSS
– Inline CSS
External Style Sheet
• 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.
• <link rel="stylesheet" type="text/css"
href="mystyle.css">
• rel(Attribute in link) - Specifies the relationship
between the current document and the linked
document
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>
mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal Style Sheet
• 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.
Internal Style Sheet
<html> <body>
<head> <h1>This is a
<style type = "text/css" media = "all"> heading
</h1>
body { <p>This is a
background-color: linen; paragraph.
} </p>
h1 { </body>
color: maroon; </html>
margin-left: 40px;
}
</style>
</head>
Inline Style
• An inline style may <html>
be used to apply a <body>
unique style for a
<h1 style ="color:red;">
single element.
This is inline CSS
• To use inline styles,
add the style </h1>
attribute to the </body>
relevant element. </html>
CSS Selectors
• CSS selectors are used to "find" (or select) the
HTML elements required for style.
• Sample Selectors
– CSS element Selector
– CSS id Selector
– CSS class Selector
– CSS Universal Selector
CSS Element Selector
• The element selector selects HTML elements
based on the element name.
• Example
p{
text-align: center;
color: red;
}
Here, all <p> elements on the page will be
center-aligned, with a red text color.
CSS id Selector
• The id selector uses the id attribute of an HTML
element to select a specific element.
• The id of an element is unique within a page, so the id
selector is used to select one unique element!
• To select an element with a specific id, write a hash (#)
character, followed by the id of the element.
• Example
#para1{
text-align: center;
color: red;
}
CSS class Selector
• The class selector selects HTML elements with a
specific class attribute.
• 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="center"
will be red and center-aligned:
– p.center {
text-align: center;
color: red;
}
CSS Universal Selector
• The universal selector (*) selects all HTML
elements on the page.
• Example
– The CSS rule below will affect every HTML
element on the page:
*{
text-align: center;
color: blue;
}
Properties of CSS
• margin
• border
• Background
• padding
• Font
• Text
• Color
• link
• Table
background Property
• background-color: specifies the background color of
an element
• background-image: specifies an image to use as the
background of an element.
• background-position: used to specify the position of
the background image.
• background-attachment: specifies whether the
background image should scroll or be fixed
• background: sets all the background properties in
one declaration
border Property
• border-style: specifies what kind of border to display.
• border-width: specifies the width of the four borders.
• border-color : to set the color of the four borders.
• border: sets all the border properties in one
declaration
• p{
border-style: dotted;
border-left: 6px solid red;
border-color: green;
}
margin Property
• margin-bottom: sets the bottom margin of an
element
• margin-left: sets the left margin of an element
• margin-right: sets the right margin of an element
• margin-top: sets the top margin of an element
• margin : sets the margin properties in one
declaration
• Example
h1 {
margin: 0 0 50px 0;
}
padding Property
• CSS padding properties are used to generate
space around an element's content, inside of any
defined
• padding-bottom : Sets the bottom padding of an
element
• padding-left: Sets the left padding of an element
• padding-right: Sets the right padding of an
element
• padding-top : Sets the top padding of an element
borders.
text Property
• Text property is used to set text attributes.
• e.g. color, alignment, transformation,
indentation
• Example
p{
text-transform: uppercase;
text-indent: 50px;
}
Property Description
color Sets the color of text
text-align Specifies the horizontal alignment of text
Specifies the indentation of the first line in a
text-indent
Text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
Specifies how overflowed content that is not
text-overflow
displayed should be signaled to the user
vertical-align Sets the vertical alignment of an element
Specifies how white-space inside an element is
white-space
handled
Increases or decreases the space between
word-spacing
words in a text
font Property
• CSS font properties define the font family,
boldness, size, and the style of a text.
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text
Specifies whether or not a text should be
font-variant
displayed in a small-caps font
font-weight Specifies the weight of a font
link Property
• Links can be styled with any CSS property (e.g.
color, font-family, background, etc.).
• In addition, links can be styled differently
depending on what state they are in.
– a:link - a normal, unvisited link
– a:visited - a link the user has visited
– a:hover - a link when the user mouses over it
– a:active - a link the moment it is clicked
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
table Property
• The look of an HTML table can be greatly
improved with CSS.
Sets all the border properties in one
border
declaration
Specifies whether or not table borders should
border-collapse
be collapsed
Specifies the distance between the borders of
border-spacing
adjacent cells
caption-side Specifies the placement of a table caption
Specifies whether or not to display borders
empty-cells
and background on empty cells in a table
Hoverable Table
• Use the :hover selector on <tr> to highlight
table rows on mouse over
• Example
tr:hover
{
background-color: grey;
}
Striped Tables
• For striped tables, use the nth-child() selector
and add a background-color to all even (or
odd) table rows:
• Example
tr:nth-child(even)
{
background-color: blue;
}

Cascading Style Sheet

Uploaded by

Copyright:

Available Formats

Cascading Style Sheet

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

Cascading Style Sheet

Uploaded by

Copyright:

Available Formats

CSS

Cascading Style Sheet

You might also like