Scribd
Upload
106 views

Basic CSS Tutorial PDF

This document provides an introduction to basic CSS (Cascading Style Sheets) including what CSS is, why it is used, how to reference CSS from HTML, CSS syntax, selectors, grouping selectors, conflict resolution, common CSS properties, and recommended developer tools. CSS is used to specify style and layout of elements on an HTML page and allows separation of document content from presentation for better organization and reuse of styles across pages.

Uploaded by

Mihaila Claudiu-Daniel
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
106 views

Basic CSS Tutorial PDF

This document provides an introduction to basic CSS (Cascading Style Sheets) including what CSS is, why it is used, how to reference CSS from HTML, CSS syntax, selectors, grouping selectors, conflict resolution, common CSS properties, and recommended developer tools. CSS is used to specify style and layout of elements on an HTML page and allows separation of document content from presentation for better organization and reuse of styles across pages.

Uploaded by

Mihaila Claudiu-Daniel
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

Basic CSS

Author: Dwight VanTuyl Created: September 29, 2008 The LINGUIST List

What is CSS?
Cascading: Multiple styles can overlap in order to specify a range of style from a whole web site down to a unique element. Which style gets applied pertains to the rules of CSS cascading logic. Style: CSS deals specifically with the presentation domain of designing a web page (color, font, layout, etc). Sheet: Normally, CSS is a file separate from the HTML file linked to the HTML file through its <head> (exceptions apply).

Why CSS?
Allows for much richer document appearances than HTML. Reduce workload by centralizing commands for visual appearance instead of scattered throughout the HTML doc. Use same style on multiple pages. Reduce page download size. Use HTML for content; CSS for Presentation.

Reference CSS from HTML


<link rel=stylesheet type=text/css href=lipstick.css />

pig.html
<html> <head> <link rel="stylesheet" type="text/css" href=lipstick.css" /> </head> </html>

lipstick.css

CSS Syntax
Selector Style Block

h1

{ color: red;
Style Values

Element Properties

background: yellow; }

The Selector selects elements on the HTML page. The associated Style Block applies its Style Values to the selected Elements Properties

Selectors
Select elements to apply a declared style. Selector types:
Element Selectors: selects all elements of a specific type (<body>, <h1>, <p>, etc.) Class Selectors: selects all elements that belong to a given class. ID Selectors: selects a single element thats been given a unique id. Pseudo Selectors: combines a selector with a user activated state (:hover, :link, :visited)

Element Selectors
Finds all HTML elements that have the specified element type. Example:
h1 { color: blue; }

Finds all elements of type <h1> and makes the text color blue.

Class Selectors
Finds all elements of a given class based on the attributes class value. Syntax: .classname (Remember the dot means class selector) Example: .legs { font-weight: bold; background: pink; } Finds all elements whose class = legs and makes their font bold and their backgrounds pink.

ID Selectors
Finds a single element thats been given a unique id based on the attributes id value. Syntax: #idname (Remember the pound-sign means id selector) Example:
#snout{ border: solid red; }

Finds a single element whose id = snout and gives it a solid red border.

Pseudo-Selectors
Apply styles to a user activated state of an element. If used, must be declared in a specific order in the style sheet. General Purpose Pseudo-Selector:
:hover a:active a:link a:visited Element with mouse over A link or button that is currently being clicked on. A link that has NOT been visited yet. A link that HAS been visited.

Specific to hyperlinks (and/or buttons)

Grouping Selectors
Lets say you want to apply the same style to several different selectors. Dont repeat the style use a comma!! Syntax: sel1, sel2, sel3 (Remember the comma to group several different selectors) Example: h1, .legs, #snout{ font-size: 20pt; } Finds all elements of type <h1>, all elements with class=legs and the single element whose id = snout then makes their font-size 20pt.

Conflict Resolution
Its possible to have different styles applied to the same selector (CascadingSS), but what if the styles tell the browser to do conflicting things? Rules:
Which selector is more specific? If the selectors are the same, then which style was applied last?

Sharpen Your Selector


Order of specificity:
(specific) id, class, element type (ambiguous)

Combine selectors:
Elementype.classname or Elementype#idname e.g.

p.legs

or

h2#snout

Sharpen Your Selector (cont.)


Descendant Selectors:
Specify the context in the HTML tree from each ancestor down to the desired element each separated by a space. e.g. body.pig p.pig-head #snout

HTML Tree: <body class=pig> <p class=pig-head> <h1 id=snout> Snout Snout Snout </h1> </p> </body>

Firebug Firefox Addon


Tool for figuring out what styles are being applied to which element (and which are being overwritten due to conflict resolution). http://getfirebug.com/ Right-click on an element,
then select Inspect Element from the dropdown

menu.

<span> Element tag


Useful for applying style to text within another HTML element. Use SPARINGLY unlike <h1> or <p>, <span> has no semantic meaning. Remember, HTML is for content and HTML tags are for describing that content to non-human or visually-impaired readers. <span> is just used to make things pretty.

<div> Element tag


Useful for dividing parts of the page into sections. Creates a box with the following attributes:
margin padding border height width (..and lots more)

Primary element used for CSS Layouts (more information in CSS Layouts tutorial)

Color Properties
color: specifies the text color. background-color: specifies the background color.

black; or #000000; red; or #FF0000; lime; or #00FF00; blue; or #0000FF; white; or #000000;

and more see:


http://www.w3schools.com/css/css_colornames.asp

Colorzilla Firefox Addon


Easily find color values for elements in a document. http://www.iosart.com/firefox/colorzilla/ Click on the eyedropper icon in the bottom-left of the browser and select any color in your browser window. Right-click on the eyedropper for more options.

Background Image Properties


background-image: url(../location/of/image.jpg) background-repeat: tile image in background background-position: vertical (top, center, bottom, or size) horizontal (left, center, right, or size) background-attachment: (scroll or fixed)

Font Properties
font-family: times, arial, serif, sans-serif, monospace; font-style: italic; font-weight: (bold, bolder, lighter, or 100 900;) font-size: size; or shorthand font: style weight size family;

Text Properties
text-indent: indents first line of a paragraph according to size text-align: right; or left; or center; or justify; text-decoration: none; or underline; text-transform: Capitalize; Line-height: added vertical space to each line of text according to size

List Properties <ul>


list-style-type: none, disc, circle, square, (other types available) list-style-position: inside or outside list-style-image: url(../path/to/image.jpg) or shorthand list-style: type position image

Border Properties
border-width: (thin, medium, thick, or size) border-style: (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset) border-color: color or shorthand border(-top, -right, -left, -bottom): width style color

You might also like