Ascading Tyle Heet: 05/28/2024 Cascading Style Sheet

Cascading Style Sheet
05/28/2024 Cascading Style Sheet

CSS Introduction
CSS stands for Cascading Style Sheets
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 Introduction
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.
HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

CSS Introduction
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 browsers.
A CSS comment starts with /* and ends with */. Comments can also span
multiple lines:
p{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
CSS Syntax and Selectors
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.
A CSS declaration always ends with a semicolon, and

declaration blocks are surrounded by curly braces.

CSS Introduction
Three Ways to use CSS in a Web Page
External style sheet
Internal style sheet
Inline style

CSS Introduction
Inline Styles
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The
style attribute can contain any CSS property.
<h1 style="color:blue;margin-left:30px;">
This is a heading.
</h1>
CSS Introduction
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head> section
of an HTML page:
<head>
<style>
body
{
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
05/28/2024 </style> Cascading Style Sheet
</head>
CSS Introduction
External Style Sheet
With an external style sheet, you can change the look of an entire website by
changing just one file!
Each page must include a reference to the external style sheet file inside the <link>
element. The <link> element goes inside the <head> section:
<head> Here is how the "myStyle.css" looks:

Body
<link rel="stylesheet" type=
{
"text/ background-color: lightblue;
css" href="mystyle.css"> }
</head>
h1 {
color: navy;
margin-left: 20px;
}
CSS Introduction
Cascading Order
What style will be used when there is more than one style specified for an HTML
element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual"
style sheet by the following rules, where number one has the highest priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
So, an inline style (inside a specific HTML element) has the highest priority, which
means that it will override a style defined inside the <head> tag, or in an external
style sheet, or a browser default value.

CSS Introduction
CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on
their element name, id, class, attribute, and more.
Type of Selectors
The Element Selector
The ID Selector
The Class Selector

CSS Introduction
CSS Selectors
The Element Selector

The element selector selects elements based on the element name.
You can select all <p> elements on a page like this (in this case, all <p>
elements will be center-aligned, with a red text color):
P{
text-align: center;
color: red;
}

CSS Introduction
CSS Selectors
The id Selector
The id selector uses the id attribute of an HTML element to select a specific
element.
The id of an element should be 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.
The style rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: red;
05/28/2024
} Cascading Style Sheet
CSS Introduction
CSS Selectors
The class Selector

The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by
the name of the class.
In the example below, all HTML elements with class="center" will be red and
center-aligned:
.center {
text-align: center;
color: red;
}
CSS Introduction
The class Selector
You can also specify that only specific HTML elements should be affected
by a class.
In the example below, only <p> elements with class="center" will be

center-aligned:
HTML elements can also refer to more than one class.
p.Center <p class="center large">

{ This paragraph refers to
text-align: center; two classes.
color: red; </p>
}
CSS Introduction
It will be better to group the selectors, to minimize the
code.
To group selectors, separate each selector with a comma.
In the example below we have grouped the selectors from

the code above:
h1, h2, p
{
text-align: center;
color: red;
}
CSS Background
Background Color Background Image
body { body {
background-image: url("img_tree.png");
background- background-repeat: no-repeat;
color: lightblue; background-position: right top;
background-attachment: fixed;
} }
With CSS, a color is most often body {
specified by: background: #ffffff
a valid color name - like "red" url("img_tree.png") no-repeat
a HEX value - like "#ff0000" right top;
an RGB value - like "rgb(255,0,0)" }
CSS Box Modal
The CSS Box Model
In CSS, the term "box model" is used when talking about design
and layout.
The CSS box model is essentially a box that wraps around every
HTML element.
It consists of:
margins,
outline
borders,
padding, and
the actual content.
CSS Box Modal
CSS Box Modal
Content - The content of the
box, where text and images div {
appear width: 300px;
Padding - Clears an area border: 15px solid green;
around the content. The padding: 50px;
padding is transparent margin: 20px;
Border - A border that goes }
around the padding and
content
Margin - Clears an area
outside the border. The
margin is transparent
CSS Box Modal
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
CSS Padding
Padding is used to create space around an element's
content, inside of any defined borders. With CSS, you
have full control over the padding. There are
properties for setting the padding for each side of an
element (top, right, bottom, and left).
length - specifies a padding in px,
pt, cm, etc.
Padding - Individual Sides % - specifies a padding in % of the
•padding-top width of the containing element
•padding-right inherit - specifies that the padding
•padding-bottom should be inherited from the
•padding-left parent element
CSS Padding
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
CSS Border
The CSS border properties allow you to specify the style, width, and
color of an element's border
The following values are allowed:

•dotted - Defines a dotted border
•dashed - Defines a dashed border
•solid - Defines a solid border
•double - Defies a double border
•groove - Defines a 3D grooved border.
• The effect depends on the border-color value
•ridge - Defines a 3D ridged border.
•inset - Defines a 3D inset border.
•outset - Defines a 3D outset border.
•none - Defines no border
•hidden - Defines a hidden border
CSS Border
The CSS border properties allow you to specify the style, width, and
color of an element's border
p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
CSS Border
border: 5px solid red; Rounded Borders
p{ p{
border-left: 6px solid red; border: 2px solid red;
background-color: lightgrey; border-radius: 5px;
} }
p{ p{
border-bottom: 6px solid red; border-style: solid;
background-color: lightgrey; border-left-width: 15px;
} }
CSS Border
p.one {
border-style: solid;
border-color: #0000ff;
}
p.two {
border-color: #ff0000 #0000ff;
}
p.three {
border-color: #ff0000 #00ff00 #0000ff;
}
p.four {
border-color: #ff0000 #00ff00 #0000ff
rgb(250,0,255);
}
CSS Outline
An outline is a line drawn outside the element's border.
CSS Outline
CSS has the following outline properties:
•outline-style
•outline-color
•outline-width
•outline-offset
•outline
CSS Outline
Outline Style
•dotted - Defines a dotted outline

•dashed - Defines a dashed outline
•solid - Defines a solid outline
•double - Defines a double outline
•groove - Defines a 3D grooved outline
•ridge - Defines a 3D ridged outline
•inset - Defines a 3D inset outline
•outset - Defines a 3D outset outline
•none - Defines no outline
•hidden - Defines a hidden outline
CSS Outline
Outline width
The outline-width property specifies the width of the

outline, and can have one of the following values:
thin (typically 1px)

medium (typically 3px)
thick (typically 5px)
A specific size (in px, pt, cm, em, etc)
CSS Outline
Outline Color
The outline-color property is used to set the color of

the outline.
The color can be set by:
•name - specify a color name, like "red"
•HEX - specify a hex value, like "#ff0000"
•RGB - specify a RGB value, like "rgb(255,0,0)"
•HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
•invert - performs a color inversion (which ensures that
the outline is visible, regardless of color background)
CSS Outline
Outline offset
The outline-offset property adds space between an

outline and the edge/border of an element. The space
between an element and its outline is transparent.
The following example specifies an outline 15px outside

the border edge:
p{
outline: 1px solid red;
outline-offset: 15px;
}
CSS Margin
The CSS margin properties are used to generate space around
elements.
The margin properties set the size of the white space outside
the border.
With CSS, you have full control over the margins. There are
CSS properties for setting the margin for each side of an element
(top, right, bottom, and left).
CSS has properties for specifying the margin for each side of an
element:
•margin-top
•margin-right
•margin-bottom
•margin-left
CSS Margin
All the margin properties can have the following values:
auto - the browser calculates the margin
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element

inherit - specifies that the margin should be inherited from the parent elemen
p{ p{
margin-top: 100px; margin: 100px 150px 100px 80px;
margin-bottom: 100px; }
margin-right: 150px; div {
margin-left: 80px; width: 300px;
} margin: auto;
border: 1px solid red;
CSS LINK
Styling Links
Links can be styled with any CSS property (e.g. color, font-
family, background, etc.).
•a:link - a normal, unvisited link
•a:visited - a link the user has visited
•a:hover - a link when the user mouses over it
•a:active - a link the moment it is clicked

CSS LINK
a:link {
color: red;
} When setting the style for
several link states, there
/* visited link */ are some order rules:
a:visited {
color: green; a:hover MUST come after
} a:link and a:visited
/* mouse over link */

a:hover { a:active MUST come after
color: hotpink; a:hover
}
/* selected link */
a:active {
color: blue;
}
CSS LINK
Text Decoration The property is mostly used to remove
underlines from links:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
CSS LINK
Background property can be used to specify a background
color for links:
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
CSS LINK
Advanced Link Button a:link, a:visited {
background-color: white;
a:link, a:visited { color: black;
background-color: #f44336; border: 2px solid green;
color: white; padding: 10px 20px;
padding: 14px 25px; text-align: center;
text-align: center; text-decoration: none;
text-decoration: none; display: inline-block;
display: inline-block; }
}
a:hover, a:active {
a:hover, a:active { background-color: green;
background-color: red; color: white;
} }
CSS Table
The look of an HTML table can be greatly improved
with CSS
Table .tclass #tid

{ { {
} } }
CSS Table
with CSS
table, th, td
{
border: 1px solid black;
}
CSS Table
with CSS
Table
{
width:100%;
height:50px;
border-collapse: collapse;
}
CSS Table
with CSS
th,td
{
text-align:center;
vertical-align:center;
padding:15px;
border-bottom: 1px solid #ddd;
}
CSS Table
with CSS
tr:hover
{
background-color:#f5f5f5;
}
CSS Table
Stripped Table
tr:nth-child(even)
{
background-color: #f2f2f2;
}
CSS Table
Table Color
th
{
background-color: #f2f2f2;
color:white;
}
CSS Table
Responsive Table
A responsive table will display a horizontal scroll

bar if the screen is too small to display the full
content:
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
text-align: center;
text-align:justify; CSS Text
text-decoration:none;
text-decoration:overline;
text-decoration:underline;
text-decoration:line-through;
text-transform:smallcase;
text-transform:uppercase;
text-transform:capitalize;
text-indent:50px
text-shadow: 3px 2px red;
CSS Text
letter-spacing:3px;
letter-spacing:-3px;
line-height:1.8;
direction:rtl;
word-spacing:5px;
word-spacing:-5px
CSS Font
font-family: “time new roman”, times, serif;
font-style : normal / italic /oblique;
font-size: 40px;
font-size: 2em;
font-weight : normal / bold / lighter;
font-size: 10vw;
font-variant: normal / small-caps

CSS List
ul.a {
list-style-type: circle/sqaure/upper-roman/lower-alpha/none;
list-style-image: url('sqpurple.gif');
list-style-position: outside/inside;
margin:0;
padding:0;
list-style: square inside url("sqpurple.gif");
}
ol {
background: #ff9999;
padding: 20px;
CSS List
}
ul {
background: #3399ff; padding: 20px;
}
ol li {
background: #ffe5e5; padding: 5px; margin-left: 35px;
}
ul li {
background: #cce5ff; margin: 5px;
}
THANKS

Ascading Tyle Heet: 05/28/2024 Cascading Style Sheet

Uploaded by

Copyright:

Available Formats

Ascading Tyle Heet: 05/28/2024 Cascading Style Sheet

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ascading Tyle Heet: 05/28/2024 Cascading Style Sheet

Uploaded by

Copyright:

Available Formats

Cascading Style Sheet

05/28/2024 Cascading Style Sheet

CSS stands for Cascading Style Sheets

CSS describes how HTML elements are to be displayed on

CSS saves a lot of work. It can control the layout of multiple

05/28/2024 Cascading Style Sheet

Why Use CSS?

HTML was created to describe the content of a web page, like:

05/28/2024 Cascading Style Sheet

The declaration block contains one or more declarations

Each declaration includes a CSS property name and a

A CSS declaration always ends with a semicolon, and

05/28/2024 Cascading Style Sheet

Internal style sheet

05/28/2024 Cascading Style Sheet

<head> Here is how the "myStyle.css" looks:

1. Inline style (inside an HTML element)

2. External and internal style sheets (in the head section)

05/28/2024 Cascading Style Sheet

The Element Selector

The Class Selector

05/28/2024 Cascading Style Sheet

The Element Selector

05/28/2024 Cascading Style Sheet

The id of an element should be unique within a page, so the id selector is used to

The class Selector

In the example below, only <p> elements with class="center" will be

p.Center <p class="center large">

To group selectors, separate each selector with a comma.

In the example below we have grouped the selectors from

The following values are allowed:

p.dotted {border-style: dotted;}

•dotted - Defines a dotted outline

The outline-width property specifies the width of the

thin (typically 1px)

The outline-color property is used to set the color of

The outline-offset property adds space between an

The following example specifies an outline 15px outside

length - specifies a margin in px, pt, cm, etc.

% - specifies a margin in % of the width of the containing element

•a:link - a normal, unvisited link

•a:visited - a link the user has visited

•a:hover - a link when the user mouses over it

•a:active - a link the moment it is clicked

/* mouse over link */

Table .tclass #tid

A responsive table will display a horizontal scroll

font-weight : normal / bold / lighter;

font-variant: normal / small-caps

list-style: square inside url("sqpurple.gif");

05/28/2024 Cascading Style Sheet

You might also like