Scribd
Upload
35 views

Chapter Three: Cascading Style Sheets: Introduction To CSS

CSS allows separation of document content from page layout and style by defining styles like fonts, sizes, and colors in CSS files that can then be applied to HTML documents. CSS declarations use properties and values to style HTML elements and are made up of selectors, properties, and values. CSS can be linked to HTML documents through internal, inline, and external styling and is useful for maintaining a consistent styling across multiple pages by changing styles in one CSS file.

Uploaded by

getnet
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
35 views

Chapter Three: Cascading Style Sheets: Introduction To CSS

CSS allows separation of document content from page layout and style by defining styles like fonts, sizes, and colors in CSS files that can then be applied to HTML documents. CSS declarations use properties and values to style HTML elements and are made up of selectors, properties, and values. CSS can be linked to HTML documents through internal, inline, and external styling and is useful for maintaining a consistent styling across multiple pages by changing styles in one CSS file.

Uploaded by

getnet
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 18

Chapter three: Cascading Style Sheets

Introduction to CSS
CSS stands for Cascading Style Sheet. A cascading style sheet file allows you to separate your web sites
HTML content from its style. As always you use your HTML file to arrange the content, but all of the
presentation/formatting (fonts, colors, background, borders, text formatting, link effects & so on...) are
accomplished within a CSS.

CSS is a web page layout method that has been added to HTML to give web developers more control over
their design and content layout. Using CSS allows a designer to create a standard set of commands (either
embedded inside the web page or from an external page) that controls the style of all subsequent pages.

With CSS you can add style (fonts, colors, spacing, and size) to web documents. More advanced techniques
control the layout of the page without the use of tables or other cumbersome HTML.

CSS is that CSS separates the layout and the styles of a web page. This is often difficult to comprehend for
web designers that are used to compiling their creative and HTML coding in a single web page document.
Styles such as fonts, font sizes, margins, can be specified in one place, and then the Web pages feed off
this one master list, with the styles cascading throughout the page or an entire site.

Styles solve a common Problem. HTML tags were originally designed to define the content of a document.
They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like
<h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the
browser, without using any formatting tags.

Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute
in HTML. Styles are normally saved in external .css files. External style sheets enable you to change the
appearance and layout of all the pages in your Web, just by editing one single CSS document!

CSS is a breakthrough in web design because it allows developers to control the style and layout of
multiple web pages all at once. As a web developer you can define a style for each HTML element and
apply it to as many web pages as you want. To make a global change, simply change the style, and all
elements in the Web are updated automatically.

CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations. The selector is normally the HTML
element you want to style. Each declaration consists of a property and a value. The property is the style
attribute you want to change. Usually, it is the HTML tags to be styled. Each property has a value.

3
CSS declarations always ends with a semicolon, and declaration groups are surrounded by curly brackets:
p {color:red; text-align:center;}

To make the CSS more readable, you can put one declaration on each line, like this:
p{
color:red;
text-align:center;
}

CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a later date.
CSS comments, like JavaScript comments, are ignored by browsers.

A CSS comment begins with /* and ends with */ like this:


/*This is a comment*/
p{
text-align:center;
/*This is another comment*/
font-family:arial;
}

Linking CSS to HTML


It is possible to link CSS with your html in three different ways: embedded style, inline style, and external
style.

Creating an Inline Style


Inline styles have the structure:
<tag style=”property: value”>

Creating Internal Styles


In the internal method, you simply place the CSS code within the <head></head> tags of each HTML file
you want to style with the CSS. The format for this is shown in the example below:
<head>
<title><title>
<style type="text/css">

4
CSS Content Goes Here
</style>
</head>
<body>

With this method each HTML file contains the CSS code needed to style the page. Meaning that any
changes you want to make to one page, will have to be made to all. This method can be good if you need
to style only one page, or if you want different pages to have varying styles.

Creating an External Style Sheet


An external CSS file can be created with any text or HTML editor such as "Notepad" or "Dreamweaver". A
CSS file contains no HTML, only CSS. You have to save the CSS file with the .css file extension. You can link
to the file externally by placing one of the following links in the head section of every HTML file you want
to style with the CSS file.

<link rel=”stylesheet” type=”text/css” href=”filename.css”/>


