CSS

INTRODUCTION

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 4.0 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

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. It ends with a semicolon, and surrounded by curly brackets

The property is the style attribute with a value.

CSS Id and Class

CSS allowsto specify our own selectors called "id" and "class".

The id selector is used to specify a style for a single, unique element.Uses the id attribute of the HTML element, and is defined with a "#".

The class selector is used to specify a style for a group of elements. It allows us to set a particular style for any HTML elements with the same class using the HTML class attribute, and is defined with a "."

Inserting CSS

External Style Sheet An external style sheet changes the look of an

entire Web site by changing one file. Each page must link to the style sheet using the <link> tag contained inside the head section:

It can be written in any text editor and must not contain any html tags. Your style sheet should be saved with a .css extension.

Internal Style Sheet An internal style sheet should be used when a

single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag.

Inline Styles An inline style use the style attribute in the

relevant tag. The style attribute can contain any CSS property.

CSS Background

CSS background properties are used to define the background effects of an element.

CSS properties used for background effects:

* background-color

* background-image

* background-repeat

* background-attachment

* background-position

Property Description Values CSS

background Sets all the background properties in one declaration

background-colorbackground-imagebackground-repeat background-attachment background-positioninherit

1

background-attachment Sets whether a background image is fixed or scrolls with the rest of the page

scrollfixedinherit

1

background-color Sets the background color of an element

color-rgbcolor-hexcolor-nametransparentinherit

1

background-image Sets the background image for an element

url(URL)noneinherit

1

background-position Sets the starting position of a background image

left topleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottomx% y%xpos yposinherit

1

background-repeat Sets if/how a background image will be repeated

repeatrepeat-xrepeat-yno-repeatinherit

1

CSS Text

Text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters.

Text Color Text Alignment Text Decoration Text Transformation Text Indentation

PROPERTY DESCRIPTION VALUES CSS

TEXT-COLOR Sets the color of a text color 1

TEXT ALIGNMENT Aligns the text in an element

leftrightcenterjustify

1

TEXT DECORATION

Adds decoration to text noneunderlineoverlineline-throughblink

1

TEXT TRANSFORMATION

Controls the letters in an element

nonecapitalizeuppercaselowercase

1

GENERIC FAMILY FONT FAMILY DESCRIPTION

Serif Times New RomanGeorgia

Serif fonts have small lines at the ends on some characters

Sans-serif ArialVerdana

“Sans" means without - these fonts do not have the lines at the ends of characters

Monospace Courier NewLucida Console

All monospace characters has the same width

CSS Font

PROPERTY DESCRIPTION VALUE CSS

FONT Sets all the font properties in one declaration

ont-stylefont-variantfont-weightfont-size/line-heightfont-familycaptioniconmenumessage-boxsmall-captionstatus-barinherit

1

font-family Specifies the font family for text

family-namegeneric-familyinherit

1

font-size Specifies the font size of text

xx-smallx-smallsmallmediumlarge

1

font-style Specifies the font style for text

normalitalicobliqueinherit

1

font-variant Specifies whether or not a text should be displayed in a small-caps font

normalsmall-capsinherit

1

font-weight Specifies the weight of a font

normalboldbolderlighter100200300400500600700800900inherit

1

CSS Links

Links can be style with any CSS property (e.g. color, font-family, background-color).

The four links states are:

* a:link - a normal, unvisited link

* a:visited - a link the user has visited

* a:hover - a link when the user mouses over it

* a:active - a link the moment it is clicked

CSS Lists

The CSS list properties allow you to:

* Set different list item markers for ordered lists

* Set different list item markers for unordered lists

* Set an image as the list item marker The type of list item marker is specified with the

list-style-type property.

CSS Tables

Table Borders

To specify table borders in CSS, use the border property.

Collapse Borders

Sets whether the table borders are collapsed into a single border or separated.

Table Width and Height

Width and height of a table is defined by the width and height properties.

Table Text Alignment

1.The text in a table is aligned with the text-align and vertical-align properties.

2.The text-align property sets the horizontal alignment, like left, right, or center.

3.The vertical-align property sets the vertical alignment, like top, bottom, or middle.

Table Padding

To control the space between the border and content in a table, use the padding property on td and th elements.

THANK YOU