Download presentation
Presentation is loading. Please wait.
1
CSS Cascading Style Sheets Brief Introduction
Norman White
2
Background HTML was not intended to have tags for formatting a document. Intended to define contents (headings, paragraphs etc.) HTML 3.2 added tags like font, color But that dramatically increased the size of html documents, and made maintenance of large web sites increasingly difficult HTML 4.0 introduces CSS , Cascading Style Sheets Now formatting can be moved out of the html into a CSS file.
3
CSS Advantages Move all style information to a single file
Can change the look of a whole site, by changing one file Example 1 <html> <head> <link rel="stylesheet" type="text/css" href="ex1.css" /> </head> <body> <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body> </html>
4
Style Sheet Ex1.css body { background-color:yellow; } h1 { font-size:36pt; } h2 { color:blue; } p { margin-left:50px; } Result:
5
Another Example <html> <head> <link rel="stylesheet" type="text/css" href="ex2.css" /> </head> <body> <h1>This is a header 1</h1> <hr /> <p>You can see that the style sheet formats the text</p> <p><a href=" target="_blank">This is a link</a></p> </body> </html>
6
Style Sheet ex2.css body {background-color:tan;} h1 {color:maroon;font-size:20pt;} hr {color:navy;} p {font-size:11pt;margin-left:15px;} a:link {color:green;} a:visited {color:yellow;} a:hover {color:black;} a:active {color:blue;}
7
Example 2 HTML and CSS html CSS
<html> <head> <link rel="stylesheet" type="text/css" href="ex2.css" /> </head> <body> <h1>This is a header 1</h1> <hr /> <p>You can see that the style sheet formats the text</p> <p> <a href=" target="_blank">This is a link</a> </p> </body> </html> body {background-color:tan;} h1 {color:maroon;font-size:20pt;} hr {color:navy;} p {font-size:11pt;margin-left:15px;} a:link {color:green;} a:visited {color:yellow;} a:hover {color:black;} a:active {color:blue;}
8
CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations: The selector is normally 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.
9
CSS Example A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets: p {color:red;text-align:center;} To make the CSS more readable, you can put one declaration on each line, like this: Example p { color:red; text-align:center; }
10
CSS Comments Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this: /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }
11
Other Selectors, ID and CLASS
The id and class Selectors In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class". The id Selector The id selector is 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 "#". The style rule below will be applied to the element with id="para1": Example #para1 { text-align:center; color:red; }
12
Class Selector The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "." In the example below, all HTML elements with class="center" will be center-aligned: Example .center {text-align:center;}
13
Restrict classes to particular html tags
You can also specify that only specific HTML elements should be affected by a class. In the example below, all p elements with class="center" will be center-aligned: Example p.center {text-align:center;}
14
Methods to insert a CSS file
External Style Sheet An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below: hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} NOTE: CSS Files can be referenced that are on a different server, allowing Styles to be shared across many pages (i.e. Blogs etc.)
15
Internal Style Sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this: <head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
16
In-Line Styles Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly! Best for testing only. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph: <p style="color:sienna;margin-left:20px">This is a paragraph.</p>
17
CASCADING – What does that mean?
What happens when we have multiple properties for the same selector, specified in different style sheets? How do they get merged for a particular HTML element? Multiple styles get “cascaded” together for each element.
18
If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector: h3 { color:red; text-align:left; font-size:8pt; } And an internal style sheet has these properties for the h3 selector: h3 { text-align:right; font-size:20pt; } If the page with the internal style sheet also links to the external style sheet the properties for h3 will be: color:red; text-align:right; font-size:20pt; The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.
19
Multiple Styles Will Cascade into One
Styles can be specified: inside an HTML element inside the head section of an HTML page in an external CSS file Tip: Even multiple external style sheets can be referenced inside a single HTML document. Cascading order What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority: 1) Browser default 2) External style sheet 3) Internal style sheet (in the head section) 4) Inline style (inside an HTML element) So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value). Note: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!
20
CSS Styling Backgrounds Text Fonts Links Lists Tables
21
Backgrounds CSS Background Properties background-color
body {background-color:#b0c4de;} h1 {background-color:#6495ed;} p {background-color:#e0ffff;} div {background-color:#b0c4de;} background-image body {background-image:url('paper.gif');} background-repeat body { background-image:url('gradient2.png'); background-repeat:repeat-x; } background-attachment body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; } background-position body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; }
22
Text Text Color Example
The color property is used to set the color of the text. With CSS, a color is most often specified by: a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red" Look at CSS Color Values for a complete list of possible color values. The default color for a page is defined in the body selector. Example body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}
23
Text Alignment Example
The text-align property is used to set the horizontal alignment of a text. Text can be centered, or aligned to the left or right, or justified. When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers). Example h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}
24
Text Decoration Example Another Example
The text-decoration property is used to set or remove decorations from text. The text-decoration property is mostly used to remove underlines from links for design purposes: Example a {text-decoration:none;} Another Example h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;}
25
ALL CSS Text Properties
Property Description color Sets the color of text direction Specifies the text direction/writing direction letter-spacing Increases or decreases the space between characters in a text line-height Sets the line height text-align Specifies the horizontal alignment of text text-decoration Specifies the decoration added to text text-indent Specifies the indentation of the first line in a text-block text-shadow Text-shadow Specifies the shadow effect added to text text-transform Controls the capitalization of text unicode-bidi vertical-align Sets the vertical alignment of an element white-space Specifies how white-space inside an element is handled word-spacing Increases or decreases the space between words in a text
26
Fonts Many font families, see w3schools for the list
27
Links Links can be styled with any CSS property (e.g. color, font-family, background, etc.). Special for links are that they can be styled differently depending on what state they are in. The four links states are: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked Example a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */
28
Lists The CSS list properties allow you to: List
Set different list item markers for ordered lists Set different list item markers for unordered lists Set an image as the list item marker List I In HTML, there are two types of lists: unordered lists - the list items are marked with bullets ordered lists - the list items are marked with numbers or letters With CSS, lists can be styled further, and images can be used as the list item marker. Different List Item Markers The type of list item marker is specified with the list-style-type property: Example ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;}
29
Images as list markers To specify an image as the list item marker, use the list-style-image property: Example ul { list-style-image: url('sqpurple.gif'); }
30
Tables (see w3schools for all examples)
table, th, td { border: 1px solid black; } table { border-collapse:collapse; } table,th, td { border: 1px solid black; } table { width:100%; } th { height:50px; }
31
The CSS Box Model (very important for mobile devices)
All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements. The image below illustrates the box model:
32
Box Model Components Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent Border - A border that goes around the padding and content. The border is affected by the background color of the box Padding - Clears an area around the content. The padding is affected by the background color of the box Content - The content of the box, where text and images appear In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.
33
Width and Height of an Element
Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins. The total width of the element in the example below is 300px: width:250px; padding:10px; border:5px solid gray; margin:10px; Let's do the math: 250px (width) + 20px (left and right padding) + 10px (left and right border) + 20px (left and right margin) = 300px Assume that you had only 250px of space. Let's make an element with a total width of 250px: Example width:220px; padding:10px; border:5px solid gray; margin:0px; The total width of an element should be calculated like this: Total element width = width + left padding + right padding + left border + right border + left margin + right margin The total height of an element should be calculated like this: Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
34
Importance of Box Model for Mobile
Mobile devices can come in a variety of different sizes. We may want to change the layout and size of a page depending on what it is displayed on: Desktop computer Iphone Ipad Android (many size devices) Later we will see that with HTML 5 we can dynamically determine the device size and bring in appropriate style settings for it One of the problems with mobile devices is how to reformat your information so that it is easily manipulated on a mobile device. We need to take advantage of some of the unique features of mobile devices. These include: Touch based resizing and scrolling. Mobile devices can scroll through long lists easily, so you usually avoid multicolumn tables. Support for orientation. You may need to change the css file depending on the orientation . Shaking to indicate an action. Geolocation Many more New CSS3 and html5 elements now make it possible to eliminate much of the need for special gif and jpeg icons. (for instance, you can draw a circle by creating a box with the correct rounded borders) HTML5 and CS3 media queries allow you to specify what CSS files to use depending on the width of the device
35
Management Takeaway Using style sheets can make your web pages take on a customized, consistent look with very little effort. In many cases, one can find external style sheets at different sites that have already been carefully developed to give a particular look and feel. The “themes” that one can use on different sites are typically just different CSS files. Style sheets make it much easier to change the look and feel of a set of web pages. Style sheets will be very important when we want to have pages that display well on different screen sizes. The ID and CLASS method of referencing html tags will also be similar to what JQuery uses to make javascript much easier to use. (as well as JQuery Mobile)
Similar presentations
