KEMBAR78
CSS Demo - One HTML Page - Multiple Styles! | PDF | Html | Html Element
Scribd
Upload
6 views18 pages

CSS Demo - One HTML Page - Multiple Styles!

good for basic knowledge

Uploaded by

Kashi Koji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views18 pages

CSS Demo - One HTML Page - Multiple Styles!

good for basic knowledge

Uploaded by

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

CSS Introduction

CSS is the language we use to style a Web page.

What is CSS?

 CSS stands for Cascading Style Sheets Why Use CSS?


 CSS describes how HTML elements are to be displayed on
scren, paper, or in other media CSS is used to define styles for your web pages, including the
 CSS saves a lot of work. It can control the layout of design, layout and variations in display for different devices and
multiple web pages all at once screen sizes.
 External stylesheets are stored in CSS files

CSS Example

Welcome to My Homepage
CSS Demo - One HTML Page - Use the menu to select different Stylesheets

Multiple Styles! Style sheet 1


Same Page Side-Bar
Style sheet 2
Different
Here we will show one HTML page displayed with four different Style sheet 3
Stylesheets Lorem ipsum dolor
sit amet,
stylesheets. Click on the "Stylesheet 1", "Stylesheet 2", Style sheet 4 consectetuer
"Stylesheet 3", "Stylesheet 4" links below to see the different No Style sheet
This is a demonstration of how
different stylesheets can change adipiscing elit, sed
styles: the layout of your HTML page. You diam nonummy
can change the layout of this
page by selecting different
nibh euismod
stylesheets in the menu, or by tincidunt ut laoreet
selecting one of the following
links:
dolore magna
Stylesheet1, Stylesheet2, Styleshe aliquam erat
et3, Stylesheet4. volutpat.

No Styles

This page uses DIV elements to


group different sections of the
HTML page. Click here to see how
the page looks like with no
stylesheet:
No Stylesheet.
</head>
My First CSS Example
<body>
This is a paragraph.

<!DOCTYPE html> <h1>My First CSS Example</h1>

<html> <p>This is a paragraph.</p>

<head>

<style> </body>

