CSS Cascade Style Sheet

Adeel Rasheed
Custom Web Application Developer
 https://chauhantricks.blogspot.com
 https://www.fiverr.com/adeelrasheed

What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements
are to be displayed on screen
CSS saves a lot of work. It can
control the layout of multiple web
pages all at once

CSS Syntax
 A CSS comprises of style rules that are interpreted by the
browser and then applied to the corresponding elements in
your document.
 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 Syntax
selector { property: value }
You can put CSS Style Rule Syntax as
follows −
Example
p {
color: red;
text-align: center;
}

CSS Selectors
 Selectors are one of the most important aspects of CSS as they are used to select elements on a web
page so that they can be styled.
1-Element Type Selector
 An element type selector matches every instance of the element in the document tree with the
corresponding element type name.
Example
p {
color: blue;
}
2-Id Selectors
The id selector is used to define style rules for a single or unique element.
The id selector is defined with a '#' (hash) sign immediately followed by the id value.
Example
#error {
color: red;
}
3-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.
Example
.center {
text-align: center;
color: red;
}

Inserting CSS
Three Ways to Insert CSS
 External style sheet
 Internal style sheet
 Inline style

External Style Sheet
 With an external style sheet, you can change the
look of an entire website by changing just one file!
 Each page must include a reference to the external
style sheet file inside the <link> element. The
<link> element goes inside the <head> section:
 The style sheet file must be saved with a .css extension.
Example
 <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

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:
Example
 <head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

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:
Example
 <h1 style="color:blue;margin-left:30px;">This is a
heading.</h1>

Color property
Colors in CSS are most often specified by:
 a valid color name - like "red"
 an RGB value - like "rgb(255, 0, 0)"
 a HEX value - like "#ff0000"

