CSC 337 Cascading Style Sheets Marty Stepp, Rick Mercer
Preview of a style sheet /* The good way, with a preview of cascading style sheet (css) that has class mystyle */ body { background-color: grey;.mystyle { border-style: solid; border-width: 2px 20px 10px 30px; border-color: red; margin: 20px; padding: 40px; font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; color: aqua; <body> Default rendering <div class="mystyle">a styled block</div> </body>
Styles on W3Schools The online tutorials have styles like this (okay) in <head> add <style> </style> here <head>
A poor way to produce styles (on W3) W3Schools also shows styles in html tags (not OK) <body> <h1 style="color: blue;">this is a heading</h1> <p style="color: red;">this is a paragraph.</p> </body> Later we'll use a 3 rd way to include CSS styles <head> <title>store CSS code in a separate file</title> <link href="mystyles.css" type="text/css" rel="stylesheet" /> </head>
Cascading Style Sheets (CSS) HTML describes the content of the page CSS describes appearance and layout of information on a web page
Basic CSS rule syntax A CSS file consists of one or more rules Each rule begins with a selector When using a tag like <p>, the style will apply to ALL <p> blocks Between { there are 1 to many style property: value declarations General Form: selector { property: value; property: value;... property: value; Example: p { font-family: sans-serif; color: red;
CSS Properties for Colors <!DOCTYPE html> <html> Property <head> color <title>styles</title> background-color <style> p { color: red; background-color: yellow; </style> </head> <body> <p>this paragraph uses the style above</p> <p>so does this <p></p> </body> </html> Description color of an element s text color that will appear behind the element
<!DOCTYPE html> <html> <head> <title>this is a Title</title> <style> p { color: red; h2 { color: rgb(128, 0, 196); h4 { color: #8000ff; </style> </head> Specifying Colors <body> <p> This paragraph uses the first style above. </p> <h2> This h2 uses the second style above </h2> <h4> This h2 uses the third style above </h4> </body> </html> Color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), yellow RGB codes: red, green, and blue values from 0 (none) to 255 (full) Hex codes: RGB values in base-16 from 00 to FF
Fonts Units: pixels (px), point (pt), or m-size (em) for better resizing of web pages 16px, 16pt, 1.16em Vague font sizes: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger Percentage font sizes: 90%, 120%
CSS Properties for Fonts <!DOCTYPE html> <html> <head> <title>styles</title> <style> p { font-family: Courier; font-size: 8pt; font-style: italic; div { font-family: Arial; font-size: 2em; font-weight: 900; color: blue; </style> </head> <body> <p>arial 8pt italic</p> <div>2em div bold blue</div> </body> </html> property font-family font-size font-style font-weight possible value Courier Arial 8pt 2em normal italic or beak normal bold lighter thickness 100 200 300 800 900 There are a couple dozen more
Multiple font choices Can specify multiple fonts from highest to lowest priority Because some fonts may not exist on the computer If Garamond is not on the computer, try "Times new Roman", then serif p { font-family: Garamond, "Times New Roman", serif; A few commonly used font families Georgia, serif "Times New Roman", Times, serif Arial, Helvetica, sans-serif Or use generic font names, probably best to use: serif, sans-serif, cursive, monospace
Embedding styles in a separate css file CSS can be embedded in HTML (previous slide) or placed in a.css file Use the code below to include the styles you build in the rel attribute means relationship There must be an href present The file name can be anything, but use.css extension If the file is named styles.css, you get them with this <head> <link href="styles.css" type="text/css" rel="stylesheet"> </head>
Backgrounds and an External CSS File /* styles.css */ body { font-size: 1.5em; background-image: url("images/moviebg.png"); h1 { background-color: green; <!DOCTYPE html> <!-- background.html --> <html> <head> <link href="styles.css" type="text/css" rel="stylesheet"> </head> <body> Body has a repeating image, looks like color green <h1>h1 has green background</h1> </body> </html>
/* styles.css */ div { border-style: solid; color: green; width: 160px; height: 120px; p { border-style: double; color: grey; width: 100px; height: 40px; <head> <link href="styles.css" type="text/css" rel="stylesheet"> </head> <div> A div <p>inner paragraph </p> <p>another </p> </div> </body> </html> Borders and external CSS
The CSS Box Model Every HTML element has Content - The content of the box, where text and images appear border - A border that goes around the padding and content padding - Clears an area around the content, inside the element. The padding is transparent. margin - Clears an area outside the border. The margin is transparent
margin and padding /* styles.css */ p { border-style: solid; margin: 5px; padding: 15px; width: 60px; <head> <title>background</title> <link href="styles.css" type="text/css" rel="stylesheet"> </head> <body> <p>one</p> <p>two</p> <p>three</p> </body>
<!DOCTYPE html> <html> <head> <title>box Model</title> <!-- FirstName1 LastName1 --> <!-- FirstName2 LastName2 --> <style> </style> </head> <body> <div> <p> </p> <p> </p> Active Learning Lorem ipsumdolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Use latin so examples with text do not have distracting words like you are reading </div> </body> Given the HTML file to the left, add the CSS styles to get the appearance as close as possible to the screenshot below
More CSS
Content vs. presentation HTML is for content; what is on the page (heading; list; code; etc.) CSS is for presentation; how to display the page (bold; centered; 20px margin; layouts, etc.) Keeping content separate from presentation is an important web design principle If the HTML contains no styles, its entire appearance can be changed dramatically by swapping.css files See http://csszengarden.com/
Review CSS Syntax / Preview.classes p { /* CSS */ font-family: sans-serif; color: red; A.css file consists of rules Selectors include HTML tags like p table.myclass classes starting with. About 62 other selectors.review { width: 290px; background: lightgray; border: solid <!-- HTML --> <p>the default values of p elements are changed</p> <div class="review">this div has a border now</div>
More Selectors So far, we have only used HTML tags as selectors like p and body To style tables, we have seen selectors table, td, tr We now need class selectors, which is any identifier preceded by '.' Use in HTML with the class attribute /* styles.css */.bordered { border-style: solid; border-width: 6px; padding: 10px; color: grey; width: 120px; height: 20px; <head> <title>class Selector</title> <link href="styles.css" type="text/css" rel="stylesheet"> </head> <body> <p class="bordered"> Styled with a class </p> </body>
text-shadow Shadow is specified as an X-offset, a Y-offset, and a color /* styles.css */.shadowed { font-weight: bold; font-size: 1.8em; color: blue; text-shadow: 2px 6px lightgrey; <head> <title>class Selector</title> <link href="styles.css" type="text/css" rel="stylesheet"> </head> <body> <div class="shadowed"> Styled with a class </div> </body> </html>
background-image, text-align Image repeats to fill all of the HTML block.woodbg { /* CSS */ color: white; text-align: center; background-image: url("images.jpg"); width: 300px; height: 250px; <!-- HTML --> <div class="woodbg"> This entire div should have an image </div>
box-shadow Put a shadow to the right and bottom of an element.box { /* CSS */ /* 10px down, 10px right, 5px thick */ box-shadow: 10px 10px 5px black; border: solid; border-width: 2px; width: 400px; height: 100px; How can we stop this overflow? <!-- HTML --> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="box">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </body>
A couple of ways Make the height: value larger, like 200px; Or better yet, use min-height: 100px;
Rounded corners with border-radius Round the border /* CSS */.rounded { border: 3px solid blue; border-radius: 12px; padding: 0.5em; <head> <link rel="stylesheet" href="styles.css"> </head> <body> <body> <p class="rounded"> This is a paragraph </p> <p class="rounded"> This is another paragraph </p> </body>
Vertical Align for an image img { vertical-align: bottom img { vertical-align: middle img { vertical-align: top
span Use <span> to apply a style to part of an inline element No new block start.part { font-size: 1.5em; font-family: sans-serif, "Arial"; <p> Using span to <span class="part">a piece</span> of an element </p>
Styles that conflict When two styles set conflicting values for the same property, the latter style takes precedence p, h1, h2 { color: blue; font-style: italic; h2 { color: red; background-color: yellow; <h1> This h1 has 2 new styles </h1> <h2> This h2 has 3 styles added </h2>