CSS

What is CSS?
CSS stands for Cascading Style Sheets
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 style sheets are stored in CSS files.

Advantages of CSS

1. CSS saves time − You can write CSS once and then reuse same sheet in multiple
HTML pages.
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.
A style rule is made of three parts −
Selector − A selector is an HTML tag at which a style will be applied.
This could be any tag like <h1> or <table> etc.

Property − A property is a type of attribute of HTML tag.

Put simply, all the HTML attributes are converted into CSS properties.
They could be color, border etc.

Value − Values are assigned to properties.

For example, colorproperty can have value either red or #F1F1F1 etc.
 CSS Selector
CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on
their element name, id, class, attribute, and more.

1. The element Selector

The element selector selects elements based on the element name.
You can select all <p> elements on a page like this (in this case, all <p>
elements will be center-aligned, with a red text color)

p {
   text-align: center;
   color: red;
}
2.The id Selector
The id selector uses the id attribute of an HTML element to select a specific
element.

The id of an element should be 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 style rule below will be applied to the HTML element with id="para1":

#para1 {
  text-align: center;
  color: red;
}
3. The class Selector
The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed
by the name of the class.

In the example below, all HTML elements with class="center" will be red
and center-aligned:

.center {
  text-align: center;
  color: red;
}
4. Grouping Selectors
If you have elements with the same style definitions,
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
In the example below we have grouped the selectors from the
code below:

h1 {
  text-align: center;
  color: red; h1, h2, p {
}   text-align: center;
h2 {   color: red;
  text-align: center; }
  color: red;
}
p {
  text-align: center;
  color: red;
}
How to add CSS
CSS is added to HTML pages to format the document according to
information in the style sheet. There are three ways to insert CSS in HTML
documents.
1. Inline CSS
2. Internal CSS
3. External CSS

1.Inline Styles
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The
style attribute can contain any CSS property.
The example below shows how to change the color and the left margin of a
<h1> element:

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
 2.External Style Sheet
Each page must include a reference to the external style sheet file inside the
<link> element.
The <link> element goes inside the <head> section:

An external style sheet can be written in any text editor. The file should not
contain any html tags. The style sheet file must be saved with a .css
extension.
CSS File:
Html File:
body {
background-color: lightgreen;
<head> }
<link rel="stylesheet" type="text/css"  h1 {
href="mystyle.css"> color: navy;
</head> margin-left: 20px;
}
3.Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element,
inside the <head> section of an HTML page:

<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
CSS Selector Reference
Selector Example Example description

.class .intro Selects all elements with class="intro"

#id #firstname Selects the element with id="firstname"

* * Selects all elements

element p Selects all <p> elements

element,element div, p Selects all <div> elements and all <p> elements

element element div p Selects all <p> elements inside <div> elements

element>element div > p Selects all <p> elements where the parent is a <div>
element
element+element div + p Selects all <p> elements that are placed
immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element

[attribute] [target] Selects all elements with a target attribute

[attribute=value] [target=_blank] Selects all elements with target="_blank"

[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word
"flower"

[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with
"en"

[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins
with "https"

[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends
with ".pdf"

[attribute*=value] a[href*="w3school Selects every <a> element whose href attribute value contains
s"] the substring "w3schools"
 CSS Properties

1.CSS Background
CSS background property is used to define the background effects on
element.
There are 5 CSS background properties that affects the HTML
elements:
a) background-color
b) background-image
c) background-repeat
d) background-attachment
e) background-position
1.Background Color
The background-color property specifies the background color of an element.
The background color of a page is set like this:

Body
 {
  background-color: lightblue;
}

With CSS, a color is most often specified by:

a valid color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
2.Background Image
The background-image property specifies an image to use as the
background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:

body {
  background-image: url(“flowers.gif");
}

 Background Image - Repeat Horizontally or Vertically

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}
 Background Image - Set position and no-repeat

The background-position property is used to define the initial position of

the background image. By default, the background image is placed on
the top-left of the webpage.

You can set the following positions:

1. center
body {
2. top
background: white url('good-morning.jpg');
3. bottom background-repeat: no-repeat;
4. left background-attachment: fixed;
5. right background-position: center;

 Background-attachment Property
A background-image that will not scroll with the page (fixed)
  Background - Shorthand property
To shorten the code, it is also possible to specify all the background properties in
one single property. This is called a shorthand property.

The shorthand property for background is background:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}
 CSS Properties

1. CSS Borders
The CSS border is a shorthand property used to set the border on an
element.

