CSS Basic Syntax (1)

CSS Basic Syntax/* part 1 */

Using Sample Code

Introduction

This is Part-1 of a basic introduction to CSS syntax See “HTML Basic Tags” for an introduction to HTML markup

This presentation is designed to be a starting point for learning CSS Subsequent presentations build on this starting point All you need to get started is a text editor and a browser So, enjoy!

Objectives

With practice, you will be able to: Create inline, internal, and external styles Recognize and use cascading rules and rules of inheritance Use tag, ID, and class selectors to target specific HTML page elements Refine target HTML elements with descender and combination selectors Add comments to styles Use color names to set text formatting Add background color and images Manage repeat, scroll and position properties Use shorthand notation to set background properties

Not Here

See later presentations for Font and Text properties – Part 2 Margins, borders, and padding – Part 3 Lists, links, and tables - Part 4 Floats, layouts, and positioning elements – Part 5 Working with color – Part 6 Responsive and mobile design – depending on interest CSS3 Effects – depending on interest

Default Styles

<!DOCTYPE html><html><head> <title> Default Styles </title></head><body> <h1> Default Styles </h1> <p> Without CSS, the default browser styles are used. </p></body></html>

Without CSS, this page renders with the browser default styles

Text is black on white and uses the default font

<h1> is large and bold Headings and paragraphs are

separated with extra whitespace

CSS Styles

<!DOCTYPE html><html><head> <title> CSS Styles </title></head><body style=“background:blue;” > <h1> Inline Styles </h1> <p> CSS is used to change browser default styles. </p></body></html>

CSS changes the browser default style where specific styles are applied

All other HTML styles are unchanged and continue to inherit browser styles

Only the background changes from the default styles – from white to blue

<h1> and <p> tags will not change

Styles

CSS styles can be written as inline, internal, or external styles

Inline styles are written as quoted attributes within a specific tag element Inline styles are specific to the tag

Internal styles use <style> </style> tags in the <head> section of a page Internal styles are specific to the page in which they are declared

External styles are declared in an external .css stylesheet and uses a <link> tag in the <head> section to reference the .css file

External styles can be applied site-wide and are recommended as best practice

Inline Styles

<bodystyle = “background :

blue;” >

<h1> Inline Style </h1><p> Inline styles are

declared as an attribute of any tag. </p>

</body>

Inline styles are added as a quoted attribute within the opening tag of the selected element

Inline styles are difficult to maintain and generally not recommended

They are specific to the tag/page

Internal Styles

<head> <style>

body {background : blue;

} </style></head>

Internal styles are declared using the <style> tag

<style> tags are added within the <head> section of a web page

Internal styles share a common syntax with external styles (more later)

Inline styles override external styles

External Styles

<head><link href=“styles.css”

rel=“stylesheet” /></head>

External styles are declared in a separate, external .css file

The .css file is linked to the current web page using a <link> tag within the <head> section

The href attribute declares the name (and path) of the external file

The rel=“stylesheet” attribute sets the relationship between the web page and the external .css file

Link tags are self-closing

“Cascading" Style Sheets

External, Internal, Inline, and default styles establish a hierarchy of styles CSS styles declared closest to the tag override previous styles Inline styles declared in the tag override all other styles Internal styles (declared on a page) override external styles All CSS styles override the browser default styles This is the “cascade” within the meaning of CSS (Cascading Style Sheets)

“Cascading" Style Sheets

Multiple CSS files can be linked to a single web page The order of the <link> declarations affects which styles are applied fist/last If a conflict occurs, the last declared styles will be applied

If a <link> tag is declared after an internal <style> declaration, then the external stylesheet becomes closer to the tag and will override the internal style!

Summary 1

Default browser styles can be changed using CSS CSS only changes the elements to which they are applied

CSS styles can be written as inline, internal, or external styles

Inline styles are quoted attributes and are specific to a tag Inline styles are difficult to maintain and generally not recommended

Summary 1

Internal styles are declared within <style> tags in the <head> section of a page and are specific to that page

External styles are declared in an external stylesheet and the <link> tag links the external stylesheet to the web page by referencing the location of the .css file

External styles can be used site-wide

CSS establish a hierarchy of styles where later style rules override previous ones

This is the “cascade” in Cascading Style Sheets

p {background: blue; color: white;text-align: center;

}

Internal and external styles share a common syntax

The <head> reference is different but the declaration syntax is the same

