Cascading Style Sheet

CASCADING STYLE SHEET
1. INTRODUCTION TO CSS
 CSS stands for Cascading Style Sheets
 CSS is used to design HTML tags.
 CSS is a widely used language on the web.
 CSS describes how HTML elements are to be displayed on screen, paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files
 HTML, CSS and JavaScript are used for web designing. It helps the web designers to apply style on HTML
tags.
WHAT DOES CSS DO?
 You can add new looks to your old HTML documents.

 You can completely change the look of your website with only a few changes in
CSS code.
2. WHY USE CSS?
 Solves a big problem
 Before CSS, tags like font, color, background style, element alignments, border and size had to
be repeated on every web page. This was a very long process. For example: If you are
developing a large website where fonts and color information are added on every single page, it
will be become a long and expensive process. CSS was created to solve this problem. It was a
W3C recommendation.
 Saves a lot of time
 CSS style definitions are saved in external CSS files so it is possible to change the entire
website by changing just one file.
 Provide more attributes
 CSS provides more detailed attributes than plain HTML to define the look and feel of the
website.
3. CSS SELECTOR
 CSS selectors are the heart and soul of CSS.
 They define which HTML elements you are going to be manipulating with CSS
code.
 The selector name creates a direct relationship with the HTML tag you want to edit.
 If you wanted to change the way a paragraph tag behaved, the CSS code would look
like:
 p { PROPERTY: VALUE }
 The above example is a template that you can use whenever you are manipulating
the paragraph HTML element.
3.1 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.
 CSS Element Selector
 CSS Id Selector
 CSS Class Selector
 CSS Universal Selector
 CSS Group Selector
3.1.1CSS ELEMENT SELECTOR
 The element selector selects the HTML element by name.
<!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>Me too!</p>
<p>And me!</p>
</body> </html>
3.1.2.1 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.
<!DOCTYPE html>
<html> <head> <style>
#para1 {
text-align: center;
color: blue;
}
</style> </head> <body>
<p id="para1">Hello Javatpoint.com</p>
<p>This paragraph will not be affected.</p>
</body> </html>
3.1.3.2 CSS CLASS SELECTOR
 The class selector selects HTML elements with a specific class attribute. It is used with a period
character . (full stop symbol) followed by the class name.
<!DOCTYPE html>
.center {
text-align: center;
color: blue;
}
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body> </html>
3.1.3 CSS CLASS SELECTOR FOR SPECIFIC
ELEMENT
 If you want to specify that only one specific HTML element should be affected then you
should use the element name with class selector.
<!DOCTYPE html>
p.center {
text-align: center;
color: blue; }
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body> </html>
3.1.4 CSS UNIVERSAL SELECTOR
 The universal selector is used as a wildcard character. It selects all the elements on the pages.
<!DOCTYPE html>
* {
color: green;
font-size: 20px;
}
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p>And me!</p>
</body> </html>
3.1.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.
<!DOCTYPE html>
h1, h2, p {
text-align: center;
color: blue; }
<h1>Hello Javatpoint.com</h1>
<h2>Hello Javatpoint.com (In smaller font)</h2>
<p>This is a paragraph.</p>
</body> </html>
4. CSS RULE / SYNTAX
Selector Declaration Block
body {
font-family: Tahoma, Arial, sans-serif;
color: black;
background: white;
margin: 8px;
}
Value
Attribute Name
DIFFERENT STYLE OF CSS
 Internal Style Sheet (inside the <HEAD> tag)
 External Style Sheet
 Inline Style (inside an HTML element)

INTERNAL CSS
 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 CSS CODE
<html>
<head>
<style type="text/css">
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>Your page's content!</p>
</body>
</html>
Save: “Filename.html”
EXTERNAL CSS
 External CSS is a file that contains only CSS code and is saved with a ".css" file
extension.
 This CSS file is then referenced in your HTML using the <link> instead of <style>.
EXTERNAL CSS CODE
body{ background-color: gray;}