body { </html>

background-color: lightblue;

CSS Solved a Big Problem


h1 {

color: white; HTML was NEVER intended to contain tags for formatting a web
page!
text-align: center;
HTML was created to describe the content of a web page, like:
}
<h1>This is a heading</h1>

p{
<p>This is a paragraph.</p>

font-family: verdana; When tags like <font>, and color attributes were added to the
HTML 3.2 specification, it started a nightmare for web developers.
font-size: 20px; Development of large websites, where fonts and color
information were added to every single page, became a long and
} expensive process.
</style>
To solve this problem, the World Wide Web Consortium (W3C)
created CSS.

CSS removed the style formatting from the HTML page!

If you don't know what HTML is, we suggest that you read our HTML
Tutorial. 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


CSS Saves a Lot of Work! declaration blocks are surrounded by curly braces.

The style definitions are normally saved in external .css files.


Example
With an external stylesheet file, you can change the look of an
entire website by changing just one file!
In this example all <p> elements will be center-aligned, with a red text
CSS Syntax color:

p{
color: red;
A CSS rule consists of a selector and a declaration block.
text-align: center;
}

Example Explained
CSS Syntax
 p is a selector in CSS (it points to the HTML element you
want to style: <p>).
 color is a property, and red is the property value
 text-align is a property, and center is the property value

You will learn much more about CSS selectors and CSS properties in the
next chapters!

The CSS element Selector


CSS Selectors The element selector selects HTML elements based on the
element name.

A CSS selector selects the HTML element(s) you want to style. Example

CSS Selectors Here, all <p> elements on the page will be center-aligned, with a red
text color:
CSS selectors are used to "find" (or select) the HTML elements
you want to style.

We can divide CSS selectors into five categories: p{


text-align: center;
color: red;
 Simple selectors (select elements based on name, id, }
class)
 Combinator selectors (select elements based on a specific
relationship between them)
 Pseudo-class selectors (select elements based on a certain
state)
The CSS id Selector
 Pseudo-elements selectors (select and style a part of an
element)
The id selector uses the id attribute of an HTML element to select
 Attribute selectors (select elements based on an attribute
a specific element.
or attribute value)
The id of an element is unique within a page, so the id selector is
This page will explain the most basic CSS selectors. used to select one unique element!
To select an element with a specific id, write a hash (#) Example
character, followed by the id of the element.

In this example all HTML elements with class="center" will be red and
Example center-aligned:

The CSS rule below will be applied to the HTML element with .center {
id="para1": text-align: center;
color: red;
}
#para1 {
text-align: center; You can also specify that only specific HTML elements should be
color: red; affected by a class.
}

Example
Note: An id name cannot start with a number!

In this example only <p> elements with class="center" will be red and
center-aligned:

p.center {
text-align: center;
The CSS class Selector color: red;
}
The class selector selects HTML elements with a specific class
attribute. HTML elements can also refer to more than one class.

To select elements with a specific class, write a period (.)


character, followed by the class name. Example
In this example the <p> element will be styled according to Look at the following CSS code (the h1, h2, and p elements have
class="center" and to class="large": the same style definitions):

h1 {
<p class="center large">This paragraph refers to two classes.</p> text-align: center;
color: red;
}

Note: A class name cannot start with a number! h2 {


text-align: center;
color: red;
}

p{
The CSS Universal Selector text-align: center;
color: red;
The universal selector (*) selects all HTML elements on the page. }

It will be better to group the selectors, to minimize the code.


Example
To group selectors, separate each selector with a comma.

The CSS rule below will affect every HTML element on the page:
Example

*{
text-align: center; In this example we have grouped the selectors from the code above:
color: blue;
}
h1, h2, p {
text-align: center;
color: red;
}
The CSS Grouping Selector

The grouping selector selects all the HTML elements with the
same style definitions.
All CSS Simple Selectors External styles are defined within the <link> element, inside the
<head> section of an HTML page:

Selector Example Example description


How To Add CSS #id #firstname Selects the element with
id="firstname" <!

.class .intro Selects all elements with


class="intro"
When a browser reads a style sheet, it will format the HTML element.class p.intro Selects only <p> elements with
document according to the information in the style sheet. class="intro"

* * Selects all elements


element p Selects all <p> elements
Three Ways to Insert CSS

There are three ways of inserting a style sheet: element,element, div, p Selects all <div> elements and all
.. <p> elements

 External CSS
 Internal CSS
 Inline CSS DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
External CSS <body>

With an external style sheet, you can change the look of an entire <h1>This is a heading</h1>
website by changing just one file! <p>This is a paragraph.</p>

Each HTML page must include a reference to the external style


sheet file inside the <link> element, inside the head section. </body>
</html>

Example An external style sheet can be written in any text editor, and
must be saved with a .css extension.
The external .css file should not contain any HTML tags. The internal style is defined inside the <style> element, inside
the head section.
Here is how the "mystyle.css" file looks:

Example

"mystyle.css" Internal styles are defined within the <style> element, inside the
<head> section of an HTML page:

body {
background-color: lightblue;
<!DOCTYPE html>
}
<html>
<head>
h1 {
<style>
color: navy;
body {
margin-left: 20px;
background-color: linen;
}
}

h1 {
Note: Do not add a space between the property value (20) and the unit color: maroon;
(px): margin-left: 40px;
Incorrect (space): margin-left: 20 px; }
Correct (no space): margin-left: 20px; </style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Internal CSS

An internal style sheet may be used if one single HTML page has </body>
a unique style. </html>
Multiple Style Sheets

If some properties have been defined for the same selector


Inline CSS (element) in different style sheets, the value from the last read
style sheet will be used.
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 Assume that an external style sheet has the following style for the
element. The style attribute can contain any CSS property. <h1> element:

Example h1 {
color: navy;
}
Inline styles are defined within the "style" attribute of the relevant
element:
Then, assume that an internal style sheet also has the following style
for the <h1> element:
<!DOCTYPE html>
<html>
<body> h1 {
color: orange;
}
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>
Example

Tip: An inline style loses many of the advantages of a style sheet (by
mixing content with presentation). Use this method sparingly. If the internal style is defined after the link to the external style sheet,
the <h1> elements will be "orange":
<head> 1. Inline style (inside an HTML element)
<link rel="stylesheet" type="text/css" href="mystyle.css"> 2. External and internal style sheets (in the head section)
<style>
h1 {
3. Browser default
color: orange;
} So, an inline style has the highest priority, and will override
</style> external and internal styles and browser defaults.
</head>
CSS Comments

Example

CSS comments are not displayed in the browser, but they can
However, if the internal style is defined before the link to the external
help document your source code.
style sheet, the <h1> elements will be "navy":

<head>
<style> CSS Comments
h1 {
color: orange; Comments are used to explain the code, and may help when you
} edit the source code at a later date.
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css"> Comments are ignored by browsers.
</head>
A CSS comment is placed inside the <style> element, and starts
with /* and ends with */:

Cascading Order
Example
What style will be used when there is more than one style
specified for an HTML element?
/* This is a single-line comment */
p{
All the styles in a page will "cascade" into a new "virtual" style
color: red;
sheet by the following rules, where number one has the highest
}
priority:
You can add comments wherever you want in the code: <!DOCTYPE html>
<html>
<head>
Example <style>
p{
color: red; /* Set text color to red */
p{ }
color: red; /* Set text color to red */ </style>
} </head>
<body>
Comments can also span multiple lines:
<h2>My Heading</h2>

Example <!-- These paragraphs will be red -->


<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
/* This is <p>CSS comments are not shown in the output.</p>
a multi-line
comment */
</body>
p{ </html>
color: red;
} CSS Colors

HTML and CSS Comments Colors are specified using predefined color names, or RGB, HEX,
HSL, RGBA, HSLA values.
From the HTML tutorial, you learned that you can add comments
to your HTML source by using the <!--...--> syntax.

In the following example, we use a combination of HTML and CSS


comments: CSS Color Names

In CSS, a color can be specified by using a predefined color name:


Example
CSS Text Color

You can set the color of text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed


diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
HTML support 140 standard color names.
Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.

CSS Background Color


Example
You can set the background color for HTML elements:

Hello World <h1 style="color:Tomato;">Hello World</h1>


<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.

CSS Border Color


Example
You can set the color of borders:

<h1 style="background-color:DodgerBlue;">Hello World</h1> Hello World


<p style="background-color:Tomato;">Lorem ipsum...</p>
Hello World
Hello World

Example

Example
<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>

CSS Color Values <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>


<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
In CSS, colors can also be specified using RGB values, HEX
values, HSL values, RGBA values, and HSLA values:

Same as color name "Tomato": CSS RGB Colors

An RGB color value represents RED, GREEN, and BLUE light


sources.

RGB Value

In CSS, 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 black, set all color parameters to 0, like this: rgb(0, 0,


0).

To display white, set all color parameters to 255, like this:


rgb(255, 255, 255).

Experiment by mixing the RGB values below:

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):

