introduction to css. what is css? cascading style sheets used for styling html also important in...

27
CS 253 Introduction to CSS

Upload: daniela-newton

Post on 01-Jan-2016

237 views

Category:

Documents


3 download

TRANSCRIPT

CS 253Introduction to CSS

What is CSS?

Cascading Style Sheets Used for styling HTML Also important in javascript and

jquery for selectors External style sheets allow

separation of page format and style It is possible for entire web sites to

be redesigned without modifying HTML code by simply changing CSS

CSS Syntax

A CSS rule is composed of two basic parts A selector One or more declarations

The selector is the element or combination of elements to be styled

Declarations consist of a property and a value

Image and content courtesy: http://www.w3schools.com/css/css_syntax.asp

CSS Example

h1 { color:#f00; text-align: left;

}

CSS declarations always end with a semicolon

Declaration groups are surrounded by curly brackets

Id and Class selectors

Id Selector Used to specify a style for a single unique

element The id value of the element is used preceded by

the # symbol to make up the selector expression

#introduction {color : #000;font-weight: bold;

}<p id=“#introduction”>This is some introduction text</p>

Id and Class selectors cont’d Class selector

Typically used by more than one element Since it is not unique the class selector can be used

to style a group of elements The class value of an element is used preceded by

the . (dot) symbol to make up the selector expression.quote{

text-align : right;font-style:italic;

}<p class=“quote”>If debugging is the process of

removing bugs then programming is the process of putting them in~ Edsger Dijkstra</p>

Examples

p.highlight {

background-color: #F4E3AA;

}

#introduction span, p#detail {

color:#F00;

}

#main .detail {

font-style: italic;

}

Ways to include CSS on a page External Style sheet Internal Style sheet Inline Style Import

External Style sheet

External Style sheet Separate external file containing css Look and feel of site can be modified by

changing only one file Typically the link to the style sheet is included

in the <head> section of an html page

<head><link rel="stylesheet" type="text/css" href=“main.css" /></head>

Internal Style sheet

Used when CSS is applied to only a single page Style definitions are placed between the <style>

tags on a page Cannot be reused on other pages

<head><style type="text/css">

hr {color:#888;}p {margin-left:20px;}body {background-

image:url("images/back40.gif");}</style>

</head>

Inline Styles

Mix content with presentation Is not a reusable pattern so should

be used very sparingly Styles only apply specifically to the

element they are placed on A “style” attribute is used to define

inline styles

<p style="color:green; margin-left:20px">This is a paragraph.</p>

CSS Import

@import is another way of loading an external css style

@import must come before all other content in CSS

@import has performance implications and is slower than other methods of applying styles

<style>

@import url('/css/typography.css');

@import url('/css/layout.css');

@import url('/css/color.css');

</style>

Multiple style sheets

If properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet

Styles will “cascade” into a new virtual style sheet conforming to the following rules. 1 is the lowest priority and 4 is the highest priority

1. Browser default2. External style sheet3. Internal style sheet (in the head section)4. Inline style (inside an HTML element)

CSS Box Model

All HTML elements can be considered as boxes

Can be thought of as a box that wraps around HTML elements consisting of Margins Borders Padding Content

CSS Box Model

• Margin – Clears area around the border. It is completely transparent and does not have a background color

• Border – Goes around padding and content. It is affected by the background color of the box

• Padding – Clears an area around the content. Padding is affected by the background color of the box

• Content – Content within the box where text and messages appear

Width and height of an element When you set width and height in css, you only

set the width and height of the content area eg div.ad {

width : 300px;height: 100 px;padding : 10px;border: 5px solid #0F0;

} To get the total width or height of an element you

must also add the margins and borders For the div aboveTotal width = 300 + (10x2) + (5x2) = 330px

Styling backgrounds

Background color Specifies the background color of an element body { background-color:#7355DA;}

CSS colors can be Hex value: #ffee44 RGB value: rgb(255,0,0) Color name: red

Background image body {background-image:url(‘main_back.jpg’);} Background images can be repeated vertically or horizontally body {

background-image:url(‘main_back.jpg’);}background-repeat:repeat-x;

}

Background position

Background image position This can be specified with the

background-position property body {

background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top;}

Background Shorthand property A shortened form can be used to represent

backgrounds

body { background:#ffffff url('img_tree.png') no- repeat right top;} When using the shorthand property the order of the

property values is: background-color background-image background-repeat background-attachment background-position

Styling text

Color p { color:#f00;}

Text Alignment p { text-align: right; }

Text Decoration span.link { text-decoration: underline; }

Text Transformation p.uppercase { text-transform: uppercase; } p.lowercase {text-transform: lowercase; }

Text Indent p {text-indent : 5px; }

Styling Fonts

In CSS, there are two types of font family names generic family – A group of font families

with a similar look (e.g. Serif or Monospace)

font-family – A specific font family (e.g. Arial, Verdana)

Styling Fonts

CSS Font Syntax p {font-family: “Times New Roman”,

Times, serif; }

Styling Fonts

Font Style p.normal { font-style: normal;} p.italic{ font-style: italic;}

Font Size Absolute e.g. 10px;

Sets font to specific size Does not allow user to change the text size in a

browser. Bad for accessibility Relative eg 1.2 em

Sets size relative to surrounding elements Allows user to change font size

Default font size is 1em or 16px

CSS Grouping

Allows you to provide the same style to a group of elements

Elements or selectors are comma separated

e.g. h1,h2,p {

color:#897944;}

CSS Nesting

You can specify certain conditions for styles to be inherited

This is good if you can accurately predict the structure of your markup

Look at the following examplep { color:blue; text-align:center;}.marked { background-color:red; }.marked p { color:white;}

When a p occurs after a .marked element, its color will be white

Case Study

Example page

Exercise Create the markup and CSS which

will display the following output