Background property
Element Property Initial value
'background-attachment' scroll | fixed | inherit scroll
'background-color' <color> | transparent | inherit transparent
'background-image' <url> | none | inherit none
'background-position'
[ [ <percentage> | <length> | left | center | right ]
[ <percentage> |<length> | top | center | bottom ]? ]
| [ [ left | center | right ] || [ top | center | bottom ] ]
| inherit 0% 0%
'background-repeat' repeat | repeat-x | repeat-y | no-repeat | inherit repeat
'background'
['background-color' || 'background-
image' || 'background-repeat' ||'background-
attachment' ||'background-position'] | inherit
see individual
properties

Border propertyElement Property Initial value
'border-color' [ <color> |
see individual
properties
'border-spacing' <length> <length>? 0
'border-style'
None,solid,dotted,dashed,double,groove,ridge,
inset,outset,hidden
see individual
properties
'border-top''border-right''border-
bottom''border-left'
[ <border-width> || <border-style> ||'border-top-
color' ]
see individual
properties
'border-top-color' 'border-right-
color''border-bottom-color' 'border-left-
color' <color>
the value of the
'color' property
'border-top-style' 'border-right-
style''border-bottom-style' 'border-left-
style' <border-style> None
'border-top-width' 'border-right-
width''border-bottom-width' 'border-left-
width' <border-width> medium
'border-width'
length in px, pt or cm or it should be set
to thin, medium or thick.
see individual
properties
'border' [ <border-width> || <border-style> ||'border-color' ]
see individual
properties

Round Border property
Element Property Initial value
'border-radius’ In pixels
see
individual
properties
'border-top-right-radius'‘
'border-top-left-radius‘‘
'border-botttom-right-radius'‘
'border-bottom-left-radius‘‘ In pixels
see
individual
properties

Outline Property
 An outline is a line that is drawn around elements
(outside the borders) to make the element "stand out".
 Similar to border
 Outline Sets all the outline properties in one
declaration
 outline-color Sets the color of an outline
 outline-offset Specifies the space between an outline
and the edge or border of an element
 outline-styleSets the style of an outline
 outline-widthSets the width of an outline

Font property
Element Property
'font-family'
[[ <family-name> | <generic-family>] [, <family-name>| <generic-family>]* ] | inherit
Example: font-family: "Times New Roman", Times, serif;
'font-size'
<absolute-size> | <relative-size> |<length> |
keywords: xx-small, x-small, small, medium, large, x-large, xx-large.
size in pixel values (e.g. 12px, 16px, etc.)
'font-style' normal | italic | oblique | inherit
'font-variant' normal | small-caps | inherit
'font-weight'
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
| inherit
'font'
[ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height']? 'font-family' ] |
caption | icon | menu | message-box | small-caption | status-bar | inherit
'height' <length> | <percentage> | auto |inherit
'letter-spacing' normal | <length> | inherit
'line-height' normal | <number> | <length> |<percentage> | inherit

Text propertyElement Property Initial value
'text-align' left | right | center | justify | inherit
a nameless value
that acts as 'left' if
'direction' is 'ltr',
'right' if 'direction' is
'rtl'
'text-decoration'
none | [ underline || overline || line-through || blink
] | inherit none
'text-indent' <length> | <percentage> | inherit 0
'text-transform' capitalize | uppercase | lowercase | none | inherit none
'text-align' left | right | center | justify | inherit
a nameless value
that acts as 'left' if
'direction' is 'ltr',
'right' if 'direction' is
'rtl'

The BOX Model
 The following diagram demonstrates how the margin, padding, and
border CSS properties determines how much space an element can
take on a web page.

CSS Margins
 The CSS margin properties are used to generate space
around elements.
 The margin properties set the size of the white space
outside the border.
 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

CSS Margins
Example
 p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Example shorthand
 p {
margin: 100px 150px 100px 80px;
margin: 25px 50px 75px 100px;
}

CSS Margins
 If the margin property has four values:
 margin: 25px 50px 75px 100px;
 top margin is 25px
 right margin is 50px
 bottom margin is 75px
 left margin is 100px
 If the margin property has three values:
 margin: 25px 50px 75px;
 top margin is 25px
 right and left margins are 50px
 bottom margin is 75px
 If the margin property has two values:
 margin: 25px 50px;
 top and bottom margins are 25px
 right and left margins are 50px
 If the margin property has one value:
 margin: 25px;
 all four margins are 25px

CSS Padding
 The CSS padding properties are used to generate space around content.
 The padding clears an area around the content (inside the border) of an element.
 CSS has properties for specifying the padding for each side of an element:
 padding-top
 padding-right
 padding-bottom
 padding-left
Example
p {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding shorthand
 p {
padding: 50px 30px 50px 80px;
}

CSS Height and Width
 The height and width properties are used to set the height
and width of an element.
 The height and width can be set to auto (this is default.
Means that the browser calculates the height and width),
or be specified in length values, like px, cm, etc., or in
percent (%) of the containing block.
 Example
 div {
height: 200px;
width: 50%;
background-color: powderblue;
}

CSS Height and Width
 All CSS Dimension Properties
 Height Sets the height of an element
 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
 Width Sets the width of an element

CSS Links
 With CSS, links can be styled in different ways.
links can be styled differently depending on
what state they are in.
The four links states are:
•a:link - a normal, unvisited link
•a:visited - a link the user has visited
•a:hover - a link when the user mouses over it
•a:active - a link the moment it is clicked

CSS Links
Example
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}

CSS Tables
Adding Borders to Tables
 The CSS border property is the best way to define the
borders for the tables.
 The following example will set a black border for
the <table>, <th>, and <td> elements.
Example
table, th, td {
border: 1px solid black;
}

CSS Tables
Adding Borders to Tables
 The border-collapse CSS property selects a table's border model.
 It can accept one of the two values collapse or separate.
 The separated model is the default HTML table border model in which
each Adjacent cells have their own distinct borders.
 In the collapsed border model, adjacent table cells share borders.
Example
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}

CSS Tables
 Striped Tables
 For zebra-striped tables, use the nth-child() selector and add
a background-color to all even (or odd) table rows:
Example
 tr:nth-child(even) {background-color: #f2f2f2}

CSS Cascade Style Sheet

Recommended

More Related Content

What's hot (20)

Similar to CSS Cascade Style Sheet (20)

More from Adeel Rasheed (20)

Recently uploaded (20)

CSS Cascade Style Sheet