Experiment by mixing the RGBA values below:

Shades of gray are often defined using equal values for all the 3
light sources:
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).

To display black, set all values to 00, like this: #000000.

To display white, set all values to ff, like this: #ffffff.

Experiment by mixing the HEX values below:


rgba

(255, 99, 71, 0.5)

CSS HEX Colors

A hexadecimal color is specified with: #RRGGBB, where the RR


(red), GG (green) and BB (blue) hexadecimal integers specify the
components of the color.

HEX Value
3 Digit HEX Value
In CSS, a color can be specified using a hexadecimal value in the
form:
Sometimes you will see a 3-digit hex code in the CSS source.
#rrggbb
The 3-digit hex code is a shorthand for some 6-digit hex codes.
The 3-digit hex code has the following form: HSL stands for hue, saturation, and lightness.

#rgb

Where r, g, and b represent the red, green, and blue components


with values between 0 and f. HSL Value

The 3-digit hex code can only be used when both the values (RR, In CSS, a color can be specified using hue, saturation, and
GG, and BB) are the same for each component. So, if we have lightness (HSL) in the form:
#ff00cc, it can be written like this: #f0c.
hsl(hue, saturation, lightness)
Here is an example:
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is
green, and 240 is blue.
Example
Saturation is a percentage value. 0% means a shade of gray, and
100% is the full color.
body {
background-color: #fc9; /* same as #ffcc99 */ Lightness is also a percentage. 0% is black, 50% is neither light
} or dark, 100% is white

h1 { Experiment by mixing the HSL values below:


color: #f0f; /* same as #ff00ff */
}

p{
color: #b58; /* same as #bb5588 */
}

CSS HSL Colors

Saturation
Saturation can be described as the intensity of a color. means 50% light (neither dark nor light) and 100% means full
lightness (white).
100% is pure color, no shades of gray.

50% is 50% gray, but you can still see the color. Example

0% is completely gray; you can no longer see the color.

Example
Shades of Gray

Shades of gray are often defined by setting the hue and


saturation to 0, and adjust the lightness from 0% to 100% to get
darker/lighter shades.

Example

Lightness

The lightness of a color can be described as how much light you HSLA Value
want to give the color, where 0% means no light (black), 50%
HSLA color values are an extension of HSL color values with an
alpha channel - which specifies the opacity for a color.

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent)


and 1.0 (not transparent at all):

Experiment by mixing the HSLA values below:

You might also like