Scribd
Upload
6 views68 pages

Css

The document provides an overview of Cascading Style Sheets (CSS), detailing its purpose in styling web pages, advantages, and methods of inclusion in HTML documents. It covers various CSS selectors, properties, and techniques such as inline, embedded, and external styles, as well as advanced selectors and background properties. Additionally, it discusses border properties, including border images and drop shadows, highlighting the flexibility and efficiency of CSS in web design.

Uploaded by

anwarraja.a2023ai-ds
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views68 pages

Css

The document provides an overview of Cascading Style Sheets (CSS), detailing its purpose in styling web pages, advantages, and methods of inclusion in HTML documents. It covers various CSS selectors, properties, and techniques such as inline, embedded, and external styles, as well as advanced selectors and background properties. Additionally, it discusses border properties, including border images and drop shadows, highlighting the flexibility and efficiency of CSS in web design.

Uploaded by

anwarraja.a2023ai-ds
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 68

Cascading Style sheets

Introduction
➢CSS (Cascading Style Sheets) is used to style and lay out web pages.
➢For example, to alter the font, color, size, and spacing of your content, split it into multiple
columns, or add animations and other decorative features.
➢Uses:
➢You can easily apply same style rules on multiple elements.
➢You can control the presentation of multiple pages of a website with a single style sheet.
➢You can present the same page differently on different devices.
➢You can style dynamic states of elements such as hover, focus, etc
Advantages of Using CSS
➢CSS Save Lots of Time
➢Easy Maintenance
➢Pages Load Faster
➢Superior Styles to HTML
➢Multiple Device Compatibility
Including CSS in HTML Documents
CSS can either be attached as a separate document or embedded in the HTML document
itself.
There are three methods of including CSS in an HTML document:
Inline styles — Using the style attribute in the HTML start tag.
Embedded styles — Using the <style> element in the head section of a document.
External style sheets — Using the <link> element, pointing to an external CSS file.
INLINE STYLE SHEETs

❑Inline styles are used to apply the unique style rules to an element by putting the CSS rules
directly into the start tag.
❑The style attribute includes a series of CSS property and value pairs. Each "property:
value" pair is separated by a semicolon (;)
Example
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</div>
Output - INLINE STYLE SHEETs

This is a heading
This is a paragraph.
This is some text content.
Disadvantages - INLINE STYLE SHEETs

❑Adding CSS rules to every HTML element is time-consuming and makes your HTML
structure messy.
Example:
<!DOCTYPE html>
<html>
<body style="background-color:black;">

<h1 style="color:white;padding:30px;">SRI ESHWAR COLLEGE OF ENGINEERING</h1>


<p style="color:white;">Department of IT</p>

</body>
</html>
Embedded or Internal style sheets

❑Embedded or internal style sheets only affect the document they are embedded in.
❑Embedded style sheets are defined in the <head> section of an HTML document using
the <style> element.
Example - Embedded style sheets
<!DOCTYPE html>
<h1>Welcome to SECE</h1>​
<html lang="en"> <p>Department of IT</p>​
<head> </body>​
</html>
<meta charset="utf-8">
<title>Example of CSS Embedded Style Sheet</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style>
</head>
<body>
External style sheets

❑An external style sheet holds all the style rules in a separate document that you can link
from any HTML file on your site.
❑External style sheets are the most flexible because you can change the look of an entire
website by changing just one file.
❑You can attach external style sheets in two ways — linking and importing.
❑An external style sheet can be linked to an HTML document using the <link> tag.
❑The <link> tag goes inside the <head> section.
Linking External Style Sheets

Style.css
body {
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1 {
color: orange;
}
Linking External Style Sheets
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Importing External Style Sheets
❑The @import rule is another way of loading an external style sheet.
❑The @import statement instructs the browser to load an external style sheet and use its
styles.
❑Two Ways:
❑Other CSS rules may still be included in the <style> element.
❑Another way , you can use the @import rule to import a style sheet within another style
sheet.
Importing External Style Sheets
<head>
<style>
@import url("css/style.css");
p{
color: blue;
font-size: 16px;
}
</style>
</head>
Importing External Style Sheets

<body>
<h1>The styles for this heading are defined in the imported style sheet</h1>
<p>The styles for this paragraph are defined in the embedded style sheet.</p>
</body>
Output
Importing External Style Sheets
<style>
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}
</style>
Importing External Style Sheets

