Cascading style sheet

 Markup language refers to a text-encoding
system consisting of a set of symbols inserted in
a text document to control its structure,
formatting, or the relationship between its parts.
Markup is often used to control the display of the
document or to enrich its content to facilitating
automated processing.

What is CSS
 CSS stands for Cascading Style Sheets. It is a style
sheet language which is used to describe the look and
formatting of a document written in markup language. It
provides an additional feature to HTML. It is generally
used with HTML to change the style of web pages and
user interfaces.

Why use CSS
three major benefits of CSS:
1. Solves a big problem
Before CSS, tags like font, colour, 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 colour information are added on every
single page, it will be become a long and expensive process. CSS was
created to solve this problem.
2) 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.
3) Provide more attributes
CSS provides more detailed attributes than plain HTML to define the look
and feel of the website.

1. 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.
2. 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.
3. Easy maintenance − To make a global change, simply change the style,
and all elements in all the web pages will be updated automatically.
4. 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.
5. 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.
6. 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
A CSS rule consists of a selector and a declaration
block.
•The selector points to the HTML element you want to
style.
•The declaration block contains one or more declarations
separated by semicolons.
•Each declaration includes a CSS property name and a
value, separated by a colon.
•Multiple CSS declarations are separated with
semicolons, and declaration blocks are surrounded by
curly braces.

all <p> elements will be center-aligned, with a red text color:
p {
color: red;
text-align: center;
}
•p is a selector in CSS (it points to the HTML element you want to
style: <p>).
•color is a property, and red is the property value
•text-align is a property, and center is the property value

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

CSS Element Selector
 The element selector selects HTML elements
based on the element name. Here, all <p>
elements on the page will be center-aligned, with
a red text color:
p {
text-align: center;
color: red;
}

The 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.
 The CSS rule below will be applied to the HTML
element with id="para1":
#para1 {
text-align: center;
color: red;
}

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

The 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.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be
affected</h1>
<p class="center">This paragraph will be red and
center-aligned.</p>
</body>
</html>

The CSS Universal Selector
 The universal selector (*) selects all HTML elements
on the page.
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected
by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

The CSS Grouping Selector
 The grouping selector selects all the HTML elements
with the same style definitions.
 Look at the following CSS code (the h1, h2, and p
elements have the same style definitions):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
h1, h2, p {
text-align: center;
color: red;
}
•It will be better to group the selectors, to minimize
the code.
•To group selectors, separate each selector with a
comma.

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

All CSS Simple Selectors
Selector Example Example description
#id #firstname Selects the element with id="firstname"
.class .intro Selects all elements with class="intro"
element.cla
ss
p.intro Selects only <p> elements with
class="intro"
* * Selects all elements
element p Selects all <p> elements
element,ele
ment,..
div, p Selects all <div> elements and all <p>
elements

Types of CSS
 Internal, External and Inline CSS Styles
 Internal CSS styles done this way are loaded each time an entire
website is refreshed, which may increase loading time. Additionally, you
won’t be able to use the same CSS style on multiple pages as it’s
contained within a single page. However, this also comes with benefits.
Having everything on one page makes it easier to share the template for
a preview.
 The External method might be the most convenient one.
Everything is done externally on a .css file. This means you can
do all the styling on a separate file and apply the CSS to any
page you want. The External style might also improve loading
times.
 the Inline style of CSS. Inline works with specific elements that
have the <style> tag. Each component has to be stylized, so it
might not be the best or fastest way to handle CSS. But it can
come in handy. For example, if you want to change a single
element, quickly preview changes, or maybe you don’t have
access to the CSS files.

Inline CSS
 An inline CSS is used to apply a unique style to a
single HTML element.
 An inline CSS uses the style attribute of an HTML
element.
 The following example sets the text color of
the <h1> element to blue, and the text color of
the <p> element to red:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

Internal CSS
 An internal CSS is used to define a style for a single HTML page.
 An internal CSS is defined in the <head> section of an HTML page, within
a <style> element.
 The following example sets the text color of ALL the <h1> elements (on that
page) to blue, and the text color of ALL the <p> elements to red. In addition,
the page will be displayed with a "powderblue" background color:
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>

External CSS
 An external style sheet is used to define the style for many HTML
pages.
 To use an external style sheet, add a link to it in
