Scribd
Upload
11 views

HTML Css

Uploaded by

bronxkie
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views

HTML Css

Uploaded by

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

CSS

Cascading Style Sheet


WHAT IS CSS?
CSS stands for “Cascading Style Sheets”
Cascading refers to the procedure that determines which style will apply
to a certain section, if you have more than one style rule.
Style how you want a certain part of your page to look. You can set
things like color, margins, font, etc for things like tables, paragraphs,
and headings.

Sheets the “sheets” are like templates, or a set of rules, for determining
how the webpage will look.

CSS is a stylesheet language used to describe the presentation of a document


written in HTML or XML.
Why Use CSS?
• CSS is used to define styles for your web
pages, including the design, layout and
variations in display for different devices
and screen sizes.
Advantages
• A web application will contains hundreds of web pages, which are created
using HTML.

• Formatting these HTML pages will be a laborious process, as


formatting elements need to be applied to each and every page.

• CSS saves lots of work as we can change the appearance and layout of all
the web pages by editing just one single CSS file.
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.
Example
In this example all <p> elements will be center-aligned, with a
red text color:

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

Example Explained
•p is a selector in CSS .
•color is a property, and red is the property value
•text-align is a property, and center is the property value
CSS Example
CSS Syntax Rules
Rule have two parts - Selector and declaration.
Selector The HTML element you want to add style to.
<p> <h1> <table> etc
Declaration The statement of style for that element. Made up of
property and value.
Rules Declaration
Selector p { font-family : Arial ; }

Propert Valu
y e
Declaration
EXAMPLE
Selector - I want the text color of my paragraph to be red and the background color to be black.

<html> Welcome to Coder Decoder


<head>
<style> p {font-family:Arial;
color: red;
background-color:black;}
</style>
</head>
<body>
<p> <b> Welcome to Coder Decoder< / b >
</p>
</body>
</html>
CSS SELECTORS
Declaring a CSS Rule for a Elements Attribute
It will style all the content of that element which you are selecting.
Example
The HTML
<p>
Welcome to the Coder Decoder
</p>
<p>
<b> <i> Powered by – Jonigin N. Tigas</i> < / b >
</p>
The CSS
p {text-align: center; color: blue;}
CSS SELECTORS
Grouping Selectors

You can group all the selectors of same style to minimize the code. The
selectors should be separated with comma.

Example

h2 {text-align: center; color: red; }


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

Grouped Selectors
h2, p { text-align: center; color:
red; }
INSERTING A STYLESHEET
Three different ways
1. External Style Sheet
2. Internal Style Sheet
3. Inline Styles
Inline CSS
Inline CSS contains the CSS property in the body section
attached with element is known as inline CSS. This kind of style
is specified within an HTML tag using the style attribute.

<html>
<head>
<title>Inline CSS</title>
</head>

<body>
<p style = "color:#009900; font-size:50px; font-style:italic; text-align:center;">
Coder Decoder
</p>
</body>
</html> Coder Decoder
Internal or Embedded CSS

An internal stylesheet holds CSS rules for the page in the

head section of the HTML file. The rules only apply to that
page, but we can configure CSS classes and IDs that can be used
to style multiple elements in the page code.
<head>
<style type =“text / css”>
h3 { font-style:bold; font-size:20px; }
</style>
</head>
<html>
<head>
<title>Internal CSS</title>
<style>
.main { text-align:center; }
.coder { font-style:bold; font-size:20px; }
</style>
</head>
<body>
<div class = "main">
<div class ="GFG">Mount Abu</div>
<div class =“coder">
A computer science portal for Class X
</div>
</div>
</body>
</html>
External CSS
External CSS contains separate CSS file which contains only style
property with the help of tag attributes ( For example class, id,
heading, … etc ).

An external ( also called linked ) style sheet carries essentially the


same information as an internal style sheet in the sense that external
style sheet is contained inn its own text file ( having extension .css )
Example
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>Coder Decoder</h1>
"mystyle.css"
<p>This is a my Channel.</p>
body {
background-color: lightblue;
}
</body>
</html> h1 {
color: navy;
margin-left: 20px;
}
CSS PROPERTIES
CSS Background
We can use CSS Background properties to define the background effects of an
element. The following properties can be used for background effects :

a. background-color
b. background-image
c. background-repeat
d. background-position
CSS PROPERTIES
CSS Background Image
You can use an image as the background for an element using background-
image property.
Example:-

body{

background-image : url(‘java.png’);

}
CSS PROPERTIES
CSS Background Color

The background-color property is used to specify the background color of an


element.
Example:
body {
background-color : darkblue;
}

p{
background-color :
orange;
}
CSS PROPERTIES
CSS Background Position
If the background image disturbs the text, i.e. if the text cannot be read clearly due to the
image in the background, we can set the position of the background image.
Example:

body {
background-image :url(“CoderDecoder.jpg");
background-repeat : no-repeat;
background-position :right top;
}
CSS PROPERTIES
Text Alignment
We can either align the text to the left, right, center or we can make it justified.
Example-
p { text-align : left;}
h1{text-align : center;}
Text Color
The color property is used to set the color
of text.
Example-
body{ color : blue;}
p1 { color : magenta;}
CSS PROPERTIES
Text Formatting

The following properties can be used for formatting text :

1. Text Color
2. Text Alignment
3. Text Decoration
4. Text Transformation
5. Text Indentation
CSS PROPERTIES
Text Decoration
You can use text-decoration property to set or remove decorations from text.
Example-
p {text-decoration:overline;}
p {text-decoration:line-through;}
p {text-decoration:underline;}

Text Transformation
You can use text-transform property to
specify uppercase and lowercase letters of
any text.
Example-
h1 {text-transform:uppercase;}
h2 {text-
transform:lowercase;} p {text-
CSS PROPERTIES
CSS Font Size

You can use the font-size property to set the size of text. The font-size value can be
absolute or it can be relative.

Example
h1 {

font-
size:
30px;
}

p{
CSS PROPERTIES
CSS Links

You can use CSS styles to style any link. Links can be styled in different ways
by using any CSS property like color, font-family etc.

Links can be in one of the following states :

 a : link – Unvisited link


 a : visited – A link that the user has visited
 a : hover – A link over which the mouse pointer is moving
 a : active – A link, which has been just clicked
CSS PROPERTIES
CSS Links
a{ font-weight: bold; }
a : link { color: black; }
a : visited {
}
color : gray;
Styling Links
a:hover { link - before a visit
text-decoration: none; visited - after it has been visited
color: white; hover - when your mouse is over it but you have
background-color: navy; not clicked
active - you have clicked it and you have not yet
}
seen the new page
a : active {
color: aqua;
background-
color : navy;
CSS PROPERTIES
CSS List
We can use CSS list properties for

 Setting different list item markers for ordered lists

 Setting different list item markers for unordered lists


 Set an image as the list item marker

Values

 list-style-type
 list-style-image
CSS PROPERTIES
CSS Border
You can use the CSS Border properties to specify the style and color of an element’s
border.

Values
1. border-style
2. border-width
3. border-color
CSS PROPERTIES
CSS Margin
Using CSS Margin properties you can specify the space around
elements.

Values:
margin-top:50px;

margin-bottom:30px;

margin-right:25px;

margin-left:10px;
THANK
YOU

You might also like