p { color: blue; }
h3{ color: white; }
Save: “test.css”
HTML CODE
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font. The background color of this page is gray because
we changed it with CSS! </p>
</body>
</html>
ADVANTAGES OF EXTERNAL CSS
 It keeps your website design and content separate.
 It's much easier to reuse your CSS code if you have it in a separate file. Instead of
typing the same CSS code on every web page you have, simply have many pages
refer to a single CSS file with the "link" tag.
 You can make drastic changes to your web pages with just a few changes in a single
CSS file.
INLINE CSS
 We can apply CSS in a single element by inline CSS technique.
 The inline CSS is also a method to insert style sheets in HTML document. This method mitigates
some advantages of style sheets so it is advised to use this method sparingly.
 If you want to use inline CSS, you should use the style attribute to the relevant tag.
<!DOCTYPE html>
<html> <body>
<h1 style="color:red;margin-left:40px;">Inline CSS is applied on
this heading.</h1>
<p>This paragraph is not affected.</p>
</body> </html>
DISADVANTAGES OF INLINE CSS
 You cannot use quotations within inline CSS. If you use quotations
the browser will interpret this as an end of your style value.
 These styles cannot be reused anywhere else.
 These styles are tough to be edited because they are not stored at a
single place.
 It is not possible to style pseudo-codes and pseudo-classes with
inline CSS.
 Inline CSS does not provide browser cache advantages.
CSS BACKGROUND
 CSS background properties are used to define the background effects of an element.
 CSS properties used for background effects:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
CSS BACKGROUND PROPERTIES
Property Description
background Sets all the background properties in one declaration
Sets whether a background image is fixed or scrolls with

background-attachment
the rest of the page
background-color Sets the background color of an element
background-image Sets the background image for an element
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated

EXAMPLES
 body {background-color:”red”;}
 body {background-image:url('paper.gif');}
 body
{
background-image:url('gradient2.png');
background-repeat:repeat-x; //Repeat, no-repeat, repeat-x and repeat-y
}
 body { background: white url('bbb.gif');
background-repeat: no-repeat;
background-attachment: fixed; }
 body {background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center; } //top, bottom, right and left
CSS TEXT
color Sets the color of text
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-decoration Specifies the decoration added to text
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
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
EXAMPLE
 body {color:blue;}
 h1 {text-align:center;} (right,left and justify)
 a {text-decoration:none;} (overline, line-through, underline and blink)
 p {text-transform:uppercase;} (lowercase and capitalize)
 p {text-indent:50px;}
CSS FONT
Font color Specifies the font color for text
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 displayed in a small-caps
font-variant
font
font-weight Specifies the weight of a font
EXAMPLE
 p{font-family:"Times New Roman", Times, serif;}
 p {font-style:normal;}(italic)
 p {font-size:14px;}
 h1 { color: red; }
 <p style="font-weight:bold;">This font is bold.</p>
 <p style="font-weight:bolder;">This font is bolder.</p>

Cascading Style Sheet

Uploaded by

Copyright:

Available Formats

You might also like

Cascading Style Sheet

Uploaded by

Document Information

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

CASCADING STYLE SHEET

 CSS is used to design HTML tags.

 CSS is a widely used language on the web.

 External stylesheets are stored in CSS files

 You can add new looks to your old HTML documents.

Selector Declaration Block

 Internal Style Sheet (inside the <HEAD> tag)

 External Style Sheet

 Inline Style (inside an HTML element)

 An internal style sheet may be used if one single HTML page

 The internal style is defined inside the <style> element, inside

body{ background-color: gray;}

<link rel="stylesheet" type="text/css" href="test.css" />

 It keeps your website design and content separate.

 CSS properties used for background effects:

background Sets all the background properties in one declaration

Sets whether a background image is fixed or scrolls with

background-color Sets the background color of an element

background-image Sets the background image for an element

background-position Sets the starting position of a background image

background-repeat Sets how a background image will be repeated

letter-spacing Increases or decreases the space between characters in a text

line-height Sets the line height

 h1 {text-align:center;} (right,left and justify)

 a {text-decoration:none;} (overline, line-through, underline and blink)

 p {text-transform:uppercase;} (lowercase and capitalize)

 p{font-family:"Times New Roman", Times, serif;}

You might also like