<body>​
<div>​
<h1>Importing External Style Sheet</h1>​
<p>The layout styles of these HTML element is defined in 'layout.css' and
colors in 'color.css'.</p>​
</div>​
</body>​
</html>
CSS selectors are part of a CSS
rule that allows you to select
the contents you want to style.
CSS Selectors
• A CSS stylesheet consists of a set of rules that are interpreted by the web
browser.
• Then applied to the corresponding elements such as paragraphs, headings,
etc. in the document.
• A CSS rule have two main parts, a selector and one or more declarations:
CSS Selectors Types
• Basic Selectors
• Advanced Selectors
• Combinators
Basic Selectors Types
• Element Selector
• Class Selector
• ID Selector
• Universal Selector
• Group Selector
Element Selector
• Selects all elements of a specific type.
Class Selector
Class selectors are designated with a . (period)
before the class name when being used in a selector
ID Selector
• The id selector is used to define style rules for a single or unique element.
• The id selector is defined with a hash sign (#) immediately followed by the id
value.
Universal Selector
• Universal selectors will select all elements within a tag
Group Selector
• Selects multiple elements at once.
Advanced Selector Types

Pseudo- Pseudo- Attribute


elements classes selectors
Pseudo-Elements
• Pseudo-elements permits formatting based on information that lies outside
of the document.
• Five total pseudo-elements:

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection
Pseudo-Classes
Pseudo classes are added to selectors to specify a certain state of an element.
List of Pseudo- Classes:
• :link
• :visited
• :active
• :hover
• :focus
• :empty
• :target
• :checked
• :enabled
• :disabled
Attribute-Classes
Used to target elements based on the presence of and/or the value of HTML
attributes associated with the element.
Example
a[href]
a[href="http://www.google.com/"]
a[title~="sece"]
a[href^="http"]
a[href$=".com"] and a[href*="sece"
Combinators
Used to target elements based on their relationship with other elements.

• Descendant selector
• Child selector
• Adjacent sibling selector
• General sibling selector
Descendant Selector
A descendant selector can target all elements that are a descendant of a
specified element.
Child Selectors
A child selector is similar to a descendant, except it selects only immediate
children.
Adjacent Sibling Selectors
❑ The adjacent sibling selector is denoted using the plus symbol (+).
❑ This selector is used in cases where we want to target elements only when
the element is immediate proceeded by another targeted element.
General Sibling Selectors
A general sibling selector is much like an adjacent sibling selector, with the only
difference being that it selects all elements proceeding a targeted element
rather than one.
CSS Border
• The CSS border properties allow you to define the border area of an
element's box.
• Borders appear directly between the margin and padding of an element.
Border - Style
• The border-style property sets the style of a box's border such as: solid, dotted, etc.

• The border-style property can have the following


values: none, hidden, solid, dashed, dotted, double, inset, outset, groove,
and ridge.
Example
h1 {
border-style: dotted;
}
p{
border-style: ridge;
}
Border Width & Border Color
The border-width property specifies the width of the border area.
p{
border-style: dashed;
border-width: 10px;
}
The border-color property specifies the color of the border area.
p{
border-style: solid;
border-color: #ff0000;
}
The Border Shorthand Property
The border CSS property is a shorthand property for setting one or more of
the individual border properties border-width, border-
style and border-color in a single rule.
p{
border: 5px solid #00ff00;
}
CSS Colors
The color property defines the text color (foreground color in general) of an
element.
body {
color: #ff5722;
}
Examples
<body>
<style>
<h1>This is a heading</h1>
body { <p>This is a paragraph.</p>
color: #ff5722; <div class="text-green">This is a simple
piece of text.</div>
} </body>
.text-green { </html>
color: #008000;
}
</style>
</head>
Output
Defining CSS Colors
Colour formats are:
✓a color keyword - like "red", "green", "blue", "transparent", etc.
✓a HEX value - like "#ff0000", "#00ff00", etc.
Example
✓an RGB value - like "rgb(255, 0, 0)" h1 {
color: red;
}
p{
color: purple;
}
Defining CSS Colors
A six-digit code, preceded by a hash character, like #rrggbb
#ffffff represents white color and #000000 represents black color

h1 { h1 {
color: #ffa500; color: rgb(255, 165, 0);
} }
p{ p{
color: #00ff00; color: rgb(0, 255, 0);
} }
Example
<style> <body>
p.one { <p class="one">The border color of this paragraph is same
as the element's text color.</p>
color: #0000ff; <p class="two">The outline color of this paragraph is same
as the element's text color.</p>
border: 2px solid;
</body>
} </html>
p.two {
color: #00ff00;
outline: 2px solid;
}
</style>
</head>
Output
CSS Units – relative lengths
Relative length units specify a length relative to another length property.
Relative length units scales better between different rendering mediums.
CSS Background
The background CSS property is a shorthand property for setting the individual background
properties
✓background-image
✓background-position
✓background-size
✓background-repeat
✓background-attachment
✓background-origin
✓background-clip
✓background-color
CSS Background - Properties
Value Description
background- Specifies whether the background scrolls with the document, or remains fixed to
attachment the viewing area.
background-color Sets the background color of an element.
background-clip Specifies the area within which the background is painted.
background-image Sets one or several background images for an element.
background-origin Specifies the positioning area of the background images.
background- Sets the initial position of the background image.
position
background-repeat Specifies how background images are tiled after they have been sized and
positioned.
background-size Specifies the size of the background images.
CSS Background-Clip
The background-clip CSS property sets whether an element's background extends
underneath its border box, padding box, or content box.
background-clip: border-box;
The background extends to the outside edge of the border
background-clip: padding-box;
The background extends to the outside edge of the padding.
background-clip: content-box;
The background is painted within (clipped to) the content box.
background-clip: text;
The background is painted within (clipped to) the foreground text.
Example – background.html
<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">The background extends to the inside edge of the border.</p>
<p class="content-box">The background extends only to the edge of the content box.</p>
<p class="text">The background is clipped to the foreground text.</p>
Example – clip.css
p{
border: .8em darkviolet; .text {
border-style: dotted double; background-clip: text;
margin: 1em 0; color: rgba(0,0,0,.2);
padding: 1.4em; }
background: linear-gradient(60deg, red, yellow, red,
yellow, red);
font: 900 1.2em sans-serif;
text-decoration: underline;
}
.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }
Output
Background Properties - Example
Background.html
<body>
<h3>This is heading</h3>
<p id="firstPara">This is a paragraph</p>

<h3>This is second heading</h3>


<p id="secondPara">This is my second paragraph</p>

<h3>This is third heading</h3>


<p id="thirdPara">This is my third paragraph</p>
</body>
Background Properties - Example
#firstPara{
background-color: red;
height: 100px;
width:455px;
border: 4px solid green;
/* border-width: 4px;
border-color: green;
border-style: solid; */
border-radius: 11px;
}
Background Properties - Example
#secondPara{
background-color: rgb(58, 243, 98);
height: 100px;
width:455px;
border-top: 2px solid rgb(231, 22, 231);
border-right: 2px solid rgb(18, 10, 133);
border-bottom: 2px solid rgba(9, 144, 27, 0.774);
border-left: 2px solid rgb(156, 42, 13);
border-top-left-radius: 4px;
border-top-right-radius: 14px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 24px;
}
Background Properties - Example
#thirdPara{
height: 500px;
width:455px;
background-image: url('/img/download.png');
border: 2px solid red;
background-repeat: no-repeat; /* repeat-x and repeat-y will make it repeat on x and y axis */
/* background-position: 192px 34px; */
background-position: center center;
/* background-position: bottom right; */
/* background-position: top center; */
}
Output
Border Images
The border-image CSS property specifies how an image is to be used in
place of the border styles.
Value Description
border-image-source Specifies the location of the image to be used for the border.
border-image-slice Specifies the inward offsets from the top, right, bottom, and left edges of the
border image.
border-image-width Specifies the width of the border.
border-image-outset Specifies the amount by which the border image area extends beyond the
border box.
border-image-repeat Specifies how the middle part of the border image are scaled or tiled so that it
can match the size of the border.
Border Images - Example
<style>
.box {
width: 300px;
height: 150px;
border: 15px solid transparent;
border-image-source: url("/examples/images/border.png");
border-image-slice: 30;
border-image-repeat: round;
}
</style>
Border Images - References
Repeat -
https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-image
Slice -
https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-image2
CSS Drop Shadows
The CSS3 gives you an ability to add drop shadow effects to the elements.
CSS3 box-shadow Property
The box-shadow property can be used to add shadow to the element's boxes.
Syntax - box-shadow: offset-x offset-y blur-radius color;
✓offset-x — Sets the horizontal offset of the shadow.
✓offset-y — Sets the vertical offset of the shadow.
✓blur-radius — Sets the blur radius. The larger the value, the bigger the blur and
more the shadow's edge will be blurred.
✓color — Sets the color of the shadow.
CSS Drop Shadows - Example
.box{
.box{
width: 200px;
width: 200px;
height: 150px;
height: 150px;
background: #ccc; background: #000;
box-shadow: 5px 5px 10px #999; box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
} }
CSS Drop Shadows - Output
CSS Text Shadows
You can use the text-shadow property to apply the shadow effects on text.

h1 {
text-shadow: 5px 5px 10px #666;
}
h2 {
text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}
CSS Text Shadows - Output
h1 {
text-shadow: 5px 5px 10px #666;
}
h2 {
text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}

You might also like