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
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 {
PROPERTY: “VALUE”; }
SYNTAX RULES TO REMEMBERSELECTOR1 {
PROPERTY: “VALUE”; }
1. SELECTOR IDENTIFIES THE HTML ELEMENTS THAT THE RULE(S) WILL BE APPLIED TO
SYNTAX RULES TO REMEMBERSELECTOR1 {
PROPERTY: “VALUE”; }
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
SYNTAX RULES TO REMEMBERSELECTOR1 {
PROPERTY: “VALUE”; }
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
SYNTAX RULES TO REMEMBERSELECTOR1 {
PROPERTY: “VALUE”; }
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 4. THE PROPERTY OF A RULE DEFINES WHAT ASPECT
OF THE ELEMENT WILL BE AFFECTED 1. COLOUR, FONT, POSITION, BORDERS ETC.)
SYNTAX RULES TO REMEMBERSELECTOR1 {
PROPERTY: “VALUE”; }
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 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
SYNTAX RULES TO REMEMBERSELECTOR1 {
PROPERTY: “VALUE”; }
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 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
FILES
INDEX.HTML
ABOUT.HTML
PHOTOS.HTML
MIKEISAWESOME.HTML
STYLE.CSSMORESTYLE
.CSS
CAN LINK TO MULTIPLE STYLE
SHEETS
.HTML
CONTENT & STRUCTURE CONCERNS
.CSS
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
APPLYING STYLESSELECTOR2 {
PROPERTY1: “VALUE”; PROPERTY2: “VALUE”; PROPERTY: “VALUE”;
}
* { TEXT-ALIGN: LEFT;
}
APPLIES TO ALL ELEMENTS
#MENU A { PADDING: 45PX 25PX 0PX 0PX; B0RDER: NONE;
}
APPLIES TO ALL <A> ELEMENTS WITH
ID=“MENU
APPLYING STYLESSELECTOR2 {
PROPERTY1: “VALUE”; PROPERTY2: “VALUE”; PROPERTY: “VALUE”;
}
.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
<H3 STYLE=“COLOUR: GREEN; FONT-SIZE: 18PT”>
• 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
<head> <link rel="stylesheet" href="master.css" type="text/css"> </head>
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>
<p>This will not be bold</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>
<p>This will be red</p>
• 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>
<p>This will be red</p>
• MULTIPLE SELECTORS CAN BE GROUPED TOGETHER
descendant selectorssection.news h1 {
color: green; }
<section class=news> <div>
<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; }
<section class=news> <div>
<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; }
<h1>This is blue</h1> <p>This is blue</p> <ul>
<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