What is CSS?
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be
displayed on the screen’s of desktops,
laptops, tablets, mobiles, etc.
CSS is used to define styles for your web pages,
including the design, layout and variations in
display for different devices and screen sizes.
Created By:- Aman Singh 1
CSS Syntax
A CSS rule-set 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.
Created By:- Aman Singh 2
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want
to style. Some of them are:-
• The CSS element Selector
• The CSS id Selector
• The CSS class Selector
• The CSS Universal Selector
• The CSS Grouping Selector
Created By:- Aman Singh 3
The 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.
Created By:- Aman Singh 4
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.
Created By:- Aman Singh 5
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.
Created By:- Aman Singh 6
You can also specify that only specific HTML elements should be affected
by a class.
In this example only <p> elements with class="center" will be center-
aligned.
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".
Created By:- Aman Singh 7
The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
The CSS rule above will affect every HTML element on the page.
Created By:- Aman Singh 8
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):
Created By:- Aman Singh 9
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
Created By:- Aman Singh 10
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
• External CSS
• Internal CSS
• Inline CSS
Created By:- Aman Singh 11
Inline CSS
It is use apply a unique style to a single
HTML element.
<h1 style=“text-align: right;”>Inline Style</h1>
Internal CSS
It is use apply a style to a single HTML page.
<html>
<head>
<style>
h1{
text-align: center;
}
</style>
<body>
<h1>Internal</h1>
</body>
</html>
Created By:- Aman Singh 12
Inline CSS
It is use apply a unique style to a single HTML element.
<h1 style=“text-align: right;”>Inline Style</h1>
Created By:- Aman Singh 13
CSS Comments
Comments are used to explain the code, and may help when you edit
the source code at a later date. Comments are Ignored by the browsers.
A CSS Comment is placed inside the <style> element, and starts with /*
and ends with */
Created By:- Aman Singh 14
CSS Colors
Colors are specified using predefined:
• color names
• RGB
• HEX
• HSL
• RGBA
• HSLA
Created By:- Aman Singh 15
CSS Backgrounds
The CSS background properties are used to define the background
effects for elements.
Following are the CSS background properties:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
Created By:- Aman Singh 16
CSS background-color
The background-color property specifies the background color of an
element.
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)"
Created By:- Aman Singh 17
CSS background-image
The background-image property specifies an image to use as the
background of an element.
Created By:- Aman Singh 18
CSS background-repeat
The background-repeat property repeats an image both horizontally
and vertically.
Some images should be repeated only horizontally or vertically, or they
will look strange.
To repeat only horizontally we use value repeat-x.
To repeat only vertically we use value repeat-y.
To stop the image from repeating itself we use value no-repeat.
To set a position to the background we use property background-position.
Created By:- Aman Singh 19
Created By:- Aman Singh 20
CSS background-attachment
The background-attachment property specifies whether the
background image should scroll or be fixed.
Created By:- Aman Singh 21
CSS 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.
When using the shorthand property the order of the property values is:
-> background-color
-> background-image
-> background-repeat
-> background-attachment
-> background-position
Created By:- Aman Singh 22
CSS Border
The CSS border properties allow you to specify the style, width, and
color of an element’s border.
CSS border-style
• Dotted
• Dashed
• Solid
• Double
• None
• Hidden
Created By:- Aman Singh 23
CSS border-width
The border-width property specifies the width of four borders.
Created By:- Aman Singh 24
CSS border-color
The border-color property is used to set the color of four borders.
Created By:- Aman Singh 25
CSS Border – Sides
Created By:- Aman Singh 26
CSS Border - Shorthand Property
The border property is a shorthand property for the following individual border properties:
• border-width
• border-style
• border-color
Created By:- Aman Singh 27
CSS Rounded Borders
The border-radius property is used to add rounded borders to an
element.
Created By:- Aman Singh 28
CSS Margins
The CSS margin properties are used to create space around elements,
outside of any defined borders.
Created By:- Aman Singh 29
CSS Padding
The CSS padding properties are used to generate space around an element’s content, inside of any defined
borders.
Created By:- Aman Singh 30
CSS height and Width
The height and width properties are used to set the height and width of
an element.
Created By:- Aman Singh 31
CSS Text Color
The color property is used to set the color of the text . The color is
specified by:
• a color name
• a HEX value
• an RGB value
Created By:- Aman Singh 32
CSS Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Created By:- Aman Singh 33
CSS Text Decoration
The text-decoration
property is used to set
or remove decorations
from text.
The Value text-
decoration: none; is
often used to remove
underlines from links.
Created By:- Aman Singh 34
CSS Text Transformation
The text-transform property is used to specify uppercase and lowercase
letters in a text.
Created By:- Aman Singh 35
CSS Text Spacing
Text Indentation
The text-indent property is used to specify
Created By:- Aman Singh 36
