1Computer Sciences Department. And use

Computer Sciences Department 1

And use http://www.w3schools.com/

http://www.w3schools.com/



Cascading Style SheetsCSS

Introduction to CSS Cascading Style Sheets Benefits of using CSS Levels of Style Sheets CSS Syntax Properties CSS3

Objectives


The CSS1 specification was developed in 1996 CSS2 was released in 1998 CSS3 is the latest standard for CSS and is completely

backwards-compatible with earlier versions of CSS CSSs provide the means to control and change

presentation of HTML documents (control the style and layout of multiple Web pages all at once).

CSS is not technically HTML, but can be embedded in HTML documents

Style sheets allow you to impose a standard style on a whole document, or even a whole collection of documents

Style is specified for a tag by the values of its properties

Introduction


CSS stands for Cascading Style Sheets CSS defines how HTML elements are to

be displayed Styles were added to HTML 4.0 to solve a

problem CSS saves a lot of work External Style Sheets are stored in CSS files

What is CSS?


HTML was NEVER intended to contain tags for formatting a document.

HTML was intended to define the content of a document, 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 web sites, 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.

In HTML 4.0, all formatting could (and should!) be removed from the HTML document, and stored in a separate CSS file.

CSS Solved a Big Problem


The style definitions are normally saved in external .css files.

With an external style sheet file, you can change the look of an entire Web site by changing just one file!

CSS Saves a Lot of Work!


There are three levels of style sheets• Inline - specified for a specific occurrence of a tag and

apply only to that tag– This is fine-grain style, which defeats the purpose of style sheets - uniform style

• Document-level style sheets - apply to the whole document in which they appear

• External style sheets - can be applied to any number of documents

When more than one style sheet applies to a specific tag in a document, the lowest level style sheet has precedence In a sense, the browser searches for a style property spec,

starting with inline, until it finds one (or there isn’t one)

Levels of Style Sheets


There are three ways of inserting a style sheet: Inline style Internal style sheet External style sheet

Three Ways to Insert CSS


- To use inline styles, add the style attribute to the relevant tag.

- The style attribute can contain any CSS property.

Inline Styles


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, inside the <style> tag, like this:

Internal Style Sheet


CSS Syntax


CSS selectors allow you to select and manipulate HTML elements.

CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute, and more.

CSS Selectors


The element selector selects elements based on the element name.

All <p> elements can be selected on a page like this: (all <p> elements will be center-aligned, with a red text color)

The element Selector


The id selector uses the id attribute of an HTML element to select a specific element.

An id should be unique within a page, so the id selector is used if you want to select a single, unique element.

To select an element with a specific id, write a hash character, followed by the id of the element.

The id 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. You can also specify that only specific HTML elements

should be affected by a class.

The class Selector

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>


Try Grouping Selectors


There are 60 different properties in 7 categories: Backgrounds Alignment of text Fonts Lists Margins Colors Borders

Properties


Keywords - left, small, … Not case sensitive

Length - numbers, maybe with decimal points Units:

px - pixels in - inches cm - centimeters mm - millimeters pt - points pc - picas (12 points) em - height of the letter ‘m’ ex-height - height of the letter ‘x’ No space is allowed between the number and the unit

specification e.g., 1.5 in is illegal!

Property Values


The background-color property specifies the background color of an element. With CSS, a color is most often specified by:

a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red“

The background-image property specifies an image to use as the background of an element.

background-repeat background-attachment background-position

CSS Background

Computer Sciences Department 24http://www.w3schools.com/css/css_background.asp

http://www.w3schools.com/css/css_background.asp







Text Alignment


Text DecorationThe text-decoration property is mostly used to remove or add underlines from links for design purposes


The text-transform property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word

The text-indent property is used to specify the indentation of the first line of a text.

Text Transformation and Indentation


CSS font


Font Family: P {font-family: "Times New Roman", Times, serif;}

Font Style:

Font Size