The CSS border properties are use to specify the style, color and size
of the border of an element. The CSS border properties are given
below

a) border-style
b) border-color
c) border-width
d) border-radius
 CSS border-style
The Border style property is used to specify the border type which you
want to display on the web page.
There are some border style values which are used with border-style
property to define a border.
 CSS border-width
The border-width property is used to set the border's width. It is set in
pixels. You can also use the one of the three pre-defined values, thin,
medium or thick to set the width of the border.
Note: The border-width property is not used alone. It is always used with other
border properties like "border-style" property to set the border first otherwise it
will not work.
p{  
    border-style: solid;  
    border-width: 5px;  
} 
 CSS Border Radius
The border-radius property is used to add rounded borders to an
element
p {
  border: 2px solid red;
  border-radius: 5px;
}
 CSS border-color
There are three methods to set the color of the border.
• Name: It specifies the color name. For example: "red".
• RGB: It specifies the RGB value of the color. For example: "rgb(255,0,0)".
• Hex: It specifies the hex value of the color. For example: "#ff0000".
There is also a border color named "transparent". If the border color is not set it is
inherited from the color property of the element.
Note: The border-color property is not used alone. It is always used with other
border properties like "border-style" property to set the border first otherwise it
will not work.

p {   p {  
    border-style: solid;       border-style: solid;  
    border-color: red;       border-color: #98bf21;  
}   }  
 CSS Border Radius
The border-radius property is used to add rounded borders to an element

p {
  border: 2px solid red;
  border-radius: 5px;
}
 CSS Margins
CSS Margin property is used to define the space around elements. It is
completely transparent and doesn't have any background color. It clears an area
around the element.
Top, bottom, left and right margin can be changed independently using separate
properties. You can also change all properties at once by using shorthand margin
property.
There are following CSS margin properties:

Property Description

Margin This property is used to set all the properties in one

declaration.

margin-left it is used to set left margin of an element.

margin-right It is used to set right margin of an element.

margin-top It is used to set top margin of an element.

margin-bottom It is used to set bottom margin of an element.

CSS Margin Values

Value Description

auto This is used to let the browser calculate a margin.

length It is used to specify a margin pt, px, cm, etc. its default value is 0px.

% It is used to define a margin in percent of the width of containing

element.

inherit It is used to inherit margin from parent element.

CSS Padding
CSS Padding property is used to define the space between the element
content and the element border.
It is different from CSS margin in the way that CSS margin defines the space
around elements. CSS padding is affected by the background colors. It clears
an area around the content.
Top, bottom, left and right padding can be changed independently using
separate properties. You can also change all properties at once by using
shorthand padding property.
CSS Padding Properties
Property Description

padding It is used to set all the padding properties in one

declaration.

padding-left It is used to set left padding of an element.

padding-right It is used to set right padding of an element.

padding-top It is used to set top padding of an element.

padding-bottom It is used to set bottom padding of an element.

 CSS Padding Values

Value Description

length It is used to define fixed padding in pt, px, em etc.

% It defines padding in % of containing element.
 CSS Font
CSS Font property is used to control the look of texts. By the use of CSS font property
you can change the text size, color, style and more. You have already studied how to
make text bold or underlined. Here, you will also know how to resize your font using
percentage.
These are some important font attributes:
1. CSS Font color: This property is used to change the color of the text. (standalone
attribute)
2. CSS Font family: This property is used to change the face of the font.
3. CSS Font size: This property is used to increase or decrease the size of the font.
4. CSS Font style: This property is used to make the font bold, italic or oblique.
5. CSS Font variant: This property creates a small-caps effect.
6. CSS Font weight: This property is used to increase or decrease the boldness and
lightness of the font.
CSS Font Families
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")

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;
}
 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)

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
CSS Font Size
CSS font size property is used to change the size of the font.
These are the possible values that can be used to set the font size:

Font Size Value Description

xx-small used to display the extremely small text size.

x-small used to display the extra small text size.

small used to display small text size.

medium used to display medium text size.
large used to display large text size.
x-large used to display extra large text size.

xx-large used to display extremely large text size.

smaller used to display comparatively smaller text size.

larger used to display comparatively larger text size.

size in pixels or % used to set value in percentage or in pixels.

CSS font-size CSS font-varient

h1 {
  font-size: 40px;
} p.normal {
  font-variant: normal;
h2 { }
  font-size: 50%;
} p.small {
  font-variant: small-caps;
p { }
  font-size: 14px;
}

