Styling HTML With CSS

Chapter 3
Styling HTML with CSS

CSS was introduced together with HTML 4, to provide a better way to style HTML elements.
Styles were added to HTML 4.0 to solve a problem What is CSS?
 CSS stands for Cascading Style Sheets
 CSS is a language that describes the style of an HTML document.
 CSS describes how HTML elements should be displayed.
 CSS is used to control the style of a web document in a simple and easy way.
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.
CSS Syntax and Selectors CSS Syntax
 A CSS rule-set 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.
 A CSS declaration always ends with a semicolon, and declaration blocks are surrounded
by curly braces.
Example
In this example all <p> elements will be center-aligned, with a red text color:
p { color: red;//declaration text-align:
center;
CSS Selectors
 CSS selectors are used to "find" (or select) HTML elements based on their element name,
id, class, attribute, and more.
The element Selector
 The element selector selects elements based on the element name.
Example
 You can select all <p> elements on a page like this (here, all <p> elements will be
centeraligned, with a red text color):
p { text-align:
center; color: red;
}
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.
Example
The style rule below will be applied to the HTML element with id="para1":
#para1 { text-
align: center;
color: red;
}
Note: An id name cannot start with a number!
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.
Example
 In this example all HTML elements with class="center" will be red and center-aligned:
.center { text-align: center; color: red; }
 You can also specify that only specific HTML elements should be affected by a class.
Example
 In this example only <p> elements with class="center" will be center-aligned:
p.center { text-
align: center;
color: red;
}
 HTML elements can also refer to more than one class.
 Example
 In this example the <p> element will be styled according to class="center" and to
class="large":
 <p class="center large">This paragraph refers to two classes.</p> Note: A class name
cannot start with a number!
Grouping Selectors
 If you have elements with the same style definitions, like this: 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.
 To group selectors, separate each selector with a comma.
 Example
 In this example we have grouped the selectors from the code above:
 h1, h2, p { text-align: center; color: red;
}
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.
Example
 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;
}
CSS can be added to HTML in the following ways:
 Inline - using the style attribute in HTML elements
 Internal - using the <style> element in the <head> section
 External - using an external CSS file
 The preferred way to add CSS to HTML is to put CSS syntax in separate CSS files.
Inline Styles
 An inline style can be used if a unique style is to be applied to one single occurrence of
an element.
 To use inline styles, use the style attribute in the relevant tag. The style attribute can contain
any CSS property.
 The example below shows how to change the text color and the left margin of a paragraph:
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
HTML Style Example - Background Color
 The background-color property defines the background color for an element: Example
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;"> This is a paragraph.</p>
</body>
</html>
Internal Style Sheet
 An internal style sheet can be used if one single document has a unique style. Internal
styles are defined in the <head> section of an HTML page, by using the <style> tag, like
this:
<head> <style> body {background-
color:yellow;} p {color:blue;}
</style>
</head>
External Style Sheet
 An external style sheet is ideal when the style is applied to many pages.
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS files
 With an external style sheet, you can change the look of an entire Web site by changing
one file.
 Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the
<head> section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Example mystle.css body {

background-color: lightblue;
} h1
{
color:
navy;
margi
n-
left:
20px;
}

Styling HTML With CSS

Uploaded by

Copyright:

Available Formats

Styling HTML With CSS

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

Styling HTML With CSS

Uploaded by

Copyright:

Available Formats

Chapter 3

Styling HTML with CSS

 The selector points to the HTML element you want to style.

Example mystle.css body {

You might also like