Cascading Style Sheets
Introduction
a document written in HTML or XML
or in other media
What is CSS?
3
CSS vs. just HTML
4
How to write CSS?
5
Basic Structure of a Style
HTML & CSS Code
HTML
<body bgcolor="#FF0000">
CSS
body {background-color: #FF0000;}
Example:
p {
color: red;
text-align: center;
}
body {� background-color: lightblue;� }
Applying CSS / Types
Types - Inline Style sheet
10
Types – Internal / Embedded CSS
11
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body> <p>hai </p> <p> hello></p> </body></html>
Types – External CSS
other document
12
Types – External CSS - Example
13
<html>
<head>
<link href="mystyle.css“ rel="stylesheet" type="text/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;�}
Types – Inline / Embedded / External
Inline CSS
Embedded CSS
Types – Inline / Embedded / External
.CSS file
External CSS
Applying a single style sheet to multiple documents
Advantages of External Style Sheet
CSS Selectors
CSS Simple Selectors
CSS Selectors - Example
CSS Class Selectors - Example
CSS Universal Selector - Example
CSS pseudo classes
CSS pseudo classes - example
CSS other pseudoclasses
CSS other pseudoclasses
CSS other pseudoclasses
CSS other pseudo classes - Example
CSS Inheritance: - which style prevails when several are present? �
Cascading Priority
CSS PROPERTIES
CSS Properties
Color Property
Color: value;
Color Property
Color Property - Example
<h2 style=color: “green">
text displayed in green
</h2>
Background property
Background property
Background property
Background property
Background property
background-size
background-repeat
Background repeat examples:
41
Background property
Background property
Background-shorthand Property
missing, as long as the other ones are in this order
Background – Example1
Background – Example2
CSS – Element Dimensions
Width and height
CSS - Height and width Example
CSS - Height and width Example
NOTE- width and height
CSS Box Model
BOX MODEL
BOX MODEL - Example
BOX MODEL - Example
BORDER PROPERTY
Shorthand property border: 2px solid pink border-left::2px solid pink border-right:2px solid pink border-bottom:2px solid pink border-top:2px solid pink | border-width:2px border-style:solid border-color:pink | ||
border-left border-left-width border-left-color border-left-style | border-right border-right-width border-right-color border-right-style | border-bottom: border-bottom-width border-bottom-color border-bottom-style | border-top border-top-width border-top-color border-top-style |
border: border-width border-style border-color|initial|inherit;
border | Sets all the border properties in one declaration |
border-bottom | Sets all the bottom border properties in one declaration |
border-bottom-color | Sets the color of the bottom border |
border-bottom-style | Sets the style of the bottom border |
border-bottom-width | Sets the width of the bottom border |
border-color | Sets the color of the four borders |
border-left | Sets all the left border properties in one declaration |
border-left-color | Sets the color of the left border |
border-left-style | Sets the style of the left border |
border-left-width | Sets the width of the left border |
border-radius | Sets all the four border-*-radius properties for rounded corners |
border-right | Sets all the right border properties in one declaration |
border-right-color | Sets the color of the right border |
border-right-style | Sets the style of the right border |
border-right-width | Sets the width of the right border |
border-style | Sets the style of the four borders |
border-top | Sets all the top border properties in one declaration |
border-top-color | Sets the color of the top border |
border-top-style | Sets the style of the top border |
border-top-width | Sets the width of the top border |
border-width | Sets the width of the four borders |
�
CSS Border Style
CSS Border Style
CSS Border Width
<style>
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; }
p.five { border-style: double; border-width: 15px; }
p.six { border-style: double; border-width: thick; }
</style>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
CSS Border-color
p.one {� border-style: solid;� border-color: red;�}��p.two {� border-style: solid;� border-color: green;�}��p.three {� border-style: dotted;� border-color: blue;�}
Style, color, width, top-style, left-style - Shorthands
MARGIN PROPERTY
CSS- Box Margin - Example
PADDING PROPERTY
Padding properties are used to generate space around contents[inside border] |
Shorthand property padding: 2px ; padding-left::2px ; padding-right:2px ; padding-bottom:2px; padding-top:2px ; |
CSS- Box-Padding Example
max-height | Sets the maximum height of an element |
max-width | Sets the maximum width of an element |
min-height | Sets the minimum height of an element |
min-width | Sets the minimum width of an element |
MAX-width, height, Min - width, height properties
Min-height and max-height Example
CSS-OUTLINE Property
Outline is a line that is drawn around elements, OUTSIDE the border.
CSS-OUTLINE Property
outline-color | Specifies the color of the outline |
outline-style | Specifies the style of the outline |
outline-width | Specifies the width of outline |
Shorthand Property | |
Outline | width color style |
p {
border: 10px solid red;
outline:40px green solid ;
padding:20px;
margin:100px }
CSS Text Property
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_text-indent
CSS Text
CSS Text - Example
<html>
<head>
<style>
h1{
text-shadow:5px 5px 10px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect</h1>
</body>
</html>
LIST properties
list-style: list-style-type list-style-position list-style-image
List Properties
Outside: the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically.
Inside: the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start
List Properties- Example
�CSS Font Properties�
CSS Font Properties
CSS Font Properties - Example
CSS – Positioning Elements
CSS – Relative Positioning
CSS – Absolute Positioning
CSS – Positioning Elements
CSS-Float Property
CSS-Float Property- Example
Float- Right & Left
<Div> & <Span> tag
<Div> tag
<span> tag
HTML Block and Inline Elements
Block Elements
Inline Elements
<DIV> tag - Example
.
.
Clear:both – do not allow floating elements on the left or the right side of a specified <p> element
<DIV> tag - Example
Page Structured Elements
Page Structured Elements
Page Structured Elements
Overflow
Display Property�
CSS- NAV Tag
CSS-Menu Bar-Vertical
Step 1:
Create the needed menu as list of links
CSS-Menu Bar-Vertical
Remove Bullets and Margins, padding from list
CSS-Menu Bar-Vertical
Makes the whole link area clickable
It allows us to specify the width, padding, margin,
height etc
CSS-Menu Bar-Vertical
Step 4: Vertical navigation bar
CSS-Menu Bar-Vertical
hover: To changes the background color when user places curser over menu
CSS-Menu Bar-Horizontal
float: left; - use float to get block elements to slide next to each other
Since we use float:left, the contents may take next row. To mention how it should appear, we use overflow property
CSS- Dropdown menu
CSS- Dropdown menu
Step 1:
CSS- Dropdown menu
CSS- Dropdown menu
CSS- Dropdown menu
CSS- Dropdown menu
CSS- Dropdown menu
SOME MORE TAGS
<Meta> tag
inside the <head> element
<Meta> tag - Attributes
Without the viewport meta tag
Example
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML, JavaScript">
<meta name="author" content="John">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="30">
</head>
CSS Units
Absolute Lengths
Relative Lengths
Refer CSS Properties
Thank You