Scribd
Upload
15 views

Cascading Style Sheets

Uploaded by

dheepikaraytp551
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Cascading Style Sheets

Uploaded by

dheepikaraytp551
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 52

CSS

Cascading Style Sheets


What is CSS?
CSS is the language we use to style a Web
page.
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 Syntax
Example
<!DOCTYPE>
<html>
<head>
<style>
h1{
color:white;
background-color:red;
padding:5px;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1>Write Your First CSS Example</h1>
<p>This is Paragraph.</p>
</body>
</html
CSS Selectors

CSS selectors are used to select the content you want to style.
Selectors are the part of CSS rule set.
CSS selectors select HTML elements according to their id,
class, type, attribute, etc.
There are several different types of selectors in CSS.

1. CSS Element Selector


2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
Element Selector
The element selector selects the HTML element by name.
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the
style.</p>
<p>Me too!</p>
<h2>And me!</h2>
</body>
</html>
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!
An id name cannot start with a number!
To select an element with a specific id, write a hash (#)
character, followed by the id of the element.
#para1 {
text-align: center;
color: red;
}
Id Selector

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Javatpoint.com</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
Class Selector

The class selector selects HTML elements with a specific


class attribute.
A class name cannot start with a number!
To select elements with a specific class, write a period (.)
character, followed by the class name.

.center {
text-align: center;
color: red;
}
Class Selector

You can also specify that only specific HTML elements


should be affected by a class.

p.center {
text-align: center;
color: red;
}

HTML elements can also refer to more than one class.


<p class="center">This paragraph refers to two classes.</p>
class Selector

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading </h1>
<p class="center">This paragraph </p>
</body>
</html>
CSS Universal Selector

The universal selector (*) selects all HTML elements on the


page.

*{
text-align: center;
color: blue;
}
Universal Selector

<!DOCTYPE html>
<html>
<head>
<style>
* { color: green;
font-size: 20px; }
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every
paragraph.</p>
<p>Me too!</p>
<p>And me!</p>
</body>
</html>
CSS Group Selector

The grouping selector selects all the HTML elements with


the same style definitions.
To group selectors, separate each selector with a comma.

h1, h2, p {
text-align: center;
color: red;
}
Group Selector
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue; }
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
<h6>Hello Javatpoint.com</h6>
<h2>Hello Javatpoint.com (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>
HOW TO ADD CSS

INLINE INTERNAL EXTERNAL


Inline CSS
Inline CSS is used to apply CSS on a single line or element.
To use inline styles, add the style attribute to the relevant
element. The style attribute can contain any CSS property.

Disadvantages of Inline CSS


These styles cannot be reused anywhere else.
These styles are tough to be edited because they are not
stored in a single place.
You cannot use quotations within inline CSS.
Inline CSS does not provide browser cache advantages.
Inline

<!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>
Internal CSS
Inline CSS is used to apply CSS on a single line or element.
To use inline styles, add the style attribute to the relevant
element. The style attribute can contain any CSS property.

Disadvantages of Inline CSS


These styles cannot be reused anywhere else.
These styles are tough to be edited because they are not
stored in a single place.
You cannot use quotations within inline CSS.
Inline CSS does not provide browser cache advantages.
Internal

<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
}
</style></head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS

The external style sheet is generally used when you want to


make changes on multiple pages.
With an external style sheet, you can change the look of an
entire website by changing just one file!
It uses the <link> tag on every pages and the <link> tag
should be put inside the head section.
The external style sheet may be written in any text editor
but must be saved with a .css extension. This file should not
contain HTML elements.
External

"mystyle.css”
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
External

<!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>
CSS Properties
CSS Colors:
CSS Background Color
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

CSS Text Color


<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>

CSS Border Color


<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
CSS Properties

CSS Background:
CSS background property is used to define the background effects on
element. There are 5 CSS background properties that affects the HTML
elements:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
CSS Properties
1. CSS background-color:
<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>My first CSS page.</h2>
<p>Hello Javatpoint.</p>
</body>
</html>
CSS Properties
2. CSS background-image:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url(paper.gif);
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has an image as the background!</p>
</body>
</html>
CSS Properties
3. CSS background-repeat:
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x/no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>
</body>
</html>
CSS Properties
4. CSS background-attachment:

