Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

css (1)

CSS, or Cascading Style Sheet, is a language used to style HTML tags and is essential for web design alongside HTML and JavaScript. It includes various selectors, such as element, id, class, and universal selectors, to apply styles to HTML elements, and can be added through inline, embedded, external, or import styles. CSS properties include font style, size, weight, color, and family, allowing for extensive customization of web page appearance.

Uploaded by

SIDDARTHA P.N.V
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

css (1)

CSS, or Cascading Style Sheet, is a language used to style HTML tags and is essential for web design alongside HTML and JavaScript. It includes various selectors, such as element, id, class, and universal selectors, to apply styles to HTML elements, and can be added through inline, embedded, external, or import styles. CSS properties include font style, size, weight, color, and family, allowing for extensive customization of web page appearance.

Uploaded by

SIDDARTHA P.N.V
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 35

CSS-Cascading Style Sheet

• CSS stands for Cascading Style Sheet.


• CSS is used to design HTML tags.
• CSS is a widely used language on the web.
• HTML, CSS and JavaScript are used for web
designing. It helps the web designers to apply
style on HTML tags.
CSS vs HTML
• CSS Syntax
• A syntax is basically a set of rules that
generally consists of a selector, a property and
a value, a CSS syntax contains a selector and a
declaration block
• If you want to style a text .It could be any tag
like h1, h2, h3, P etc.
These tags are called selector.
• selector: It is the points to the HTML tag at
which a style will be applied.
• Property: It is a type of attribute to determine
the style of HTML element. It could be any like
color, border, background, padding, etc.
• Value: It is assigned to the CSS properties. In the above
Picture, value "blue" is assigned to color property.
• Declaration block: contains one or more declarations (for
above example: color: blue; font-size: 25px ;) separated by
semicolon.
• Each declaration needs a CSS property which is a value,
separated by a colon.
• Declaration blocks are always written inside the curly
braces {} and always ends with semicolon (;) as mentioned
in the above example.
• Selector {property1: value; property2: value ;}
Example
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 style="color: blue; font-size:25px; text-
align:center;">Hello, Welcome to CSS class </h1>
</body>
</html>
CSS Selectors

• CSS Selectors are used to select any HTML


elements you want to style.
• You can select CSS selectors in html elements
in several different types:
• Element Selector
• Id Selector
• Class Selector
• Group Selector
• Universal Selector
Element Selector Example
<!DOCTYPE html>
<html> <head>
</head>
<body>
<h1 style=” Color: blue; Font-size: 25px ; ”>This
CSS will be applied on every Heading. </h1>
</body> </html>
output
Group Selectors

• h1, h2, h3, h4, h5, h6 { color: blue }


Applying Multiple Properties
• To apply more than one property separate each
declaration with a semi-colon.
• h1 { color:blue; font-family: arial, helvetica, "sans serif" }
h1 {
color: blue;
font-family: arial, helvetica, "sans serif";
font-size: 150%;
}
Group selector example
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2 {
text-align: center;
Font-size:30px;
color: red;
}
</style>
</head>
<body>
<h1>Hello . This is my first heading. </h1>
<h2> Hello . This is my Second heading.</h2>
<h3>Hello . This is my Third heading. </h3>
</body>
</html>
output
CSS Id Selector

• To write a hash(#) character, To select an


element with a particular Id, followed by the
Id of the element.
• The id selector is used to select one specific
element.
• The id of an element is unique within a
particular page, it is chosen to select a single,
unique element in a page.
CSS Id Selector
<!DOCTYPE html>
<html>
<head>
<style>
#Heading1 { text-align: center; color: blue; } </style>
</head>
<body>
<h1 id="Heading1">This is heading 1</h1> </body>
</html>
output
CSS Class Selector

• HTLML element is select by class selector with


a specific class attribute.
• Write a period (.) character, to select element
with a specific class followed by the specific
class name.
CSS Class Selector

<!DOCTYPE html>
<html>
<head>
<style>
.heading1 { text-align: center; color: Green; } </style>
</head>
<body>
<h1 class="heading1">This heading is green with centered
align.</h1>
</body>
</html>
output
CSS Universal Selector

• It selects all the elements on the pages.


• To select all the HTML elements on the page
we used universal selector (*).
CSS Universal Selector

<!DOCTYPE html>
<html>
<head>
<style>
* { color: blue; text-align:center; border:1px solid #000; }
</style>
</head>
<body>
<h2>This is my second heading</h2>
<h4>This is my fourth heading</h4>
</body>
</html>
output
Adding CSS
There are several choices for adding CSS to the
page
• Inline style
• Embedded style
• Import style
• External style
Inline style

<p style="color:olive;font-size:24px;">HTML
Styles with CSS</p>
embedded
<!DOCTYPE html>
<html>
<head> <body>
<title>My Example</title>
<style>
<h1>Embedded
body { Styles</h1>
background-color: darkslategrey; <p id="intro">Allow
color: azure; you to define styles for the
font-size: 1.1em;
}
whole document.</p>
h1 { <p
color: coral; class="colorful">This has a
} style applied via a
#intro {
font-size: 1.3em;
class.</p>
} </body>
.colorful { </html>
color: orange;
}
External style
• Commonly used style
• Style and html are in separate file
• To add an external stylesheet to a web page,
use the <link> tag, providing the URL of the
style sheet in the href attribute, as well
as rel="stylesheet“ is then linked to from
External style sheet example
external_p1.html
external_p1.css
<!DOCTYPE html>
<html>
<head> body {
<title>My Example</title> background-color: darkslategrey;
<link rel="stylesheet" href="C:\Users\ color: azure;
r_anisha\Desktop\external_p1.css"> font-size: 1.1em;
</head> }
<body>
<p id="intro">Allow you to define styles #intro {
for the whole document.</p> font-size: 1.3em;
<p class="colorful">This has a style appl }
ied via a class.</p>
.colorful {
</body>
color: orange;
</html>
}
• Note: href should refer the path of CSS
File
output
Import style
• CSS @import rule to import an external style
sheet.
• To do this, use the <style> tag.
<style>
@import "imported_style_sheet.css";
@import url("imported_style_sheet.css");
</style>
Import style
<!DOCTYPE html>
<html>
<head>
<title>My Example</title>
<style>
@import "external_p1.css";
</style>
</head>
<body>
<p id="intro">Allow you to define styles for the whole document.</p>
<p class="colorful">This has a style applied via a class.</p>
</body>
</html>

• Note: import give only file name no need of path.


output
CSS font
• The CSS font properties are :
• CSS Font style: This property defines how to
change font style like, italic, oblique or bold.
• CSS Font variant: It specifies that we can set
this property to text is either normal or small-
caps font.
• CSS Font color: This property defines how to
change or set the font color.
• CSS Font weight: This property allows to set
the font weight of the text present on an
HTML Page.
• CSS Font family: We can specify a list of font
names for the text contained inside an HTML
element, using font-family property.
• CSS Font size: This property is used to specify
a font size ( increase or decrease) of the text.
Font example
<!DOCTYPE html> </head>
<html> <body>
<head> <p class="para" >This is paragraph</p>
<style> </body>
.para </html>
{
font-family: Cambria;
font-size: medium;
font-weight: 900;
color: coral;
font-style: italic;
}
output

You might also like