<style type=”text/css”>@import url(“filename.css”)</style>

Styling Backgrounds
Background
You can style the background of an element in one declaration with the background property.
background: #ffffff url(path_to_image) top left no-repeat fixed;

Values:
 attachment  position
 color  repeat
 image

Or you can set each property individually

Background Attachment
If you are using an image as a background. You can set whether the background scrolls with the page or
is fixed when the user scrolls down the page with the background-attachment property
background-attachment: value;

Values:
 fixed
 scroll

Background Color
You can specifically declare a color for the background of an element using the background-color property.
background-color: value;

5
Values:
color name RGB color code
hexadecimal number transparent

Background Image
You can set an image for the background of an element using the background-image property.
background-image: url(path_to_image);

Values:
url
none

Background Position
You can position an image used for the background of an element using the background-position property.
background-position: value;

Values:
 top left  center center  bottom right
 top center  center right  x-% y-%
 top right  bottom left  x-pos y-pos
 center left  bottom center

Background Repeat
You can set if an image set as a background of an element is to repeat (across=x and/or down=y) the
screen using the background-repeat property.
background-repeat: value;

Values:
repeat repeat-y
repeat-x

Styling Text
Color
You can set the color of text with the following:
color: value;

Possible values are


color name – example: red, black…
hexadecimal number – example: #ff0000, #000000
RGB color code – example: rgb(255, 0, 0), rgb(0, 0, 0)

6
Letter Spacing
You can adjust the space between letters in the following manner. Setting the value to 0, prevents the
text from justifying. You can use negative values.
letter-spacing: value;

Possible values are


normal
length

Text Align
You can align text with the following:
text-align: value;

Possible values are


left center
right justify

Examples:
This text is aligned left.
This text is aligned center.
This text is aligned right.

Text Decoration
You can decorate text with the following:
text-decoration: value;

Possible values are


none line through
underline blink
overline

Examples:
This text is underlined.
This text has a line through it.
This text is overlined.

Text Indent
You can indent the first line of text in an (X)HTML element with the following:
text-indent: value;

Possible values are


length

7
percentage

Text Direction
You can sets the text direction
direction: value;

Possible values are


ltr
rtl

Text Transform
You can control the size of letters in an (X)HTML element with the following:
text-transform: value;

Possible values are


none lowercase
capitalize uppercase

White Space
You can control the whitespace in an (X)HTML element with the following:
white-space: value;

Possible values are


normal nowrap
pre

Word Spacing
You can adjust the space between words in the following manner. You can use negative values.
word-spacing: value;

Possible values are


normal
length
Line height
You can set the distance between lines in the following way:
line-height: value;

Possible values are


normal length
number %

8
Styling Fonts
Font
The font property can set the style, weight, variant, size, line height and font:
font: italic bold normal small/1.4em Verdana, sans-serif;

The above would set the text of an element to an italic style a bold weight a normal variant a relative size
a line height of 1.4em and the font to Verdana or another sans-serif typeface.

Font -Family
You can set what font will be displayed in an element with the font-family property. There are 2 choices
for values:
family-name
generic family

If you set a family name it is best to also add the generic family at the end. As this is a prioritized list. So if
the user does not have the specified font name it will use the same generic family.
font-family: Verdana, sans-serif;

Font Size
You can set the size of the text used in an element by using the font-size property.
font-size: value;

There are a lot of choices for values:


 xx-large  medium  xx-small
 x-large  small  length
 larger  smaller  % (percent)
 large  x-small

Font Style
You can set the style of text in a element with the font-style property:
font-style: value;

Possible values are


normal oblique
itailc

Font Variant
You can set the variant of text within an element with the font-variant property:
font-variant: value;

Possible values are

9
 normal
 small-caps

Font Weight
You can control the weight of text in an element with the font-weight property:
font-weight: value;

Possible values are


 lighter  400  900
 normal  500  bold
 100  600  bolder
 200  700
 300  800