p.normal {
CSS font-weight
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}
 CSS Overflow
The overflow property specifies whether to clip the content or to add scrollbars
when the content of an element is too big to fit in the specified area.

The overflow property has the following values:

visible - Default. The overflow is not clipped. The content renders outside the
element's box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the
content
auto - Similar to scroll, but it adds scrollbars only when necessary
 CSS float Property
The float property is used for positioning and formatting content e.g. let an image float
left to the text in a container.

The float property can have one of the following values:

• left - The element floats to the left of its container

• right- The element floats to the right of its container
• none - The element does not float (will be displayed just where it occurs in the text).
This is default
• inherit - The element inherits the float value of its parent
In its simplest use, the float property can be used to wrap text around images.
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<p>In this example, the image will float to the left in the paragraph, and the text in the
paragraph will wrap around the image.</p>
<p>
<img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-
right:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et
dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum
augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi,
sed.</p>
</body>
</html>
CSS Advance
CSS Animation property is used to create animation on the webpage. It can be used
as a replacement of animation created by Flash and JavaScript.

CSS3 @keyframes Rule

The animation is created in the @keyframe rule. It is used to control the
intermediate steps in a CSS animation sequence.

What animation does

An animation makes an element change gradually from one style to another. You
can add as many as properties you want to add. You can also specify the changes in
percentage.0% specify the start of the animation and 100% specify its completion.

How CSS animation works

When the animation is created in the @keyframe rule, it must be bound with
selector; otherwise the animation will have no effect.

The animation could be bound to the selector by specifying at least these two
properties:
The name of the animation
The duration of the animation
 CSS animation properties
Property Description
@keyframes It is used to specify the animation.

animation This is a shorthand property, used for setting all the properties,
except the animation-play-state and the animation-fill- mode
property.

animation-delay It specifies when the animation will start.

animation-direction It specifies if or not the animation should play in reserve on

alternate cycle.

animation-duration It specifies the time duration taken by the animation to complete

one cycle.

animation-fill-mode it specifies the static style of the element. (when the animation is
not playing)

animation-iteration-count It specifies the number of times the animation should be played.

animation-play-state It specifies if the animation is running or paused.

animation-name It specifies the name of @keyframes animation.

animation-timing-function It specifies the speed curve of the animation.

 @keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

Note: The animation-duration property defines how long time an animation should

take to complete. If the animation-duration property is not specified, no animation
will occur, because the default value is 0s (0 seconds). 

In the example above we have specified when the style will change by using the
keywords "from" and "to" (which represents 0% (start) and 100% (complete)).
 CSS Transition
The CSS transitions are effects that are added to change the element
gradually from one style to another, without using flash or JavaScript.

You should specify two things to create CSS transition.

• The CSS property on which you want to add an effect.
• The time duration of the effect.

Note. The transition effect is started when you move cursor over an
element. : If you don't specify the duration part, the transition will have no
effect because its default value is 0

Note: The transition property is not supported by IE9 and earlier version.
 CSS - Pseudo Classes
CSS pseudo-classes are used to add special effects to some selectors. You do
not need to use JavaScript or any other script to use those effects.

A simple syntax of pseudo-classes is as follows −

Selector :: pseudo-class {property: value}

CSS classes can also be used with pseudo-classes –

selector.class::pseudo-class {property: value}

The most commonly used pseudo-classes are as follows −

Sr.No. Value & Description

1 :link
Use this class to add special style to an unvisited link.

2 :visited
Use this class to add special style to a visited link.

3 :hover
Use this class to add special style to an element when you mouse over it.

4 :active
Use this class to add special style to an active element.

5 :focus
Use this class to add special style to an element while the element has focus.

6 :first-child
Use this class to add special style to an element that is the first child of some other element.

7 :lang
Use this class to specify a language to use in a specified element.
Selector Example Example description
:active a:active Selects the active link
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> elements that is the first child of
its parent

:first-of-type p:first-of-type Selects every <p> element that is the first <p>
element of its parent

:focus input:focus Selects the <input> element that has focus

:hover a:hover Selects links on mouse over
:in-range input:in-range Selects <input> elements with a value within a
specified range

:invalid input:invalid Selects all <input> elements with an invalid value

