Web - CSS 1.pptx

What is CSS?
CSS is the language we use to style an HTML document.
CSS describes how HTML elements should be displayed.
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

Three Ways to Insert CSS
External style sheet
Internal style sheet
Inline style

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:

An external style sheet can be written in any text editor. The file should
not contain any html tags. The style sheet file must be saved with a .css
extension.
Here is how the "mystyle.css" looks

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:

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.
The example below shows how to change the color and the left
margin of a <h1> element:

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.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>

CSS syntax
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
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}

Selectors
By element name:
p {
text-align: center;
color: red;
}
By element id:
#para1 {
text-align: center;
color: red;
}
By class name (class name is
center here):
.center {
text-align: center;
color: red;
}
Specific element with in a class:
p.center {
text-align: center;
color: red;
}

CSS colors
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem
ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi
enim...</p>
<h1 style="border:2px solid Tomato;">Hello
World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello
World</h1>
<h1 style="border:2px solid Violet;">Hello
World</h1>
<h1 style="background-color:rgb(255, 99,
71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%,
64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71,
0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%,
0.5);">...</h1>
By color names
By RGB values
By hex values
By RGBA
By HSL

RGB Value
In HTML, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color
between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its
highest value (255) and the others are set to 0.
To display the color black, all color parameters must be set to 0, like this:
rgb(0, 0, 0).
To display the color white, all color parameters must be set to 255, like this:
rgb(255, 255, 255).

HEX Value
In HTML, a color can be specified using a hexadecimal value in the
form:
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values
between 00 and ff (same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its
highest value (ff) and the others are set to the lowest value (00).

RGBA Value
RGBA color values are an extension of RGB color values with an
alpha channel - which specifies the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent)
and 1.0 (not transparent at all):

CSS Backgrounds
The CSS background properties are used to add background effects for elements.
•background-color
•background-image
•background-repeat
•background-attachment
•background-position
•background (shorthand property)

body {
background-color: lightblue;
}
body {
background-image: url("img_tree.png");
background-repeat: no-repeat; //repeat-x repeat-y
background-position: right top;
background-attachment: scroll; //fixed
}

CSS background - Shorthand property
To shorten the code, it is also possible to specify all the background properties in
one single property. This is called a shorthand property.
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
When using the shorthand property the order of the property values is:

CSS Border Style
The border-style property specifies what kind of border to display.
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
The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left 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;

The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three
pre-defined values: thin, medium, or thick:
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-width: medium;
}

p.one {
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}
p.two {
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}
p.three {
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and
35px left */
}

The CSS Box Model •Content - The content of
the box, where text and
images appear
•Padding - Clears an area
around the content. The
padding is transparent
•Border - A border that
goes around the padding
and content
•Margin - Clears an area
outside the border. The
margin is transparent
•Do it yourself – how to calculate
width and height of an element
https://www.w3schools.com/css/css_boxmod
el.asp

div {
width: 300px;
border: 15px solid
green;
padding: 50px;
margin: 20px;
}

CSS Margins
Margins are used to create space around elements, outside of any defined borders.

The CSS margin properties are used to create space around elements,
outside of any defined borders.
CSS has properties for specifying the margin for each side of an
element:
•p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
•p {
margin: 25px 50px 75px 100px;
}
• p {
margin: 25px;
}

CSS Padding
Padding is used to create space around an element's content, inside of any defined
borders.

div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

CSS Text Alignment
•text-align
•text-align-last
•direction
•vertical-align
div {
text-align: justify;
}

The vertical-align property sets the vertical alignment of an element.
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}

p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
overline;
line-through;
underline;
overline underline;

The CSS Text Spacing Properties

CSS Icons
The simplest way to add an icon to your HTML page, is with an icon library,
such as Font Awesome.
Add the name of the specified icon class to any inline HTML element (like <i>
or <span>).
All the icons in the icon libraries below, are scalable vectors that can be
customized with CSS (size, color, shadow, etc.)

To use the Font Awesome icons, add the following line inside the <head>
section of your HTML page:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">

CSS links
The four links states are:
•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
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}

The text-decoration property is mostly
used to remove underlines from links:

The background-color property can be
used to specify a background color for
links:

Advanced - Link Buttons
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<a href="default.asp"
target="_blank">This is a link</a>
</body>
</html>

Web - CSS 1.pptx

Related slideshows

More Related Content

Web - CSS 1.pptx

Editor's Notes