Scribd
Upload
8 views

What Is CSS?

Uploaded by

Chirag Gujral
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views

What Is CSS?

Uploaded by

Chirag Gujral
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 36

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

You might also like