:lang(language) p:lang(it) Selects every <p> element with a lang attribute value
starting with "it"
:last-child p:last-child Selects every <p> elements that is the last child of its
parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element
of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of
its parent
:nth-last-child(n) p:nth-last- Selects every <p> element that is the second child of
child(2) its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of- Selects every <p> element that is the second <p>
type(2) element of its parent, counting from the last child
:nth-of-type(n) p:nth-of- Selects every <p> element that is the second <p>
type(2) element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p>
element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its
parent
:optional input:optional Selects <input> elements with no "required"
attribute
:out-of-range input:out-of-range Selects <input> elements with a value outside a
specified range
:read-only input:read-only Selects <input> elements with a "readonly" attribute
specified
:read-write input:read-write Selects <input> elements with no "readonly"
attribute
:required input:required Selects <input> elements with a "required" attribute
specified
:root root Selects the document's root element
:target #news:target Selects the current active #news element (clicked on
a URL containing that anchor name)
:valid input:valid Selects all <input> elements with a valid value
:visited a:visited Selects all visited links
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>

</head>

<body>
<a href = "">Click This Link</a>
</body>
</html>
 CSS - Pseudo Elements
CSS pseudo-elements are used to add special effects to some selectors.
You do not need to use JavaScript or any other script to use those
effects.

A simple syntax of pseudo-element is as follows −

selector: pseudo-element {property: value}

CSS classes can also be used with pseudo-elements −

selector.class:pseudo-element {property: value}

 The most commonly used pseudo-elements are as follows −

Sr.No. Value & Description

1 :first-line
Use this element to add special styles to the first line of the text in a selector.

2 :first-letter
Use this element to add special style to the first letter of the text in a selector.

3 :before
Use this element to insert some content before an element.

4 :after
Use this element to insert some content after an element.
 CSS Tables
We can apply style on HTML tables for better look and feel. There are some CSS
properties that are widely used in designing table using CSS:

 border
 border-collapse-we can collapse all borders in one border only.
 Padding-specify padding for table header and table data using the CSS
padding property.
 Width
 Height
 text-align
 color
 background-color

CSS Table: Styling even and odd cells

We can style even and odd table cells for better look and feel. In this code, we
are displaying different background colors on even and odd cells. Moreover, we
have changed the background-color and color of <th> tag.
 CSS3 - Shadow
CSS3 supported to add shadow to text or elements. Shadow property has
divided as follows −

• Text shadow
• Box Shadow
The CSS text-shadow property applies shadow to text.
In its simplest use, you only specify the horizontal shadow (2px) and the vertical
shadow (2px):

<style>
h1 {
text-shadow: 2px 2px #ffffff;
}
</style>
CSS box-shadow Property

The CSS box-shadow property applies shadow to elements.

In its simplest use, you only specify the horizontal shadow and the vertical shadow:

<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px grey ;
}
</style>
 CSS Buttons

 Use the background-color property to change the background color of a

button
 Use the font-size property to change the font size of a button
 Use the padding property to change the padding of a button
 Use the border-radius property to add rounded corners to a button
 Use the border property to add a colored border to a button
 Use the :hover selector to change the style of a button when you move
the mouse over it.
Tip: Use the transition-duration property to determine the speed of the
"hover" effect:
 CSS Media Queries
The @media rule, introduced in CSS, made it possible to define different style rules for
different media types.

Examples: You could have one set of style rules for computer screens, one for printers,
one for handheld devices, one for television-type devices, and so on.

Unfortunately these media types never got a lot of support by devices, other than the
print media type.
Media queries can be used to check many things, such as:
• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode)
• resolution
Using media queries are a popular technique for delivering a tailored style sheet to
desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).
Media Query Syntax
@media not|only mediatype and (expressions)
{
CSS-Code;
}

The result of the query is true if the specified media type matches the type of device
the document is being displayed on and all expressions in the media query are true.
When a media query is true, the corresponding style sheet or style rules are applied,
following the normal cascading rules.

CSS3 Media Types

Value Description
all Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
 Media Queries Simple Examples
One way to use media queries is to have an alternate CSS section right inside your
style sheet.
The following example changes the background-color to lightgreen if the viewport is
480 pixels wide or wider (if the viewport is less than 480 pixels, the background-color
will be pink):

@media screen and (min-width: 480px) 

{
  body 
{
    background-color: lightgreen;
   }
}
 CSS Flexbox Layout Module
CSS Flexbox Layout Module
• Before the Flexbox Layout module, there were four layout modes:
• Block, for sections in a webpage
• Inline, for text
• Table, for two-dimensional table data
• Positioned, for explicit position of an element
The Flexible Box Layout Module, makes it easier to design flexible responsive layout
structure without using float or positioning.