Learning CSS is all about learning the structure and syntax of the rules

As well as the property-value pairs that are available

Syntax

External styles are declared in a plain text file and saved with a .css filename External files include only style declarations – and comments Spaces can be used to separate style declarations

Internal styles are declared on each web page in the head section between <style> tags

The advantage of using external files is the ease of maintenance There is only a single file to make any changes

Syntax

p {background: blue; color: white;text-align: center;

}

CSS syntax rules consists of a selector and a declaration block

Selectors target the HTML element(s) to be styled

Declaration blocks contain one or more property value pairs inside curly braces

Each property value pair is separated by a colon and ends with semicolon

Syntax

Tag Selectors

p { color: white; }h1, h2, h3 { color: blue; }

Tag names (without angle brackets) can be used as selectors to target all elements of that type

A comma separated list can be used to apply a single CSS rule to more than one tag name

ID Selectors

#top { color: blue; }#main { color: blue; }

#top, #main { color: blue; }

id attributes can be used as selectors

A #sign is added to the id name in the CSS rule (no spaces)

A comma separated list can be used to apply a single CSS rule to more than one id name

Class Selectors

.note { color: blue; }

.special { color: blue; }

.note, .special { color: blue; }

Class names can be used as selectors

A period is added to the class name in the CSS rule (no spaces)

A comma separated list can be used to apply a single CSS rule to more than one class name

Descendant Selectors

div p { color: blue; }ul li { color: red; }

Tags nested within other tags form a parent-child relationship

Use a space separated list to target nested tags – as “descendants”

div p applies only to paragraphs that are nested within a div tag

ul li applies only to list items that are in unordered lists

Paragraphs not inside div tags and li tags in ordered lists are not affected

Combining Selectors

p.note { color: red; }span.note { color: blue; }

A tag.class selector targets a specific subset of tags with the class name paragraphs with class .note will be

red span tags with class .note will be

blue other elements with the class .note

are not affected Paragraphs and span tags without

the class name are also not affected

Combining Selectors

div p.note { color: red; }li span.note { color: blue; }

Combining descender and tag.class selectors refines the target even more p.note will be red only within a div

tag span.note will be blue only within a

list other elements with the class .note

will not be affected There is a lot more to selectors – but

these will get you started

Comments

/* This is a comment */

/* Comments can be in a single line or on multiple lines */

Comments begin with a slash star and end with its /* opposite */

Comments add useful information for stylesheet developers

They are ignored when processed by the browser

Summary 2

Internal styles are declared in the head section of a page External styles are declared in a plain text file with a .css file extension Internal and external styles share a common syntax Selectors identify the element to be styled Declaration blocks mark the beginning and end of a rule with curly braces Property and value pairs assign styles to specific attributes of the selector

Summary 2

A selector is used to target specific page element(s) Common selectors are tag names, class names, and id names Selectors can be used individually or in a comma separated list

They can be made more specific using a space separated list This establishes a nested “descender” relationship by including a parent

element A tag.class combination can also be used to target a more specific element Descender and tag.class can also be combined

Summary 2

Style rules are declared between opening and closing curly braces Rules consist of property and value pairs separated by a colon: Each property and value pair ends with a semicolon; Add /* comments */ for clarity

Learning CSS is about learning the selectors, properties and values that are available in CSS – which we start to cover next

Text Color

p { color: white; }h1, h2, h3 { color: blue; }

When used by itself, color refers to the text color – the foreground color

There are over 100 color names that can be used in CSS

There are also HEX, RGB, and HSL notations for declaring color values

This presentation will get you started with some common color names

Color Names

black, white, silver, gray (grey) red, pink, magenta, purple, green, yellow, lime, olive blue, navy, teal, aqua yellow, gold, orange, tomato

lightGrey, lightGreen, . . . darkRed, darkBlue, . . .

Here are 20 common color names to get you started

Light and dark can be used with some colors written as a single word

A google search for css color names will give you lots of choices

Names are not case sensitive but it is usual for values to be lowercase

Background Color

body { background: darkGray;

}

div {background: lightGray;

}

Color names can also be used to set the background property of a page or page element

This example uses shorthand notation to declare the background property

There is also a more specific notation using background-color: darkGray;

Throughout this presentation, we use shorthand notation to get you started

Background Image

body { background:

url(“bkgnd.jpg”); }

div {background:

url(“bkgnd.jpg”); }