the <head> section of each HTML page:
<head>
<link rel="stylesheet" href="styles.css
">
</head>
The external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
"styles.css" file looks like:

CSS Colors, Fonts and Sizes
Here, we will demonstrate some commonly used
CSS properties. You will learn more about them
later.
 The CSS color property defines the text color to
be used.
 The CSS font-family property defines the font to
be used.
 The CSS font-size property defines the text size
to be used.
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>

CSS Color Names
 In CSS, a color can be specified by using a
predefined color name:
CSS Background Color
 You can set the background color for HTML
elements:
<h1 style="background-color:Blue;">Hello World</h1>
<p style="background-color:green;">hello css...</p>
CSS Text Color
 You can set the color of text:
<h1 style="color:green;">Hello World</h1>
<p style="color:Blue;">hi paragraph...</p>
<p style="color:Green;">hii green...</p>

CSS background-image
 Set a background-image for the <body> element:
body {
background-image: url("paper.gif");
background-color: yellow;
}

 background-color: specifies the solid color to fill the
background with.
 background-image: calls an image for the
background.
 background-position: specifies where to place the
image in the element’s background.
 background-repeat: determines whether the image
is tiled.
 background-attachment: determines whether the
image scrolls with the page.

Background position
 The background-position property controls where a background image is
located in an element. The trick with background-position is that you are
actually specifying where the top-left corner of the image will be positioned,
relative to the top-left corner of the element.
 In the examples below, we have set a background image and are using
the background-position property to control it. We have also set background-
repeat to no-repeat. The measurements are all in pixels. The first digit is the x-
axis position (horizontal) and the second is the y-axis position (vertical).
/* Example 1: default. */
background-position: 0 0; /* i.e. Top-left corner of element. */
/* Example 2: move the image to the right. */
background-position: 75px 0;
/* Example 3: move the image to the left. */
background-position: -75px 0;
/* Example 4: move the image down. */
background-position: 0 100px;

Background repeat
 By default, when you set an image, the image is repeated
both horizontally and vertically until the entire element is
filled. This may be what you want, but sometimes you
want an image to be displayed only once or to be tiled in
only one direction. The possible values (and their results)
are as follows:
background-repeat: repeat; /* The default value. Will tile the image in
both directions. */
background-repeat: no-repeat; /* No tiling. The image will be used only
once. */
background-repeat: repeat-x; /* Tiles horizontally (i.e. along the x-axis) */
background-repeat: repeat-y; /* Tiles vertically (i.e. along the y-axis) */
background-repeat: inherit; /* Uses the same background-repeat property
of the element's parent. */

Background attachment
 The background-attachment property determines what happens
to an image when the user scrolls the page. The three available
properties are scroll, fixed and inherit. Inherit simply tells the
element to follow the background-attachment property of its
parent.
 To understand background-attachment properly, we need to first
think of how the page and view port interact. The view port is
the section of your browser that displays the Web page (think of
it like your browser but without all the toolbars). The view port is
set in its position and never moves.
 When you scroll down a Web page, the view port does not
move. Instead, the content of the page scrolls upward. This
makes it seem as if the view port is scrolling down the page.
Now, when we set background-attachment:scroll;, we are telling
the background that when the element scrolls, the background
must scroll with it. In simpler terms, the background sticks to the
element. This is the default setting for background-attachment.

 background-image: url(test-image.jpg);
 background-position: 0 0;
 background-repeat: no-repeat;
 background-attachment: scroll;
background-color: transparent;
background-image: url(image.jpg);
background-position: 50% 0 ;
background-attachment: scroll;
background-repeat: repeat-y;

CSS Borders
 The CSS border properties allow you to specify
the style, width, and color of an element's border.
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
•dotted - Defines a dotted border
•dashed - Defines a dashed border
•solid - Defines a solid border
•double - Defines a double border
•groove - Defines a 3D grooved border. The effect depends on the border-color
value
•ridge - Defines a 3D ridged border. The effect depends on the border-color value
•inset - Defines a 3D inset border. The effect depends on the border-color value
•outset - Defines a 3D outset border. The effect depends on the border-color value
•none - Defines no border
•hidden - Defines a hidden border
The border-style property can have from one to four values (for the top border,
right border, bottom border, and the left border).

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}