Set Font Size With Em: font-size: 2.5em; /* 40px/16=2.5em */ (To allow users to resize the text . 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. The size can be calculated from pixels to em using this formula: pixels/16=em)

Use a Combination of Percent and Em: font-size: 100%;

Font Properties


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

Links can be styled differently depending on what state they are in. The four links states are:

a:link - a normal, unvisited linka:visited - a link the user has visiteda:hover - a link when the user mouses over ita:active - a link the moment it is clicked

A pseudo-class is used to define a special state of an element

Example

Styling Links and CSS Pseudo-classes

http://www.w3schools.com/css/tryit.asp?filename=trycss_link


In the following example, the selector matches the first <i> element in all <p> elements

Match the first <i> element in all <p> elements

first-line and first-letter

http://www.w3schools.com/css/tryit.asp?filename=trycss_firstline

http://www.w3schools.com/css/tryit.asp?filename=trycss_firstletter


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

In HTML, there are two types of lists: unordered lists (<ul>) - the list items are marked with bullets ordered lists (<ol>) - the list items are marked with numbers

or letters With CSS, lists can be styled further, and images can be

used as the list item marker. For example

List - Example

CSS Lists

http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-image

http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-type_ex


Table Borders: table, th, td { border: 1px solid black;} Table Width and Height: table {width: 100%;} Horizontal Text Alignment “left, right, or center”: th

{text-align: left;} Vertical Text Alignment ” top, bottom, or middle”: td {

height: 50px; vertical-align: bottom;} Table Padding Table Color

table, td, th { border: 1px solid green;}

th { background-color: green; color: white;}td { padding: 15px;}

CSS Tables


CSS Box Model


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.

Example

Margin

http://www.w3schools.com/css/tryit.asp?filename=trycss_margin_sides


The display property specifies if/how an element is displayed.

The visibility property specifies if an element should be visible or hidden. visibility: hidden; hides an element, but it will still

take up the same space. display: none; element will be hidden, and the

page will be displayed as if the element is not there li {display:inline;} displays <li> elements as

inline elements.

CSS Display and Visibility


The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.

There are four different positioning methods: Static Positioning: HTML elements are positioned static by

default. A static positioned element is always positioned according to the normal flow of the page. “are not affected by the top, bottom, left, and right properties”

Fixed Positioning: An element with a fixed position is positioned relative to the browser window, and will not move even if the window is scrolled

Relative Positioning: A relative positioned element is positioned relative to its normal position

Absolute Positioning: An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>.

CSS Positioning


The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

An element with a larger z-index generally covers an element with a lower one


With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.

Float is often used with images, but it is also useful when working with layouts

CSS Float


Navigation Bar = List of Links <ul>

<li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li></ul>

Horizontal Navigation Bar: li {display: inline;}

CSS Navigation Bar


Creating transparent images with CSS is easy. The CSS opacity property is a part of the CSS3 recommendation The CSS3 property for transparency is opacity

IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent.

IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.

Example

CSS Image Opacity / Transparency

http://www.w3schools.com/css/css_image_transparency.asp

Css3

Computer Sciences Department47


CSS3 allows you to format your elements using 3D transforms.

The 3D transform methods: rotateX() rotateY()

More

CSS3 3D Transforms

http://www.w3schools.com/css/css3_3dtransforms.asp


An animation lets an element gradually change from one style to another.

You can change as many properties you want, as many times you want.

You can specify when the change will happen in percent, or you can use the keywords "from" and "to" (which represents 0% and 100%).

0% represents the start of the animation, 100% is when the animation is complete.

When an animation is created in the @keyframe rule, you must bind it to a selector, otherwise the animation will have no effect.

Bind the animation to a selector (element) by specifying at least these two properties:

the name of the animation the duration of the animation

more

CSS3 Animations

http://www.w3schools.com/css/css3_animations.asp

1Computer Sciences Department. And use

Documents

Transcript of 1Computer Sciences Department. And use