Styling with CSS

transcript

webdev@rgustyling with css

overviewpurpose of css syntax of css benefits of css APPLYING CSS

USING CSS WITH HTML CSS Selectors Pseudo Selectors CSS Values and Units

PURPOSE OF CSS

HTML IS USED TO SPECIFY CONTENT AND STRUCTURE • CONTENT: TEXT IN PARAGRAPHS, DATA IN TABLES,

IMAGES AND OTHER MEDIA • STRUCTURE: LOGICAL FLOW OF PAGE

COMPONENTS CONTAINING CONTENT (E.G. DIVS, SECTIONS HEADERS ETC.)

overview

CASCADING STYLE SHEETS (CSS) ARE USED TO SPECIFY THE PRESENTATION STYLE AND LAYOUT OF ELEMENTS WITHIN AN HTML PAGE • DISTINCT WEB TECHNOLOGY • NOT PROGRAMMING OR MARK-UP LANGUAGE • SIMPLE A SEQUENCE OF RULES TO APPLY

CSS DECLARES RULES THAT: • SELECT WHICH HTML ELEMENTS SHOULD BE

STYLED • SPECIFY THE PROPERTIES TO MANIPULATE • GIVE VALUES TO THESE PROPERTIES

OPERATION

WEB BROWSERS COMBINE HTML AND CSS TO RENDER A COMPLETE WEB PAGE • BOTH MUST BE LINKED TOGETHER

• SORT BY SPECIFICITY ALL DECLARATIONS APPLYING TO A GIVEN ELEMENT.

• THOSE ELEMENTS WITH A HIGHER SPECIFICITY HAVE MORE WEIGHT THAN THOSE WITH LOWER SPECIFICITY

• SORT BY ORDER ALL DECLARATIONS APPLYING TO A GIVEN ELEMENT.

• THE LATER A DECLARATION APPEARS IN THE STYLE SHEET OR DOCUMENT, THE MORE WEIGHT IT IS GIVEN

• DECLARATIONS THAT APPEAR IN AN IMPORTED STYLE SHEET ARE CONSIDERED TO COME BEFORE ALL DECLARATIONS WITHIN THE STYLE SHEET THAT IMPORTS THEM.

cascading rules

default browser styles

user style stylesauthor style sheet

Author embedded stylesAuthor inline styles

SYNTAX OF CSS

FIND EVERY <H2> ELEMENT ON A PAGE (SELECT) SPECIFY THAT ITS COLOUR (PROPERTY) SHOULD BE BLUE (VALUE)

EXAMPLE