Images can be used as backgrounds The url(“path”) notation is used to

indicate the file name and location There is also a more specific

notation background-image: url(“path”);

This example uses shorthand notation to set the background property

Background Repeat

body { background:

url(“bkgnd.jpg”) repeat-x ;}

div {background:

url(“bkgnd.jpg”) repeat-y ; }

Background images repeat in both directions - horizontally and vertically

Use repeat-x or repeat-y to specify a single direction

When using shorthand notation the closing semicolon is used only once at the end of a space separated list

When specific notation is used the semicolons are used in each case background-repeat : repeat-x ;

No Repeat and Position

body { background:

url(“bkgnd.jpg”)no-repeat top right ;

}

div {background:

url(“bkgnd.jpg”)no-repeat top right ;

}

A single image can appear in the background using no-repeat

When no-repeat is used the image is placed top-left of its parent container

The position property can be used to place the image in one of 9 positions

The more specific notation can also be used for both repeat and positionbackground-repeat : no-repeat ; background-position : top right ;

Background Position

left topleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottom

The background-position is relative to the parent container

This may be different than the page except when applied in the body

Experiment with placing the image at different positions and elements

A single value can be used when the second value defaults to “center”

Fixed or Scroll

body { background:

url(“bkgnd.jpg”)no-repeat fixed top

right ; }

div {background:

url(“bkgnd.jpg”)no-repeat fixed top

right ; }

Background images will scroll with the page by default

To change this, add the fixed value to the background property

Notice the placement location of the fixed value – the order is important

However, the more specific notation can be used in any orderbackground-attachment : fixed ;

Shorthand Sequence

background: lightgrey url(“bkgnd.jpg”) norepeat fixed top right ;

background-color: lightgrey ; background-image: url(“bkgnd.jpg”);background-repeat: norepeat; background-attachment: fixed; background-position: top right;

When using shorthand notation the order of the values is important

The order must be declared in the sequence shown oppositecolor image repeat fixed position

Individual values can be omitted but the sequence cannot be changed

The more specific notation can be used in any order

Color and Image

background: lightgrey url(“bkgnd.jpg”) norepeat fixed top right ;

It is common to add a background color with a background image

This allows a complimentary color to show when a repeat restriction is used

Also when images may be disabled

Summary 3

The color property refers to the text color There are over 100 color names that can be used in CSS Names are not case sensitive but common practice suggests lowercase Other notations include HEX, RGB, and HSL

Color names can also be used with the background property A shorthand notation can be used – background: grey; Or the more specific notation – background-color: grey;

Summary 3

Images can be used as backgrounds using the url(“path”) notation The path should include the location, file name, and extension Background images repeat in both directions by default The background-repeat property can be used to repeat in a single direction

or to display as a single image using repeat-x or repeat-y or no-repeat.

The no-repeat value positions the image at the top-left of the container Use the position property to place the image in any of 9 positions The background is positioned relative to the parent container

Add the fixed value to the background property to prevent default scrolling

Summary 3

Shorthand notation declares a single background property with multiple values

A single closing semicolon is used at the end of a space-separated list The order of the values is important (color image repeat fixed position) Individual values can be omitted, but the sequence cannot be changed Adding a background color with a background image allows a complimentary

color to show when a repeat restriction is used or images are disabled

Summary 3

background: lightgrey url(“bkgnd.jpg”) no-repeat fixed top right ;

background-color: lightgrey ; background-image: url(“bkgnd.jpg”);background-repeat: no-repeat; background-attachment: fixed; background-position: top right;

Here is a summary of the shorthand and more specific notation

Inheritance

Tags that are nested within other tags inherit the style of the parent tag All tags are nested within the body tag – so all tags inherit from the body tag CSS can target and change specific properties for specific elements But, again – only the specified styles are changed – all others continue to

inherit from the parent – whether from inline, internal, external, or default browser styles

Review

How did you do? Are you able to: Create inline, internal, and external styles Recognize and use cascading rules and rules of inheritance Use tag, ID, and class selectors to target specific HTML page elements Refine target HTML elements with descender and combination selectors Add comments to styles Use color names to set text formatting Add background color and images Manage repeat, scroll and position properties Use shorthand notation to set background properties

Next

In Part 2 we cover Font and Text properties

s l i d e d e c k b yPe t e r Ru s h t o n

isharebyme @gmail.com

Software

CSS Basic Syntax (1)