Styling Links
Below are the various ways you can use CSS to style links.
a:link {color: #009900;}
a:visited {color: #999999;}
a:hover {color: #333333;}
a:focus {color: #333333;}
a:active {color: #009900;}

Remark: You must declare the a:link and a:visited before you declare a:hover. Furthermore, you must
declare a:hover before you can declare a:active.

Using the above code will style all links on your web page, unless you declare a seperate set of link styles
for a certain area of your webpage. Look at pseudo-classes sub-section for more.

Styling Lists
List Style
You can control the appearance of ordered and unordered lists in one declaration with the list-style
property
list-style: value value value;

Values:
image type
position
Or you can control them individually

List Style Image


You can use an image for the bullet of unordered lists with the list-style property

10
list-style-image: url(path_to_image.gif, jpg or png);

If you use an image, it is a good idea to declare the list-style-type also in case the user has images turned
off.

List Style Position


You can control the position of ordered and unordered lists with the list-style-position property
list-style-position: value;

Values
 inside
 outside

List Style Type


You can control the type of bullet ordered and unordered lists use with the list-style-type property
list-style-type: value;

Values
 none  decimal-leading-zero  lower-greek
 disc  lower-roman  lower-latin
 circle  upper-roman  upper-latin
 square  lower-alpha  armenian
 decimal  upper-alpha  Georgian

Styling Tables
Table Borders
To specify table borders in CSS, use the border property. The example below specifies a black border for
table, th, and td elements:
table, th, td{
border: 1px solid black;
}

Notice that the table in the example above has double borders. This is because both the table, th, and td
elements have separate borders.

Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single border or
separated:
table{
border-collapse:collapse;
}
table,th, td{

11
border: 1px solid black;
}

Table Width and Height


Width and height of a table is defined by the width and height properties. The example below sets the
width of the table to 100%, and the height of the th elements to 50px:
table{
width:100%;
}
th{
height:50px;
}

Table Text Alignment


The text in a table is aligned with the text-align and vertical-align properties. The text-align property sets
the horizontal alignment, like left, right, or center:
td{
text-align:right;
}

The vertical-align property sets the vertical alignment, like top, bottom, or middle:
td {
height:50px;
vertical-align:bottom;
}

Table Padding
To control the space between the border and content in a table, use the padding property on td and th
elements:
td{
padding:15px;
}

Table Color
The color of the borders, and the text and background color of th elements can be specified:
table, td, th{
border:1px solid green;
}
th{
background-color:green;
color:white;
}

12
CSS Class and ID
CSS Class
Controlling the way all HTML elements look can be useful, but also limiting. It's excellent to be able to
change every paragraph, table cell or image with one line of CSS code, but sometimes you'll want to
change only few paragraphs or images, not all of them. You can add CSS code through the style attribute
of each element, but for more elements that method gets too complicated.

For example, paragraph can be defined in CSS file as follows:


p{
font-size: small;
color: #333333
}

However, let’s say you want to change the word "sentence" in the paragraph formatted by the above CSS
to green bold text, while leaving the rest of the sentence untouched. This can be done by using class.

There are two types of classes – generic classes that can be applied to any element, and classes that can
be applied only to a certain type of HTML element.

Let's start with generic classes. Their selector starts with a dot ("."), which states that it is a class. You can
name it anything you want:
.important { background-color: #FFFFDE; }
.emphasis { font-family: Verdana; }
.boooring { color: Gray; }

To apply a class to a certain HTML element, use its class attribute where you state the class name without
the dot.
<div class="emphasis">The big match today …</div>
<i class="boooring">This sentence looks boring</i>

You can also use classes which can be applied only to certain HTML elements. Selectors of these classes
start with the HTML element name, followed with the dot and the class name:
div.big { font-weight: bold; font-size: 16pt; }

These classes can be applied only to a specified HTML element, in this case a DIV element.
<div class="big">Big bold text.</div>
<span class="big">Normal text - class not applied.</span>

Example: in your paragraph, you put this:


<span class="greenboldtext">sentence</span>

13
Then in the CSS file, add this style selector:
.greenboldtext{
font-size: small;
color: #008080;
font-weight: bold;
}

Pseudo Classes
Pseudo-classes are classes that define tag states. Most commonly, these are used to make link styles
change when the mouse pointer hovers over a hyperlink, hyperlink is clicked, etc.
Pseudo class Link state

a:link Normal link


a:visited Already visited link
a:hover Mouse hovers the link
a:active User is clicking on the link

Table 3.1 pseudo classes

Example:
a:link {
text-decoration: underline;
font-weight: normal;
color: #003300;
}
a:visited {
text-decoration: underline;
font-weight: normal;
color: #999999;
}

CSS ID
IDs are similar to classes, except once a specific ID has been declared it cannot be used again within the
same (X)HTML file. The syntax of ID selectors is very similar to classes, but instead of a dot you must use
a hash sign (#).

The HTML content is:


<div id="container"> I was asleep, but my heart was awake. </div>

The CSS that formats the HTML content:


#container{
width: 80%;

14
padding: 20px;
margin: auto;
border: 1px solid blue;
background: red;
}

CSS Box Model


In CSS, the term box model is used when talking about design and layout. The CSS box model is essentially
a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual
content.

The box model allows us to place a border around elements and space elements in relation to other
elements. The image below illustrates the box model.

Figure 3.1 CSS box model

Explanation of the different parts:


 Margin - Clears an area around the border. The margin does not have a background color, and it
is completely transparent
 Border - A border that lies around the padding and content. The border is affected by the
background color of the box
 Padding - Clears an area around the content. The padding is affected by the background color of
the box
 Content - The content of the box, where text and images appear

In order to set the width and height of an element correctly in all browsers, you need to know how the
box model works.

CSS Border
Border
You can set the color, style and width of the borders around an element in one declaration by using the
border property.

15
border: 1px solid #333333;

Values:
color width
style

Or you can set each property individually

Border Color
You can set the color of a border independently with the border-color property.
border-color: value;

Values:
 color name  RGB color code
 hexadecimal number  transparent

Border Style
You can set the style of a border independently with the border-style property.
border-style: value;

Values:
dashed hidden ridge
dotted inset solid
double none
groove outset

16
Figure 3.2 different border styles

Border Width
You can set the width of a border independently with the border-width property.
border-width: value;

Values:
 Length  Medium
 Thin  Thick
Or you can set the elements for each borders side individually

Border Bottom
You can set the color, style and width of the bottom border around an element in one declaration with
the border-bottom property.
border-bottom: 1px solid #333333;

Values:
color width
style
Or you can set each value individually

Border Bottom Color


You can set the color of the bottom border around an element with the border-bottom-color property.
border-bottom-color: value;

You can set the style of the bottom border around an element with the border-bottom-style property:
border-bottom-style: value;

Border Bottom Width


You can set the width of the bottom border around an element with the border-bottom-width property.
border-bottom-width: value;

Border Left
You can set the color, style and width of the left border around an element with the border-left property.
border-left: 1px solid #333333;

Values:
 color  width
 style
Or you can set each value individually

17
Border Left Color
You can set the color of the left border around an element with the border-left-color property.
border-left-color: value;
Border Left Style
You can set the style of the left border around an element with the border-left-style property.
border-left-style: value;
Border Left Width
You can set the width of the left border around an element with the border-left-width property.
border-left-width: value;

Border Right
You can set the color, style and width of the right border around an element in one declaration with the
border-right property.
border-right: 1px solid #333333;

Values:
color
style
width

18
Or you can set each value individually

CSS Margin
The margin clears an area around an element (outside the border). The margin does not have a
background color, and is completely transparent.

The top, right, bottom, and left margin can be changed independently using separate properties. A
shorthand margin property can also be used, to change all margins at once.

Property Description Values

Margin A shorthand property for setting margin-top


the margin properties in one margin-right
declaration margin-bottom
margin-left
margin-bottom Sets the bottom margin of an auto
element length
%
margin-left Sets the left margin of an element auto
length
%
margin-right Sets the right margin of an auto
element length
%
margin-top Sets the top margin of an element auto
length
%
Table 3.2 CSS margin

CSS Padding
The padding clears an area around the content (inside the border) of an element. The padding is affected
by the background color of the element.

The top, right, bottom, and left padding can be changed independently using separate properties. A
shorthand padding property can also be used, to change all paddings at once.

Property Description Values


Padding A shorthand property for setting all padding-top
the padding properties in one padding-right
declaration padding-bottom
padding-left

19
padding-bottom Sets the bottom padding of an length
element %
padding-left Sets the left padding of an element length
%
padding-right Sets the right padding of an element length
%
padding-top Sets the top padding of an element length
%
Table 3.3 CSS padding

20

You might also like