CSS
Introduction
What is CSS?
● CSS is the language we use to style a Web page.
● 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
Example
<html><head><style> <body>
body { <h1>My First CSS
Example</h1>
background-color: lightblue;
<p>This is a paragraph.</p>
}
h1 {
color: white;
</body>
text-align: center;} </html>
p{
font-family: verdana;
font-size: 20px;
}</style></head>
Why Use CSS?
● 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>
● When tags like <font>, and color attributes were added to the HTML
3.2 specification, it started a nightmare for web developers.
Development of large websites, where fonts and color information
were added to every single page, became a long and expensive
process.
● To solve this problem, the World Wide Web Consortium (W3C) created
CSS.
● CSS removed the style formatting from the HTML page!
● CSS is used to define styles for your web pages, including the
design, layout and variations in display for different devices and
screen sizes.
Type of CSS
CSS can be added to HTML documents in 3 ways:
● Inline - by using the style attribute inside HTML elements
● Internal - by using a <style> element in the <head> section
● External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files.
However, in this tutorial we will use inline and internal styles, because this is easier
to demonstrate, and easier for you to try it yourself.
Inline CSS
● An inline CSS is used to apply a unique style to a single HTML element.
● An inline CSS uses the style attribute of an HTML element.
● The following example sets the text color of the <h1> element to blue,
and the text color of the <p> element to red:
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
Internal CSS
● An internal CSS is used to define a style for a single HTML
page.
● An internal CSS is defined in the <head> section of an
HTML page, within a <style> element.
Syntax
●
CSS Syntax
● A CSS rule consists of a selector and a declaration block.
● 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.
● The next example sets the text color of ALL the <h1>
elements (on that page) to blue, and the text color of ALL
the <p> elements to red. In addition, the page will be
displayed with a "powderblue" background color:
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
● An external style sheet is used to define the style for many HTML
pages.
● To use an external style sheet, add a link to it in the <head>
section of each HTML page:
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The external style sheet can be written in any text editor. The file must not contain
any HTML code, and must be saved with a .css extension.
Here is what the "styles.css" file looks like:
body {
background-color : powderblue ;
h1 {
color: blue;
p {
color: red;
}
CSS SELECTORS
A CSS selector selects the HTML element(s) you want to style.
CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
● Simple selectors (select elements based on name, ID)
● Combinator selectors (select elements based on a specific relationship between
them)
● Pseudo-class selectors (select elements based on a certain state)
● Pseudo-elements selectors (select and style a part of an element)
● Attribute selectors (select elements based on an attribute or attribute value)
The CSS element Selector
● The element selector selects
</style>
HTML elements based on the
element name. </head>
● Example
<body>
<html>
<p>Every paragraph will be
<head> affected by the style.</p>
<style> <p id="para1">Me too!</p>
p { <p>And me!</p>
text-align: center; </body>
color: red; </html>
}
The CSS id Selector
● The id selector uses the <html>
id attribute of an HTML <body>
<head>
element to select a <p id="para1">Hello
specific element. <style> World!</p>
● The id of an element is
unique within a page, so #para1 { <p>This paragraph
the id selector is used to is not affected by
text-align: center; the style.</p>
select one unique
element! color: red; </body>
● To select an element with
a specific id, write a hash } </html>
(#) character, followed by </style>
the id of the element.
</head>
The CSS class Selector
● The class selector selects <html><head><style>
HTML elements with a
specific class attribute. .center {
● To select elements with a text-align: center;
specific class, write a
period (.) character, color: red;}
followed by the class
name. </style></head>
● In this example all HTML <body>
elements with
class="center" will be red <h1 class="center">Red and
and center-aligned: center-aligned heading</h1>
<p class="center">Red and
center-aligned paragraph.</p>
</body></html>
In this example only <p> elements with class="center" will be red and center-aligned:
<html><head>
<style>
p.center {
text-align: center;
color: red;}
</style></head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body></html>
In this example the <p> element will be styled according to class="center" and to class="large":
<html><head>
<style>
p.center {
text-align: center;
color: red;}
p.large {
font-size: 300%;}
</style></head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body></html>
The CSS Universal Selector
● The universal selector (*) selects all HTML elements on the
page.
● The CSS rule below will affect every HTML element on the
page:
* {
text-align: center;
color: blue;
}
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
h1 {
text-align: center;
color: red;}
h2 {
text-align: center;
color: red;}
p {
text-align: center;
color: red;
}
● It will be better to group the
selectors, to minimize the code. </style>
● To group selectors, separate
each selector with a comma. </head>
<html> <body>
<head> <h1>Hello World!</h1>
<style> <h2>Smaller heading!</h2>
h1, h2, p { <p>This is a paragraph.</p>
text-align: center; </body></html>
color: red;
