CSS-Cascading Style sheets

 CSS is the language we use to style a Web page.

 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 stylesheets are stored in CSS files
 CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.
Why CSS?
 HTML was NEVER intended to contain tags for formatting a web page!
 HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
 When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of large
websites, where fonts and color information were added to every single page,
became a long and expensive process.
 To solve this problem, the World Wide Web Consortium (W3C) created CSS.
 CSS removed the style formatting from the HTML page!
 The style definitions are normally saved in external .css files.
 With an external stylesheet file, you can change the look of an entire website
by changing just one file!
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.
CSS Syntax-Example
Example 1- <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 Selectors
 A CSS selector selects the HTML element(s) you want to style.
 CSS selectors are used to "find" (or select) the HTML elements you want to
style.
 We can divide CSS selectors into five categories:
 Simple selectors (select elements based on name, id, class)
 Combinator selectors (select elements based on a specific relationship
between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute value)
The CSS element Selector
 The element selector selects HTML elements based on the element
name.
 In the example below 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;
}
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.
 In this example, with CSS on the left, all HTML elements with class="center" will
be red and center-aligned; whereas only <p> tags affected with the right CSS:  
.center { p.center {
  text-align: center;
  text-align: center;
  color: red;
}   color: red;
}
 HTML elements can also refer to more than one class. In this example the <p>
element will be styled according to class="center" and to class="large": 
<p class="center large">This paragraph refers to two classes.</p>
The CSS Universal Selector
 The universal selector (*) selects all HTML elements on the page.
 The CSS rule below will affect every HTML element on the page: 
* {
  text-align: center;
  color: blue;
}
The CSS Grouping Selector
 It selects all the HTML elements with the same style definitions.
 The CSS code on the left shows the h1, h2, and p elements have the same style
definitions. To minimize the CSS Grouping Selector is applied as in the right CSS.
To group selectors, separate each selector with a comma.
h1 {
  text-align: center; h1, h2, p {
  color: red;
}   text-align: center;
h2 {   color: red;
  text-align: center; }
  color: red;
}
p {
  text-align: center;
  color: red;
}
How To Add CSS
 When a browser reads a style sheet, it will format the HTML
document according to the information in the style sheet.
 There are three ways of inserting a style sheet:
 External CSS
 Internal CSS
 Inline CSS
External CSS
 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.
 External styles are defined within the <link> element, inside the
<head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External Style Sheet- mystyle.css
 An external style sheet can be written in any text editor, and must be saved with
a .css extension.
 The external .css file should not contain any HTML tags.
 Here is how the "mystyle.css" file looks:

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}
 Do not add a space between the property value and the unit (such as margin-left: 20
px;). The correct way is: margin-left: 20px;
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 of an HTML page.
<!DOCTYPE html>
<html>
<head>
<style>
body {
} background-color: linen;
h1 {
   color: maroon;
}margin-left: 40px;
</style>
</head>
<body>
<h1>This
<p>This isisa aparagraph.</p>
heading</h1>
</body>
</html>
Inline CSS
 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.
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>
Tip: An inline style loses many of the advantages of a style sheet (by
mixing content with presentation). Use this method sparingly.
Multiple Style Sheets
 If some properties have been defined for the same selector (element)
in different style sheets, the value from the last read style sheet will
be used.
 Assume that an external style sheet has the following style for the
<h1> element:
h1 {
  color: navy;
}
 Then, assume that an internal style sheet also has the following
style for the <h1> element:
h1 {
  color: orange;   
}
Multiple Style Sheets cont’d…
If the internal style is defined after the link to the external style sheet, the <h1> elements will be "orange":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>
However, if the internal style is defined before the link to the external style sheet, the <h1> elements will be
"navy": 
<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Multiple Style Sheets -Cascading Order
 What style will be used when there is more than one style specified
for an HTML element?
 All the styles in a page will "cascade" into a new "virtual" style
sheet by the following rules, where number one has the highest
priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
So, an inline style has the highest priority, and will override external
and internal styles and browser defaults.
 Cascading Order cont’d …
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">
<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and also with an internal CSS, and also with an
external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading stylesheets work (try removing the inline CSS
first, then the internal, then the external).</p>
</body>
</html>
CSS Comments
 Comments are used to explain the code, and may help when you edit the source
