Scribd
Upload
184 views9 pages

Introduction To CSS - Prelim

CSS (Cascading Style Sheets) allows styling and layout of HTML documents. There are three main ways to include CSS - external stylesheets, internal stylesheets, and inline styles. CSS selectors like element, id, class, and attribute selectors are used to target specific HTML elements for styling. Comments can be added to CSS to explain the code.

Uploaded by

Marck Lean
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
184 views9 pages

Introduction To CSS - Prelim

CSS (Cascading Style Sheets) allows styling and layout of HTML documents. There are three main ways to include CSS - external stylesheets, internal stylesheets, and inline styles. CSS selectors like element, id, class, and attribute selectors are used to target specific HTML elements for styling. Comments can be added to CSS to explain the code.

Uploaded by

Marck Lean
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/ 9

Introduction to CSS <p>This paragraph is styled with CSS.

</p>

What is CSS? </body>


 CSS stands for Cascading Style Sheets </html>
 CSS describes how HTML elements are to be
displayed on screen, paper, or in other CSS Selectors
media CSS selectors are used to "find" (or select) HTML
 CSS saves a lot of work. It can control the elements based on their element name, id, class,
layout of multiple web pages all at once attribute, and more.
 External stylesheets are stored in CSS files
 Styles for your web pages, including the 1. The element Selector
design, layout and variations in display for
different devices and screen sizes.  The element selector selects elements
based on the element name. You can select
CSS Syntax all <p> elements on a page like this (in this
A CSS rule-set consists of a selector and a case, all <p> elements will be center-
declaration block: aligned, with a red text color)

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p{
The selector points to the HTML element you want text-align: center;
to style. The declaration block contains one or color: red;
more declarations separated by semicolons. }
</style>
Each declaration includes a CSS property name and </head>
a value, separated by a colon. A CSS declaration <body>
always ends with a semicolon, and declaration
blocks are surrounded by curly braces. <p>Every paragraph will be affected by the
style.</p>
Example: <p id="para1">Me too!</p>
<p>And me!</p>
<!DOCTYPE html>
<html> </body>
<head> </html>
<style>
p{ 2. The id Selector
color: red;
text-align: center; The id selector uses the id attribute of an
} HTML element to select a specific element.
</style> The id of an element should be unique
</head> within a page, so the id selector is used to
<body> select one unique element!

<p>Hello World!</p>
To select an element with a specific id, color: red;
write a hash (#) character, followed by the }
id of the element. </style>
The style rule below will be applied to the </head>
HTML element with id="para1": <body>

Example: <h1 class="center">Red and center-aligned


heading</h1>
<!DOCTYPE html> <p class="center">Red and center-aligned
<html> paragraph.</p>
<head>
<style> </body>
#para1 { </html>
text-align: center;
color: red; You can also specify that only specific HTML
} elements should be affected by a class.
</style> In the example below, only <p> elements
</head> with class="center" will be center-aligned:
<body>
Example:
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the <!DOCTYPE html>
style.</p> <html>
<head>
</body> <style>
</html> p.center {
text-align: center;
Note: An id name cannot start with a color: red;
number! }
</style>
3. The Class Selector </head>
<body>
The class selector selects elements with a
specific class attribute. To select elements <h1 class="center">This heading will not be
with a specific class, write a period (.) affected</h1>
character, followed by the name of the <p class="center">This paragraph will be
class. red and center-aligned.</p>
In the example below, all HTML elements
with class="center" will be red and center- </body>
aligned: </html>

Example: HTML elements can also refer to more than


