Week3 css

CSS - what? Cascade Style Sheets Defines how to display HTML elements (fonts, size, colors, background images, border, styles) Add to HTML 4.0 Stored in CSS files All browsers support CSS Defined by the World Wide Web consortium (W3C) CSS Website Example http:// www.csszengarden.com /

CSS - why??? Advantages Saves time editing (define once on the element, next time the elements will automatically defined) Page load faster Easy maintenance Superior styles to HTML (much wider array of attributes) Disadvantage Browser compatibility

syntax A CSS rule has two main parts: a selector, and one or more declarations The selector is 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. Each property has a value.

how to ?? Text editors Notepad/WordPad for Windows; TextEdit for Mac Dreamweaver has a function embedded into the program. Comments /* This is for CSS. */ Grouping h1, h2, h3 {color: blue;} Applying multiple properties h1 {color: blue; font-size: 150%; font-family: arial, Helvetica, “sans serif”; }

inline and internal styles <html> <head> <title>Project One</title> </head> < body > <p > This is a red page. </p> </body> </html> <style type="text/css"> body {background-color: #ff0000;} p {color: blue; margin-left:20px;} </style> style="background-color: #ff0000;" style="color:blue;margin-left:20px ;"

external style (1) Create a text file and save as .css Create a link in HTML document The css style sheet contains only styles

external style – where to put it?

p{margin-left:20px;} body{background-color:#ff0000;} external style – how to write it? mystyle.css project.html <html> <head> <title>Project One</title> <link rel="stylesheet" type="text/css" href=“mystyle.css" /> </head> <body> ...

cascade order Styles can be specified: Inside an HTML element (in-line) Inside the head section of an HTML page (internal) In an external CSS style sheet (external) All the styles will cascade into a new style sheet by the following rules, where number 1 has the highest priority: inline style internal style external style browser default

CSS code reference Text Color body {color:blue} h1 {color:#00ff00} h2 {color:rgb(255,0,0)} Text Alignment h1 {text-align:center} p.date {text-align:right} p.main {text-align:justify} Text Decoration h1 {text-decoration:overline} h2 {text-decoration:line-through} h3 {text-decoration:underline} h4 {text-decoration:blink}

CSS code reference font p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif;} Using the short hand property, the code can be simplified: p { font: italic bold 30px arial, sans-serif; }

CSS code reference link a:link {color: blue;} (unvisited link) a:visited {color: red;} a:active {background-color: #ffff00;} (active link) a:hover {color: orange; font-style: italic; letter-spacing: 10px; font-weight:bold; text-transform: uppercase; background-color:yellow;}

4 selector types Tag: re-define an existing HTML element ID: applies to only one HTML element Class: applies to any HTML element Compound: used to combine two or more style rules to create a style definition that displays only when one style is contained within another. Read: CSS selectors: tags, ID, class and compound

ID #id used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". <html> <head> <style type="text/css"> #para1 {text-align:center; color:red;} </style> </head> <body> <p id="para1" >Hello World!</p> <p>This paragraph is not affected.</p> </body> </html> Hello World! This paragraph is not affected. P P P P

CLASS .classname used to specify a style for different elements. allows you to set a particular style for any html elements with the same class. uses the html class attribute, and is defined with a "." P h1 h4 h2

CLASS (example) <html> <head> <style type="text/css"> .center{text-align:center;} </style> </head> <body> <h1 class="center" >center-aligned heading</h1> <p class="center" >center-aligned paragraph.</p> /body> </html> center-aligned heading center-aligned paragraph.

recap 3 places inline internal style (between <head></head>) external style (save as .css, html links in the head section) Selectors tag style (applies globally to an individual HTML tag) Id style (format a unique item on a page) class style (format more than 1 item at the same time) compound style

Set up the working space Click Window tab > click CSS style to open CSS panel On Properties panel, choose CSS tab

create a new CSS style CSS style panel highlight the text or image or table + add new CSS rule >selector (class, id, tag, or compound) name internal or external or defined .css file define elements Properties Panel click CSS mode highlight the text or image targeted rule: new CSS rule>edit rule> open a window > choose the appropriate selector - class, id, tag, or compound > name it define the elements

apply existing styles Properties Panel For non-text elements, find class button and click the arrow, choose the existing class from the list; For text elements, click CSS mode> targeted rule , choose the existing class from the list.

remove a style Property panel: <HTML> mode >class>none or <CSS> mode> targeted rule>remove class ** It only remove the style form the item, but the class is still there.

style, style, more style Edit Styles Find the rule in CSS panel Click on it Change it in the window Rename a class style Properties Panel > class menu>rename or Right click the rule in CSS panel Duplicate a style CSS style panel > right click the style name> duplicate

Link to an existing CSS style sheet Open the HTML file CSS style panel>attach style sheet >browse>all media Attach style sheet button This is your .css file name.

Week3 css

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Week3 css (20)

Recently uploaded (20)

Week3 css