code at a later date.
 CSS comments are not displayed in the browser, but they can help document
your source code.
 Comments are ignored by browsers.
 A CSS comment is placed inside the <style> element, and starts with /* and
ends with */:
<style>
/*This is a single-line comment */
p {
  color: red; /* Set text color to red */
}
</style>
CSS Background Color, Text Color, and Border Color
 You can set the background color for HTML elements:
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
 You can set the color of text:
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
 You can set the color of borders:
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
CSS Color Values
 In CSS, colors can also be specified using RGB values, HEX values, HSL values,
RGBA values, and HSLA values:
rgb(255, 99, 71)  rgb(red, green, blue) defines the intensity of each color between 0 and 255.
rgba(255, 99, 71, 0.5)  rgba(red, green, blue, alpha) alpha between 0.0 (fully transparent) and
1.0 (not transparent at all)
#ff6347  #rrggbb rr (red), gg (green) and bb (blue) values between 00 and ff (same as decimal
0-255).
hsl(9, 100%, 64%)  hsl(hue, saturation, lightness). Hue is a degree on the color wheel from 0 to
360. 0 is red, 120 is green, and 240 is blue.
hsla(9, 100%, 64%, 0.5)  hsla(hue, saturation, lightness, alpha)

<h1 style="background-color:rgb(255, 99, 71);">...</h1>

<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
CSS Backgrounds
 The CSS background properties are used to add background effects for
elements.
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background (shorthand property)
CSS 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; /* a valid color name - like “red”, HEX value - like “#ff0000”&
RGB */
}

You can set the background color for any HTML elements like <h1>, <p>, and
<div> : 
h1 {
  background-color: green;
}
div {
  background-color: lightblue;
}
p {
  background-color: yellow;
Opacity / Transparency
The opacity property specifies the opacity/transparency of an element.
It can take a value from 0.0 - 1.0. The lower value, the more transparent:

div {
  background-color: green;
  opacity: 0.3;
}

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}
CSS 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.
 Set the background image for a page: 
body {
  background-image: url("paper.gif");
}
 When using a background image, use an image that does not disturb the text.
 The background image can also be set for specific elements, like the <p>
element:
p {
  background-image: url("paper.gif");
}
CSS Background Image- background-repeat
 By default, the background-image property repeats an image both horizontally and
vertically.
 Some images should be repeated only horizontally or vertically.
 To repeat an image horizontally :
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}
Tip: To repeat an image vertically, set background-repeat: repeat-y; CSS background-
repeat: no-repeat
To repeat an image only once:
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}
CSS background-position
 Using background-repeat, the background image is placed in the
same place as the text.
 To change the position of the image, so that it does not disturb the
text too much, we use the background-position property.
 Position the background image in the top-right corner: 
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}
CSS background-attachment
 The background-attachment property specifies whether the background image should scroll
or be fixed (will not scroll with the rest of the page):
body {
background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed; /*   background-attachment: scroll; to make it scrollable*/
 }
 To shorten the code, it is also possible to specify all the background properties in
one single property like as follows:
body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}
CSS Borders
The CSS border properties allow you to specify the style, width, and color of an
element's border.
The border-style property specifies what kind of border to display.
 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).
CSS Borders cont’d…
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;}
CSS Border Width
The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-
defined values: thin, medium, or thick:
p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}
Specific Side Widths
 The border-width property can have from one to four values (for the top
border, right border, bottom border, and the left border):
p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
CSS Border Color
The border-color property is used to set the color of the four borders.
p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}
Specific Side Colors
The border-color property can have from one to four values (for the top
border, right border, bottom border, and the left border).
p.one {
  border-style: solid;
  border-color: red green blue yellow; /* red top, green right, blue
bottom and yellow left */
}
CSS Border Sides
In CSS, there are also properties for specifying each of the borders (top,
right, bottom, and left):
p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
CSS Border Sides cont’d…
p {/* Four values */
  border-style: dotted solid double dashed;
}