one class.
<!DOCTYPE html> In the example below, the <p> element wil
<html> be styled according to class="center" and to
<head> class="large":
<style>
.center { <!DOCTYPE html>
text-align: center; <html>
<head> </style>
<style> </head>
p.center { <body>
text-align: center;
color: red; <p>Hello World!</p>
} <p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the
p.large { output.</p>
font-size: 300%;
} </body>
</style> </html>
</head>
<body> Three Ways to Insert CSS
There are three ways of inserting a style sheet:
<h1 class="center">This heading will not be
affected</h1>  External style sheet
<p class="center">This paragraph will be  Internal style sheet
red and center-aligned.</p>  Inline style
<p class="center large">This paragraph will
be red, center-aligned, and in a large font- External Style Sheet
size.</p>
With an external style sheet, you can change the
</body> look of an entire website by changing just one file!
</html> Each page must include a reference to the external
style sheet file inside the <link> element. The <link>
Note: A class name cannot start with a element goes inside the <head> section:
number!
<!DOCTYPE html>
Comments <html>
Comments are used to explain the code, and may <head>
help when you edit the source code at a later date. <link rel="stylesheet" type="text/css"
Comments are ignored by browsers. href="mystyle.css">
A CSS comment starts with /* and ends with */. </head>
Comments can also span multiple lines: <body>

Example: <h1>This is a heading</h1>


<p>This is a paragraph.</p>
<!DOCTYPE html>
<html> </body>
<head> </html>
<style>
p{ An external style sheet can be written in any text
color: red; editor. The file should not contain any html tags.
/* This is a single-line comment */ The style sheet file must be saved with a .css
text-align: center; extension.
}
/* This is
a multi-line
comment */
Here is how the "myStyle.css" looks: The example below shows how to change the color
and the left margin of a <h1> element:
body {
    background-color: lightblue; Example:
}
<!DOCTYPE html>
h1 { <html>
    color: navy; <body>
    margin-left: 20px;
} <h1 style="color:blue;margin-left:30px;">This is a
heading.</h1>
Internal Style Sheet <p>This is a paragraph.</p>
An internal style sheet may be used if one single
page has a unique style. </body>
Internal styles are defined within the <style> </html>
element, inside the <head> section of an HTML
page:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

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

</body>
</html>

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.
Cascading Order Example 2:
<!DOCTYPE html>
Defines which style sheet has the highest priority: <html>
<head>
1. Inline style (inside an HTML element) <style>
2. External and internal style sheets (in the h1 {
head section) background-color: green;
3. Browser default }

An inline style (inside a specific HTML element) has div {


the highest priority, which means that it will background-color: lightblue;
override a style defined inside the <head> tag, or in }
an external style sheet, or a browser default value.
p{
CSS Backgrounds background-color: yellow;
}
The CSS background properties are used to define </style>
the background effects for elements. </head>
<body>
CSS background properties:
1. background-color <h1>CSS background-color example!</h1>
2. background-image <div>
3. background-repeat This is a text inside a div element.
4. background-attachment <p>This paragraph has its own background
5. background-position color.</p>
We are still in the div element.
Background Color </div>

The background-color property specifies the </body>


background color of an element. The background </html>
color of a page is set like this:
With CSS, a color is commonly specified by:
Example 1: 1. a valid color name - like "red"
<!DOCTYPE html> 2. a HEX value - like "#ff0000"
<html> 3. an RGB value - like "rgb(255,0,0)"
<head>
<style> CSS Colors
body {
background-color: red; Colors in CSS can be specified by the following
} methods:
</style>  Hexadecimal colors
</head>  RGB colors
<body>  RGBA colors
 HSL colors
<h1>Hello World!</h1>  HSLA colors
<p>This page has a background color!</p>  Predefined/Cross-browser color names

</body>
</html>
Hexadecimal Colors Example:
<!DOCTYPE html>
Hexadecimal color values are supported in all <html>
major browsers. A hexadecimal color is specified <head>
with: #RRGGBB, where the RR (red), GG (green) <style>
and BB (blue) hexadecimal integers specify the #p1 {background-color:rgb(255,0,0);}
components of the color. All values must be #p2 {background-color:rgb(0,255,0);}
between 00 and FF. For example, the #0000ff value #p3 {background-color:rgb(0,0,255);}
is rendered as blue, because the blue component is #p4 {background-color:rgb(192,192,192);}
set to its highest value (ff) and the others are set to #p5 {background-color:rgb(255,255,0);}
00. #p6 {background-color:rgb(255,0,255);}
</style>
Example: </head>
<!DOCTYPE html>
<html> <body>
<head> <p>RGB colors:</p>
<style> <p id="p1">Red</p>
#p1 {background-color:#ff0000;} <p id="p2">Green</p>
#p2 {background-color:#00ff00;} <p id="p3">Blue</p>
#p3 {background-color:#0000ff;} <p id="p4">Grey</p>
#p4 {background-color:#ffff00;} <p id="p5">Yellow</p>
#p5 {background-color:#ff00ff;} <p id="p6">Cerise</p>
</style> </body>
</head> </html>

<body> RGBA Colors


<p>HEX colors:</p> RGBA color values are supported in IE9+, Firefox
<p id="p1">Red</p> 3+, Chrome, Safari, and in Opera 10+.
<p id="p2">Green</p> RGBA color values are an extension of RGB color
<p id="p3">Blue</p> values with an alpha channel - which specifies the
<p id="p4">Yellow</p> opacity of the object.
<p id="p5">Cerise</p> An RGBA color value is specified with: rgba(red,
</body> green, blue, alpha). The alpha parameter is a
</html> number between 0.0 (fully transparent) and 1.0
(fully opaque).
RGB Colors
Example:
RGB color values are supported in all major <!DOCTYPE html>
browsers. An RGB color value is specified with: <html>
rgb(red, green, blue). Each parameter (red, green, <head>
and blue) defines the intensity of the color and can <style>
be an integer between 0 and 255 or a percentage #p1 {background-color:rgba(255,0,0,0.3);}
value (from 0% to 100%). #p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
Following values define equal color: #p4 {background-color:rgba(192,192,192,0.3);}
rgb(0,0,255) and rgb(0%,0%,100%). #p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}
</style>
</head>
HSLA Colors
<body>
<p>RGB colors with opacity:</p> HSLA color values are an extension of HSL color
<p id="p1">Red</p> values with an alpha channel - which specifies the
<p id="p2">Green</p> opacity of the object.
<p id="p3">Blue</p> An HSLA color value is specified with: hsla(hue,
<p id="p4">Grey</p> saturation, lightness, alpha), where the alpha
<p id="p5">Yellow</p> parameter defines the opacity. The alpha
<p id="p6">Cerise</p> parameter is a number between 0.0 (fully
</body> transparent) and 1.0 (fully opaque).
</html>
Example:
HSL Colors <!DOCTYPE html>
<html>
HSL color values are supported in IE9+, Firefox, <head>
Chrome, Safari, and in Opera 10+. HSL stands for <style>
hue, saturation, and lightness - and represents a #p1 {background-color:hsla(120,100%,50%,0.3);}
cylindrical-coordinate representation of colors. An #p2 {background-color:hsla(120,100%,75%,0.3);}
HSL color value is specified with: hsl(hue, #p3 {background-color:hsla(120,100%,25%,0.3);}
saturation, lightness). #p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
Example: #p6 {background-color:hsla(290,60%,70%,0.3);}
<!DOCTYPE html> </style>
<html> </head>
<head>
<style> <body>
#p1 {background-color:hsl(120,100%,50%);} <p>HSL colors with opacity:</p>
#p2 {background-color:hsl(120,100%,75%);} <p id="p1">Green</p>
#p3 {background-color:hsl(120,100%,25%);} <p id="p2">Light green</p>
#p4 {background-color:hsl(120,60%,70%);} <p id="p3">Dark green</p>
#p5 {background-color:hsl(290,100%,50%);} <p id="p4">Pastel green</p>
#p6 {background-color:hsl(290,60%,70%);} <p id="p5">Violet</p>
</style> <p id="p6">Pastel violet</p>
</head> </body>
</html>
<body>
<p>HSL colors:</p> Predefined/Cross-browser Color Names
<p id="p1">Green</p> 140 color names are predefined in the HTML and
<p id="p2">Light green</p> CSS color specification. Here are some examples:
<p id="p3">Dark green</p> Name HEX
<p id="p4">Pastel green</p> AliceBlue  #F0F8FF
<p id="p5">Violet</p> AntiqueWhite  #FAEBD7
<p id="p6">Pastel violet</p> Aqua  #00FFFF
</body> Aquamarine  #7FFFD4
</html> Azure  #F0FFFF
Beige  #F5F5DC
Bisque  #FFE4C4
Black   #000000
Background Image Background Image - Set position and no-repeat

The background-image property specifies an image Showing the background image only once is also
to use as the background of an element. By default, specified by the background-repeat property:
the background-image property repeats an image
both horizontally and vertically so it covers the Example:
entire element. <!DOCTYPE html>
<html>
Example: <head>
<!DOCTYPE html> <style>
<html> body {
<head> background-image: url("img_tree.png");
<style> background-repeat: no-repeat;
body { }
background-image: url("paper.gif"); </style>
} </head>
</style> <body>
</head>
<body> <h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<h1>Hello World!</h1> <p>The background image is only showing once,
<p>This page has an image as the background!</p> but it is disturbing the reader!</p>

</body> </body>
</html> </html>

To repeat an image horizontally set: background- The position of the image is specified by
repeat: repeat-x; To repeat an image vertically set: the background-position property:
background-repeat: repeat-y;
Example:
Example:
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<style> <style>
body { body {
background-image: url("gradient_bg.png"); background-image: url("img_tree.png");
background-repeat: repeat-x; background-repeat: no-repeat;
} background-position: right top;
</style> margin-right: 200px;
</head> }
<body> </style>
</head>
<h1>Hello World!</h1> <body>
<p>Here, a backgound image is repeated only
horizontally!</p> <h1>Hello World!</h1>
<p>W3Schools background no-repeat, set position
</body> example.</p>
</html>
<p>Now the background image is only shown once, body {
and positioned away from the text.</p> background: #ffffff url("img_tree.png") no-repeat
<p>In this example we have also added a margin right top;
on the right side, so the background image will margin-right: 200px;
never disturb the text.</p> }
</style>
</body> </head>
</html> <body>

Background Image - Fixed position <h1>Hello World!</h1>


<p>Now the background image is only shown once,
To specify that the background image should be and it is also positioned away from the text.</p>
fixed (will not scroll with the rest of the page), use <p>In this example we have also added a margin
the background-attachment property: on the right side, so that the background image will
not disturb the text.</p>
Example:
<!DOCTYPE html> </body>
<html> </html>
<head>
<style> When using the shorthand property the order of
body { the property values is:
background-image: url("img_tree.png");
background-repeat: no-repeat; 1. background-color
background-position: right top; 2. background-image
margin-right: 200px; 3. background-repeat
background-attachment: fixed; 4. background-attachment
} 5. background-position
</style>
</head> It does not matter if one of the property values is
<body> missing, as long as the other ones are in this order.

<h1>Hello World!</h1>

</body>
</html>

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.
The shorthand property for background
is background:

Example:
<!DOCTYPE html>
<html>
<head>
<style>

You might also like