H2 { COLOR: “BLUE”;

CSS SYNTAX PATTERNSELECTOR1 {

PROPERTY: “VALUE”; }

SELECTOR2 { PROPERTY1: “VALUE”; PROPERTY2: “VALUE”; PROPERTY: “VALUE”;

SYNTAX RULES TO REMEMBERSELECTOR1 {

1. SELECTOR IDENTIFIES THE HTML ELEMENTS THAT THE RULE(S) WILL BE APPLIED TO

2. CURLY BRACKETS CONTAIN ALL OF THE RULES FOR THIS SELECTOR

3. RULES ARE SEPARATED BY A SEMICOLON

3. RULES ARE SEPARATED BY A SEMICOLON 4. THE PROPERTY OF A RULE DEFINES WHAT ASPECT

OF THE ELEMENT WILL BE AFFECTED 1. COLOUR, FONT, POSITION, BORDERS ETC.)

5. THE VALUE OF A RULE SPECIFIES HOW THE PROPERTY WILL BE AFFECTED

6. PROPERTIES AND THEIR VALUES ARE SEPARATED BY A COLON

TABLE {

WIDTH: 80%; MARGIN: 0; BACKGROUND: #FFFFFF; BORDER: 1PX SOLID #333333;

STYLE.CSS

<TABLE> <CAPTION>THIS IS MY TABLE CAPTION</CAPTION>

</TABLE>

INDEX.HTML

BENEFITS OF CSS

OVERCOMES THE LIMITATIONS OF ADDING STYLE USING HTML ALONE • BASIC TABLES AND FORMS VERY SIMPLE WEB TECHNOLOGY (IN TERMS OF SYNTAX) YET VERY POWERFUL • ENDLESS COMBINATIONS OF RULES FOR

ELEMENTS

BENEFITS OF CSS

INDEX.HTML

ABOUT.HTML

PHOTOS.HTML

MIKEISAWESOME.HTML

STYLE.CSS

EDIT A SINGLE FILE PROPAGATES CHANGES TO ALL

INDEX.HTML

ABOUT.HTML

PHOTOS.HTML

MIKEISAWESOME.HTML

STYLE.CSSMORESTYLE

CAN LINK TO MULTIPLE STYLE

SHEETS

CONTENT & STRUCTURE CONCERNS

PRESENTATION & LAYOUT CONCERNS

• CASCADING STYLE SHEETS (CSS) IS A METHOD OF SEPARATING A PAGE’S STRUCTURE AND CONTENT FROM ITS PRESENTATION

• CSS ALLOWS FOR A MUCH RICHER PAGE APPEARANCE THAN WITH HTML ALONE (NO MORE TABLES)

• CSS CAN SAVE TIME AS THE APPEARANCE OF THE ENTIRE PAGE APP CAN BE CREATED AND CHANGED IN JUST ONE PLACE

• CSS CAN IMPROVE LOAD TIMES AS IT COMPACTLY STORES THE PRESENTATION CONCERNS OF A PAGE IN ONE PLACE INSTEAD OF BEING REPEATED THROUGHOUT THE PAGE

benefits of css

• THERE ARE DIFFERENT SELECTOR RULES BEYOND SIMPLE ELEMENTS

• THERE ARE LOTS OF PROPERTIES AND THEY VARY ACROSS DIFFERENT HTML ELEMENTS

• THERE ARE MANY PROPERTY/VALUE COMBINATIONS; NOT ALL OF WHICH WORK AS EXPECTED

CHALLENGES OF CSS

APPLYING CSS

• STYLESHEETS DESCRIBE THE RENDERING OF HTML ELEMENTS

• THEY SPECIFY STYLISTIC ASPECTS OF INDIVIDUAL ELEMENTS OR ALL ELEMENTS OF A PARTICULAR KIND

• A CSS CONSISTS OF A SET OF FORMATTING RULES, WHICH ARE SPECIFIED IN THE FOLLOWING WAY:

APPLYING CSS

SELECTOR2 { PROPERTY1: “VALUE”; PROPERTY2: “VALUE”; PROPERTY: “VALUE”;

APPLYING STYLESSELECTOR2 {

PROPERTY1: “VALUE”; PROPERTY2: “VALUE”; PROPERTY: “VALUE”;

P { FONT-SIZE: 12PT; FONT-FAMILY: “VERDANA”;

APPLIES TO ALL <P> ELEMENTS

H1, H2, H3 { COLOR: RED; FONT-SIZE: 18PX;

APPLIES TO ALL <H1>,<H2>, AND <H3> ELEMENTS

* { TEXT-ALIGN: LEFT;

APPLIES TO ALL ELEMENTS

#MENU A { PADDING: 45PX 25PX 0PX 0PX; B0RDER: NONE;

APPLIES TO ALL <A> ELEMENTS WITH

ID=“MENU

.menu { PADDING: 100PX;

APPLIES TO ALL ELEMENTS WITH

CLASS=MENU

LOTS MORE EXIST…HERES A GOOD REFERENCE http://www.w3schools.com/cssref/css_selectors.asp

USING CSS WITH HTML

APPLYING CSS

• INLINE: STYLE INFORMATION IS ADDED DIRECTLY TO ONE PARTICULAR ELEMENT USING ITS STYLE ATTRIBUTE

• CSS SYNTAX IS USED AFTER THE STYLE ATTRIBUTE IN AN HTML TAG

• THIS ONLY EFFECTS THIS ELEMENT, OTHERS OF THE SAME TYPE ARE NOT EFFECTED.

• USEFUL TO OVERRIDE EXISTING STYLE, BUT BREAKS THE SEPARATION OF CONTENT AND PRESENTATION

INLINE CSS SPECIFICATION

• EMBEDDED: STYLE RULES CAN BE SPECIFIED IN THE <HEAD> SECTION OF THE PAGE

• THESE RULES WILL BE APPLIED TO THE ENTIRE PAGE

EMBEDDED CSS SPECIFICATION

<html> <head> <style> h3 { color: yellow; font-size: 18pt; } </style> </head> <body> <h3> This will be yellow font size 18 </h3> … </body> </html>

• EXTERNAL: IN A SEPARATE FILE WHICH CAN BE SHARED BY SEVERAL PAGES. THE FILE EXTENSION IS “.CSS”

• THIS IS PERHAPS THE BEST METHOD IN TERMS OF: • SEPARATION OF CONCERNS • MAINTENANCE • PERFORMANCE

EXTERNAL CSS SPECIFICATION

CSS Selectors

APPLYING CSS

• CLASS AND ID SELECTORS CAN BE USED FOR FINER CONTROL

• THIS INVOLVES MORE PLANNING/EFFORT WITH PAGE MARKUP

• BUT CAN RESULT IN A BETTER USER EXPERIENCE

• IT IS ALSO VERY IMPORTANT FOR MANIPULATING ELEMENTS IN JAVASCRIPT

• THE EFFORT ALSO PAYS OFF IF YOU USE LIBRARIES LIKE JQUERY

SPECIALISATION OF PRESENTATION

• USED TO DEFINE A SPECIAL CASE FOR AN ELEMENT

• IDS ARE MEANT TO UNIQUE AND ONLY USED ONCE

• HOWEVER, SOME BROWSERS ARE NOT PARTICULARLY FUSSY

ID SELECTORS#first-para {

font-weight: bold; }

<p id=“first-para”>This paragraph will be bold-faced</p>

class SELECTORS.warning {

font-weight: bold; }

<p class="warning">This text will be displayed in bold.</p>

<p>This text will NOT be displayed in bold.</p>

• CLASS SELECTOR ALLOW YOU TO STYLE ITEMS WITH THE SAME HTML ELEMENT DIFFERENTLY

• THEY WORK WHEN THE CLASS ATTRIBUTE OF AN HTML TAG IS GIVEN A NAME

• USED TO STYLE MANY HTML ELEMENTS

TAG SELECTORSh1 {

color: green; }

p { color: red;

<h1>This will be green</h1>

• USED TO STYLE SPECIFIC TAGS

groupingh1, h2, h3 {

color: green; }

p { color: red;

<h1>This will be green</h1> <h2>So will this</h2> <h3>and so will this</h3>

• MULTIPLE SELECTORS CAN BE GROUPED TOGETHER

descendant selectorssection.news h1 {

color: green; }

<h1>This will be green</h1>

</div> </section>

• USED TO SELECT ELEMENTS THAT ARE DECEDENTS OF THE ELEMENT IN THE DOCUMENT TREE

• NOT NECESSARILY DIRECT CHILDREN

child selectorssection.news > h1 {

color: green; }

<h1>This will not be green</h1>

</div> </section>

• USED TO SELECT CHILD ELEMENTS THAT ARE DECEDENTS OF THE ELEMENT IN THE DOCUMENT TREE

<section id=news> <h1>This will be green</h1>

</section>

adjacent sibling selectorsh1 + h2 {

color: green; }

<h1>Green</h1> <h2>Green</h2> <p>Not Green</p>

• SELECT THE SIBLING ELEMENT DIRECTLY FOLLOWING ANOTHER ELEMENT

<h1>Not Green</h1> <p>Not Green</p> <h2>Not Green</h2>

universal selectors* {

color: blue; }

<li>All the things are blue</li> </ul>

• USED TO SELECT ELEMENTS THAT ARE DECEDENTS OF THE ELEMENT IN THE DOCUMENT TREE

• NOT NECESSARILY DIRECT CHILDREN

pseudo selectors

APPLYING CSS

• WE CAN APPLY EVEN MORE DETAILED CSS TO ELEMENTS THROUGH THE USE OF PSEUDO CLASSES

• CAN BE USED TO: • STYLE AN ELEMENT WHEN A MOUSE IS OVER IT • STYLE VISITED AND UNVISITED LINKS • STYLE A FOCUSED ELEMENT

pseudo elements

colouring links/* MOUSE OVER LINK */ A:HOVER { COLOR: #FF00FF; }

/* SELECTED LINK */ A:ACTIVE { COLOR: #0000FF; }

/* UNVISITED LINK */ A:LINK { COLOR: #FF0000; }

/* VISITED LINK */ A:VISITED { COLOR: #00FF00; }

other pseudo elements

:AFTER :BEFORE :FIRST-CHILD :FOCUS :FIRST-LETTER :FIRST-LINE :LANG

• MORE EXISTS BUT FOR THE MOST PART YOU’LL WANT TO USE THE ONES THAT CAN COLOUR LINKS.

CSS Values and Units

APPLYING CSS

• WORDS • AFFECT THE COLOURS, DISTANCES, AND SIZES

OF A WHOLE HOST OF PROPERTIES OF AN ELEMENTS STYLE

• TEXT-ALIGN: CENTRE;

VALUES AND UNITS

• NUMERICAL VALUES • NORMALLY FOLLOWED BY A UNIT TYPE

• LENGTH UNITS • INCHES (IN) • CENTIMETERS (CM) • MILLIMETERS (MM) • POINTS (PT) • PICAS (PI)

• RELATIVE UNITS • EM IS RELATIVE TO THE GIVEN FONT-SIZE VALUE • E.G. FONT SIZE IS 14PX, 1EM=14PX

• PX IS (SHOULD) BE THE SIZE OF A PIXEL ON THE MONITOR

• GENERALLY THE RECOMMENDED UNIT TO USE

VALUES AND UNITS

• COLOUR • NAMED COLOURS (RED) • FUNCTIONAL RGB (255,0,0) • HEXADECIMAL RGU CODES (#FF0000)

VALUES AND UNITS

recappurpose of css syntax of css benefits of css APPLYING CSS

USING CSS WITH HTML CSS Selectors Pseudo Selectors CSS Values and Units

Styling with CSS

Software