p { /* Three values */

  border-style: dotted solid double;
}

p { /* Two values */

  border-style: dotted solid;
}

p { /* One value */

  border-style: dotted;
}

The border-style property is used in the example above.

However, it also works with border-width and border-color.
CSS Border - Shorthand Property
 To shorten the code, it is also possible to specify all the individual border
properties in one property.
 The border property is a shorthand property for the following individual border
properties:
 border-width
 border-style (required)
 border-color
p {
border: 5px solid red;
}
P{
  border-left: 6px solid red;
  background-color: lightgrey;
}
CSS Rounded Borders
The border-radius property is used to add rounded borders to an element:

p {
  border: 2px solid red;
  border-radius: 5px;
}
CSS Margins
 The CSS margin properties are used to create space around elements, outside of any
defined borders.
 With CSS, you have full control over the margins. There are properties for setting the
margin for each side of an element (top, right, bottom, and left).
 CSS has properties for specifying the margin for each side of an element:
 margin-top
 margin-right
 margin-bottom
 margin-left
 All the margin properties can have the following values:
auto - the browser calculates the margin
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be inherited from the parent element
Tip: Negative values are allowed.
CSS Margins
Set different margins for all four sides of a <p> element:
p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}
Margin - Shorthand Property
 To shorten the code, it is possible to specify all the margin properties in one property.
 The margin property is a shorthand property for the following individual margin properties:
 margin-top
 margin-right
 margin-bottom
 margin-left
1. If the margin property has four values: 2. If the margin property has three values:
margin: 25px 50px 75px 100px; margin: 25px 50px 75px;
top margin is 25px top margin is 25px
right and left margins are 50px
right margin is 50px bottom margin is 75px
bottom margin is 75px
left margin is 100px
4. If
the margin property has one
3. If the margin property has two
value:
values: margin: 25px;
margin: 25px 50px;
top and bottom margins are 25px all four margins are 25px
right and left margins are 50px
The auto Value and inherit Value
 You can set the margin property to auto to horizontally center the element within its
container.
 The element will then take up the specified width, and the remaining space will be split
equally between the left and right margins.
div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
 To let the left margin of the <p class="ex1"> element inherits from the parent element (<div>):
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
 CSS Padding
 The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.
 CSS has properties for specifying the padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
All the padding properties can have the following values:
length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent element
Note: Negative values are not allowed.
CSS Padding cont’d…
 Set different padding for all four sides of a <div> element:  

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
 Padding - Shorthand Property
The same with the margin property
Padding and Element Width
 The CSS width property specifies the width of the element's content area.
 The content area is the portion inside the padding, border, and margin of an element
(the box model).
 So, if an element has a specified width, the padding added to that element will be
added to the total width of the element. This is often an undesirable result.
 Here, the <div> element is given a width of 300px. However, the actual width of the
<div> element will be 350px (300px + 25px of left padding + 25px of right padding):
div {
  width: 300px;
  padding: 25px;
}
box-sizing: border-box; /* the box-sizing property keeps the width at 300px, no matter
the amount of padding: */
CSS Height and Width
 The CSS height and width properties are used to set the height and width of an
element.
 The CSS max-width property is used to set the maximum width of an element.
 The height and width properties do not include padding, borders, or margins. It sets
the height/width of the area inside the padding, border, and margin of the element.
 The max-width property is used to set the maximum width of an element. The max-
width can be specified in length values, like px, cm, etc., or in percent (%) of the
containing block, or set to none (this is default. Means that there is no maximum
width).
CSS Height and Width
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-width of an element</h2>
<div>This div element has a height of 100px and a max-width of 500px.</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
The CSS Box Model-design and layout.
 All HTML elements can be considered as boxes.
 The CSS box model is essentially a box that wraps around
every HTML element. It consists of: margins, borders,
padding, and the actual content.
 Explanation of the different parts:
 Content - The content of the box, where text and images
appear
 Padding - Clears an area around the content. The padding is
transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is
transparent
 The box model allows us to add a border around elements,
and to define space between elements.