CSS CSS stands for Cascading Style Sheets Styles define how to display HTML elements External Style Sheets can save a lot of work External Style Sheets are stored in CSS files CSS Saves a Lot of Work! CSS defines HOW HTML elements are to be displayed. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file! CENG 449 Lecture 5
CENG 449 Lecture 5
<!DOCTYPE html> <html> <head> <style> p { color: red; text-align: center; } </style> </head> <body> <p>Hello World!</p> <p>This paragraph is styled with CSS.</p> </body> </html> CENG 449 Lecture 5
<!DOCTYPE html> <html> <head> <style> p { color: red; /* This is a single-line comment */ text-align: center; } /* This is a multi-line comment */ </style> </head> <body> <p>Hello World!</p> <p>This paragraph is styled with CSS.</p> <p>CSS comments are not shown in the output.</p> </body> </html> 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 starts with /* and ends with */. Comments can also span multiple lines: CENG 449 Lecture 5
CSS Selectors <!DOCTYPE html> <html> <head> <style> p { text-align: center; color: red; } </style> </head> <body> <p>Every paragraph will be affected by the style.</p> <p id="para1">Me too!</p> <p>And me!</p> </body> </html> CSS selectors allow you to select and manipulate HTML element(s). CSS selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. The element Selector: The element selector selects elements based on the element name. CENG 449 Lecture 5
CENG 449 Lecture 5
The id Selector <!DOCTYPE html> <html> <head> <style> #para1 { text-align: center; color: red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html> The id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the id selector when you want to find a single, unique element. To find an element with a specific id, write a hash character, followed by the id of the element. Do NOT start an ID name with a number! The style rule below will be applied to the HTML element with id="para1": CENG 449 Lecture 5
CENG 449 Lecture 5
The class Selector <!DOCTYPE html> <html> <head> <style> .center { text-align: center; color: red; } </style> </head> <body> <h1 class="center">Red and center-aligned heading</h1> <p class="center">Red and center-aligned paragraph.</p> </body> </html> The class selector finds elements with the specific class. The class selector uses the HTML class attribute. To find elements with a specific class, write a period character, followed by the name of the class: In the example, all HTML elements with class="center" will be center-aligned: CENG 449 Lecture 5
CENG 449 Lecture 5
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: <!DOCTYPE html> <html> <head> <style> p.center { text-align: center; color: red; } </style> </head> <body> <h1 class="center">This heading will not be affected</h1> <p class="center">This paragraph will be red and center-aligned.</p> </body> </html> CENG 449 Lecture 5
Grouping Selectors To minimize the code, you can group selectors Grouping Selectors To minimize the code, you can group selectors. To group selectors, separate each selector with a comma. In the example below we have grouped the selectors from the code above: <!DOCTYPE html> <html> <head> <style> h1, h2, p { text-align: center; color: red; } </style> </head> <body> <h1>Hello World!</h1> <h2>Smaller heading!</h2> <p>This is a paragraph.</p> </body> </html> CENG 449 Lecture 5
Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet, Internal style sheet, Inline style 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 just one file. Each page must include a link to the style sheet with 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. The style sheet file must be saved with a .css extension. An example of a style sheet file is shown below: "myStyle.css": body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; CENG 449 Lecture 5
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, inside the <style> tag, like this: <!DOCTYPE html> <html> <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> CENG 449 Lecture 5
CENG 449 Lecture 5
Inline Styles To use inline styles, add the style attribute to 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 h1 element: <!DOCTYPE html> <html> <body> <h1 style="color:blue;margin-left:30px;">This is a heading.</h1> <p>This is a paragraph.</p> </body> </html> CENG 449 Lecture 5
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 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: Browser default External style sheet Internal style sheet (in the head section) Inline style (inside an HTML element) CENG 449 Lecture 5
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style> body {background-color: linen;} </style> </head> <body style="background-color: lightcyan"> <h1>Multiple Styles Will Cascade into One</h1> <p>In this example, the background color is set inline, in an internal stylesheet, and in an external stylesheet.</p> <p>Try experimenting by removing styles to see how the cascading stylesheets work. (try removing the inline first, then the internal, then the external)</p> </body> </html> "myStyle.css": body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; } CENG 449 Lecture 5
CENG 449 Lecture 5
The CSS Box Model 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 add a border around elements, and to define space between elements. The image illustrates the box model: CENG 449 Lecture 5
CSS Background (The region inside borders, i. e CSS Background (The region inside borders, i.e., content and padding area) CSS background properties are used to define the background effects of an element. CSS properties used for background effects: background-color background-image background-repeat background-attachment background-position Background Color: The background-color property specifies the background color of an element. The background color of a page is defined in the body selector: CENG 449 Lecture 5
<!DOCTYPE html> <html> <head> <style> body { background-color: #b0c4de; } </style> </head> <body> <h1>My CSS web page!</h1> <p>Hello world! This is a W3Schools.com example.</p> </body> </html> 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" CENG 449 Lecture 5
CENG 449 Lecture 5
<div> tag The div is a generic block-level element. It doesn’t convey any meaning about its contents The div element is currently the most common method for identifying the structural sections of a document and for laying out a web page using CSS. Browsers will render a line break before and after its content. The HTML below shows two divs being used in conjunction with id attributes to identify different sections of a web page: <div id="main_navigation"> . </div> <div id="body_content"> <h1>Page heading</h1> <p>Body content</p> CENG 449 Lecture 5
<!DOCTYPE html> <html> <head> <style> h1 { background-color: #6495ed; } p { background-color: #e0ffff; div { background-color: #b0c4de; </style> </head> <body> <h1>CSS background-color example!</h1> <div> This is a text inside a div element. <p>This paragraph has its own background color.</p> We are still in the div element. </div> </body> </html> CENG 449 Lecture 5
<!DOCTYPE html> <html> <head> <style> h1 { background-color: #6495ed; } div { background-color: #b0c4de; } </style> </head> <body> <h1>CSS background-color example!</h1> <div> This is a text inside a div element. <p>This paragraph has its own background color.</p> We are still in the div element. </div> </body> </html> CENG 449 Lecture 5
Background Image The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. The background image for a page can be set like this: <!DOCTYPE html> <html> <head> <style> body { background-image: url("img_tree.png"); } </style> </head> <body> <h1>Hello World!</h1> <p>W3Schools background image example.</p> <p>The background image is only showing once, but it is disturbing the reader!</p> </body> </html> CENG 449 Lecture 5
<!DOCTYPE html> <html> <head> <style> body { background-image: url("img_tree.png"); background-repeat: no-repeat; } </style> </head> <body> <h1>Hello World!</h1> <p>W3Schools background image example.</p> <p>The background image is only showing once, but it is disturbing the reader!</p> </body> </html> CENG 449 Lecture 5
<!DOCTYPE html> <html> <head> <style> body { background-image: url("img_tree.png"); background-repeat:repeat-x; } </style> </head> <body> <h1>Hello World!</h1> <p>W3Schools background image example.</p> <p>The background image is only showing once, but it is disturbing the reader!</p> </body> </html> CENG 449 Lecture 5
<!DOCTYPE html> <html> <head> <style> body { background-image: url("img_tree.png"); background-repeat:repeat-y; } </style> </head> <body> <h1>Hello World!</h1> <p>W3Schools background image example.</p> <p>The background image is only showing once, but it is disturbing the reader!</p> </body> </html> CENG 449 Lecture 5
Background Image - Set position and no-repeat <!DOCTYPE html> <html> <head> <style> body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; } </style> </head> <body> <h1>Hello World!</h1> <p>W3Schools background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> </body> </html> CENG 449 Lecture 5
<!DOCTYPE html> <html> <head> <style> body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; margin-right: 800px; } </style> </head> <body> <h1>Hello World!</h1> <p>W3Schools background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> </body> </html> CENG 449 Lecture 5
<!DOCTYPE html> <html> <head> <style> body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; } </style> </head> <body> <h1>Hello World!</h1> <p>W3Schools background no-repeat, set position example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> </body> </html> CENG 449 Lecture 5
CSS background-attachment Property Sets whether a background image is fixed or scrolls with the rest of the page <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>If you do not see any scrollbars, try to resize the browser window.</p> </body> </html> <!DOCTYPE html> <html> <head> <style> body { background-image: url("logo.jpg"); background-repeat: no-repeat; background-attachment: fixed; } </style> </head> <body> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> CENG 449 Lecture 5
CENG 449 Lecture 5
<p>The background-image is fixed. Try to scroll down the page <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>If you do not see any scrollbars, try to resize the browser window.</p> </body> </html> <!DOCTYPE html> <html> <head> <style> body { background-image: url("logo.jpg"); background-repeat: no-repeat; background-attachment: scroll; } </style> </head> <body> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> CENG 449 Lecture 5
CENG 449 Lecture 5
Background - Shorthand property As you can see from the examples above, there are many properties to consider when dealing with backgrounds. To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property. The shorthand property for background is simply "background": Example: body { background: #ffffff url("img_tree.png") no-repeat fixed right top; } When using the shorthand property the order of the property values is: background-color background-image background-repeat background-attachment background-position CENG 449 Lecture 5
<!DOCTYPE html> <html> <head> <style> body { background: #ffffff url("img_tree.png") no-repeat fixed right top; margin-right: 200px; } </style> </head> <body> <h1>Hello World!</h1> <p>Now the background image is only shown once, and it is also positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so that the background image will not disturb the text.</p> </body> </html> CENG 449 Lecture 5
Text Color <!DOCTYPE html> <html> <head> <style> body { color: red; } h1 { color: green; /* color: #00ff00; p.ex { color: rgb(0,0,255); </style> </head> <body> <h1>This is heading 1</h1> <p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p> <p class="ex">This is a paragraph with class="ex". This text is blue.</p> </body> </html> CENG 449 Lecture 5
Text Alignment 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). <!DOCTYPE html> <html> <head> <style> h1 { text-align: center; } p.date { text-align: right; p.main { text-align: justify; </style> </head> <body> <h1>CSS text-align Example</h1> <p class="date">May, 2009</p> <p class="main">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p> <p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p> </body> </html> CENG 449 Lecture 5
Text Decoration 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: <!DOCTYPE html> <html> <head> <style> h1 { text-decoration: overline; } h2 { text-decoration: line-through; h3 { text-decoration: underline; </style> </head> <body> <!DOCTYPE html> <html> <head> <style> a { text-decoration: none; } </style> </head> <body> <p>Link to: <a href="http://www.w3schools.com">W3Schools.com</a></p> </body> </html> CENG 449 Lecture 5
CENG 449 Lecture 5
Text Transformation The text-transform property is used to specify uppercase and lowercase letters in a text. It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word. <!DOCTYPE html> <html> <head> <style> p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; p.capitalize { text-transform: capitalize; </style> </head> <body> <p class="uppercase">This is some text.</p> <p class="lowercase">This is some text.</p> <p class="capitalize">This is some text.</p> </body> </html> CENG 449 Lecture 5
Text Indentation The text-indent property is used to specify the indentation of the first line of a text. <!DOCTYPE html> <html> <head> <style> p { text-indent: 50px; } </style> </head> <body> <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p> </body> </html> CENG 449 Lecture 5
CSS FONT CSS font properties define the font family, boldness, size, and the style of a text. CENG 449 Lecture 5
Font Family The font family of a text is set with the font-family property. The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman". More than one font family is specified in a comma-separated list: CENG 449 Lecture 5
<. DOCTYPE html> <html> <head> <style> p <!DOCTYPE html> <html> <head> <style> p.serif { font-family: "Times New Roman", Times, serif; } p.sansserif { font-family: Arial, Helvetica, sans-serif; </style> </head> <body> <h1>CSS font-family</h1> <p class="serif">This is a paragraph, shown in the Times New Roman font.</p> <p class="sansserif">This is a paragraph, shown in the Arial font.</p> </body> </html> CENG 449 Lecture 5
Font Style The font-style property is mostly used to specify italic text. This property has three values: normal - The text is shown normally italic - The text is shown in italics oblique - The text is "leaning" (oblique is very similar to italic, but less supported) CENG 449 Lecture 5
<. DOCTYPE html> <html> <head> <style> p <!DOCTYPE html> <html> <head> <style> p.normal { font-style: normal; } p.italic { font-style: italic; p.oblique { font-style: oblique; </style> </head> <body> <p class="normal">This is a paragraph in normal style.</p> <p class="italic">This is a paragraph in italic style.</p> <p class="oblique">This is a paragraph in oblique style.</p> </body> </html> CENG 449 Lecture 5
Font Size The font-size property sets the size of the text. Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs. Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs. The font-size value can be an absolute, or relative size. Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em). CENG 449 Lecture 5
Set Font Size With Pixels <!DOCTYPE html> <html> <head> <style> h1 { font-size: 40px; } h2 { font-size: 30px; } p { font-size: 14px; } </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html> CENG 449 Lecture 5
Set Font Size With Em To allow users to resize the text (in the browser menu), many developers use em instead of pixels. The em size unit is recommended by the W3C. 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. The size can be calculated from pixels to em using this formula: pixels/16=em CENG 449 Lecture 5
<!DOCTYPE html> <html> <head> <style> h1 { font-size: 2.5em; /* 40px/16=2.5em */ } h2 { font-size: 1.875em; /* 30px/16=1.875em */ p { font-size: 0.875em; /* 14px/16=0.875em */ </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>Specifying the font-size in em allows all major browsers to resize the text. Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p> </body> </html> CENG 449 Lecture 5
<!DOCTYPE html> <html> <head> <style> h1 { font-size: 250%; } h2 { font-size: 200%; p { font-size: 100%; </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> </body> </html> CENG 449 Lecture 5
CSS font-variant Property In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text. The font-variant property specifies whether or not a text should be displayed in a small-caps font. CENG 449 Lecture 5
<. DOCTYPE html> <html> <head> <style> p <!DOCTYPE html> <html> <head> <style> p.normal { font-variant: normal; } p.small { font-variant: small-caps; </style> </head> <body> <p class="normal">My name is Hege Refsnes.</p> <p class="small">My name is Hege Refsnes.</p> </body> </html> CENG 449 Lecture 5
CSS font-weight Property The font-weight property sets how thick or thin characters in text should be displayed. normal Defines normal characters. This is default bold Defines thick characters bolder Defines thicker characters lighter Defines lighter characters 100 200 300 400 500 600 700 800 900 Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold CENG 449 Lecture 5
<. DOCTYPE html> <html> <head> <style> p <!DOCTYPE html> <html> <head> <style> p.normal { font-weight: normal; } p.light { font-weight: lighter; } p.thick { font-weight: bold; } p.thicker { font-weight: 900; } </style> </head> <body> <p class="normal">This is a paragraph.</p> <p class="light">This is a paragraph.</p> <p class="thick">This is a paragraph.</p> <p class="thicker">This is a paragraph.</p> </body> </html> CENG 449 Lecture 5
CSS font Property Specify all the font properties in one declaration: <!DOCTYPE html> <html> <head> <style> p.ex1 { font: 15px arial, sans-serif; } p.ex2 { font: italic bold 12px/30px Georgia, serif; </style> </head> <body> <p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p> <p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p> </body> </html> CENG 449 Lecture 5
font: font-style font-variant font-weight font-size/line-height|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit; CENG 449 Lecture 5