<html><head>
<style>
body {
background-attachment: fixed;🡪(scroll)
}
</style></head>
<body>
<h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the background
image should scroll or be fixed (will not scroll with the rest of the page).</p>
</body>
</html>
CSS Properties
5. CSS background-position
The background-position property is used to define the initial position of the
background image. By default, the background image is placed on the top-left
of the webpage.
You can set the following positions: center,top,bottom,left,right
Example: <html>
<head><style>
body {
background-position: center;
}
</style></head>
<body>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
</body></html>
CSS Properties
CSS background-Shorthand property:
it is also possible to specify all the background properties in one single
property. This is called a shorthand property.
Example: <html>
<head><style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
margin-right: 200px;
}
</style></head>
<body>
<p>The background property is a shorthand property for specifying all the
background properties in one declaration.</p>
</body>
</html>
CSS Border
The following values are allowed:
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
1. Create a webpage by using CSS and follow the
instructions given below:
Insert a background image
Background image should not be repeated
Background attachment should be fixed
Text color should be blue
Font size should be 25px
Text align should be justify
TASK-1
Letter spacing should be 3px and word spacing should be
6px
Add a border style for each side of the paragraph. The
top border should be dashed and in red color, the right
border should be double and in green color, the bottom
border should be dotted and in cyan color, and the left
border should be solid and in orange color.
2. Create an Image gallery of 6 images by considering the
following CSS properties:
Set a 3px, solid and red border around the images.
Apply top left border radius of 40px, top right
border radius of 70px, bottom right border radius of
50px and bottom left border radius of 90px to all the
images.
TASK-2
The height and width of all images should be 300px
and 400pxrespectively.
Apply a transparency effect of 0.7 to all the images.
Margin around images should be of 10px.
Apply horizontal box shadow of 12px, vertical box
shadow of 16px, blur effect of 18px and color of box
shadow blue.
CSS Margin
CSS Margin property is used to define the space around
elements. It is completely transparent and doesn't have
any background color. It clears an area around the
element.
CSS Padding
CSS Padding property is used to define the space between
the element content and the element border.
It is different from CSS margin in the way that CSS
margin defines the space around elements. CSS padding is
affected by the background colors. It clears an area
around the content.
Margin
<html>
<head> <style>
p.ex {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
}
</style> </head>
<body>
<p>This paragraph is not displayed with specified margin.
</p>
<p class="ex">This paragraph is displayed with specified
margin.</p>
</body>
</html>
Padding
<html>
<head> <style>
p.padding {
padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified
paddings.</p>
</body>
</html>
CSS Font
CSS Font property is used to control the look of texts. By the use of
CSS font property you can change the text size, color, style and more.
Properties;
CSS Font color: This property is used to change the color of the text.
(standalone attribute)
CSS Font family: This property is used to change the face of the font.
CSS Font size: This property is used to increase or decrease the size of
the font.
CSS Font style: This property is used to make the font bold, italic or
oblique.
CSS Font variant: This property creates a small-caps effect.
CSS Font weight: This property is used to increase or decrease the
boldness and lightness of the font.
CSS Font color:
There are three different formats to define a color:
By a color name
By hexadecimal value
By RGB

CSS font family


It can be divided in two types:
Generic family: It includes Serif, Sans-serif, and Monospace.
Font family: It specifies the font family name like Arial, New
Times Roman etc.
eg:
h1 { font-family: sans-serif; }
CSS font size:
This property is used to change the size of the font.
<p style="font-size:xx-small;"> This font size is extremely small.
</p>
<p style="font-size:x-small;"> This font size is extra small</p>
<p style="font-size:medium;"> This font size is medium. </p>
<p style="font-size:large;"> This font size is large. </p>
<p style="font-size:x-large;"> This font size is extra large. </p>
<p style="font-size:xx-large;"> This font size . </p>
<p style="font-size:smaller;"> This font size is smaller. </p>
<p style="font-size:larger;"> This font size is larger. </p>
<p style="font-size:200%;"> This font size is set on 200%. </p>
<p style="font-size:20px;"> This font size is 20 pixels. </p>
CSS Font Style
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; }

CSS Font Variant


p { font-variant: small-caps; }
h3 { font-variant: normal; }

CSS Font Weight


<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
Picture
The most common use of the <picture> element will be for art
direction in responsive designs. Instead of having one image that is
scaled up or down based on the viewport width, multiple images can
be designed to more nicely fill the browser viewport.
The <picture> element contains two tags: one or more <source> tags
and one <img> tag.
Example:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Marquee
The HTML <marquee> tag is used for scrolling
piece of text or image displayed either horizontally
across or vertically down your web site page
depending on the settings.
Example:
<marquee>This is basic a marquee</marquee>
<marquee direction = "up">The direction of text will be
from bottom to top.</marquee>
Media Query
The Media query in CSS is used to create a responsive web
design. It means that the view of a web page differs from
system to system based on screen or media types. The
breakpoint specifies for what device-width size, the content is
just starting to break or deform.
Media Types in CSS:
all: It is used for all media devices
print: It is used for printer.
screen: It is used for computer screens, smartphones, etc.
speech: It is used for screen readers that read the screen aloud.
Media Query

@media screen and (max-width:500px) {


body {
text-align: center;
background-color: blue;
}
CSS Gradients
The Gradient in CSS is a special type of image that is made up of
progressive & smooth transition between two or more colors.
By using the gradient in CSS, we can create variants styling of
images which can help to make an attractive webpage.
Gradients can be categorized into 2 types:
linear-gradient() and radial-gradient()
linear-gradient()-It includes the smooth color transitions to going up, down,
left, right, and diagonally. The minimum two-color required to create a linear
gradient. More than two color elements can be possible in linear gradients.
The starting point and the direction are needed for the gradient effect.
background-image: linear-gradient(white, green);
radial-gradient()
It starts at a single point and emanates outward. By default, the first color
starts at the center position of the element and then fades to the end color
towards the edge of the element. Fade happens at an equal rate until specified.
syntax:
background-image: radial-gradient( shape size at position, start-color, ..., last-
color );
example:
background-image: radial-gradient(circle, green, white, blue);
CSS flex Property
The flex CSS shorthand property is the combination of flex-grow, flex-shrink,
and flex-basis properties. It is used to set the length of flexible items. The flex
property is much more responsive and mobile-friendly.

CSS grid Property


he CSS grid layout module is used to create a grid-based layout system, with
the help of rows and columns it makes it easier to design any webpage without
using floats and positioning.
CSS box-sizing Property
The box-sizing property in CSS defines how the user should calculate the
total width and height of an element i.e padding and borders, are to be
included or not.
syntax: box-sizing: content-box|border-box;
TASK-3
Create the following navigation bar by using CSS: and also create a
simple webpage like this:
THANK YOU

You might also like