CS 253 Introduction to CSS
Introduction to CSS. What is CSS? Cascading Style Sheets Used for styling HTML Also important in javascript and jquery for selectors External.
Jan 01, 2016
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
CS 253Introduction to CSS
What is CSS?
Cascading Style Sheets Used for styling HTML Also important in javascript and
jquery for selectors External style sheets allow
separation of page format and style It is possible for entire web sites to
be redesigned without modifying HTML code by simply changing CSS
CSS Syntax
A CSS rule is composed of two basic parts A selector One or more declarations
The selector is the element or combination of elements to be styled
Declarations consist of a property and a value
Image and content courtesy: http://www.w3schools.com/css/css_syntax.asp
CSS Example
h1 { color:#f00; text-align: left;
}
CSS declarations always end with a semicolon
Declaration groups are surrounded by curly brackets
Id and Class selectors
Id Selector Used to specify a style for a single unique
element The id value of the element is used preceded by
the # symbol to make up the selector expression
#introduction {color : #000;font-weight: bold;
}<p id=“#introduction”>This is some introduction text</p>
Id and Class selectors cont’d Class selector
Typically used by more than one element Since it is not unique the class selector can be used
to style a group of elements The class value of an element is used preceded by
the . (dot) symbol to make up the selector expression.quote{
text-align : right;font-style:italic;
}<p class=“quote”>If debugging is the process of
removing bugs then programming is the process of putting them in~ Edsger Dijkstra</p>
Examples
p.highlight {
background-color: #F4E3AA;
}
#introduction span, p#detail {
color:#F00;
}
#main .detail {
font-style: italic;
}
Ways to include CSS on a page External Style sheet Internal Style sheet Inline Style Import
External Style sheet
External Style sheet Separate external file containing css Look and feel of site can be modified by
changing only one file Typically the link to the style sheet is included
in the <head> section of an html page
<head><link rel="stylesheet" type="text/css" href=“main.css" /></head>
Internal Style sheet
Used when CSS is applied to only a single page Style definitions are placed between the <style>
tags on a page Cannot be reused on other pages
<head><style type="text/css">
hr {color:#888;}p {margin-left:20px;}body {background-
image:url("images/back40.gif");}</style>
</head>
Inline Styles
Mix content with presentation Is not a reusable pattern so should
be used very sparingly Styles only apply specifically to the
element they are placed on A “style” attribute is used to define
inline styles
<p style="color:green; margin-left:20px">This is a paragraph.</p>
CSS Import
@import is another way of loading an external css style
@import must come before all other content in CSS
@import has performance implications and is slower than other methods of applying styles
<style>
@import url('/css/typography.css');
@import url('/css/layout.css');
@import url('/css/color.css');
</style>
Multiple style sheets
If properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet
Styles will “cascade” into a new virtual style sheet conforming to the following rules. 1 is the lowest priority and 4 is the highest priority
1. Browser default2. External style sheet3. Internal style sheet (in the head section)4. Inline style (inside an HTML element)
CSS Box Model
All HTML elements can be considered as boxes
Can be thought of as a box that wraps around HTML elements consisting of Margins Borders Padding Content
CSS Box Model
• Margin – Clears area around the border. It is completely transparent and does not have a background color
• Border – Goes around padding and content. It is affected by the background color of the box
• Padding – Clears an area around the content. Padding is affected by the background color of the box
• Content – Content within the box where text and messages appear
Width and height of an element When you set width and height in css, you only
set the width and height of the content area eg div.ad {
width : 300px;height: 100 px;padding : 10px;border: 5px solid #0F0;
} To get the total width or height of an element you
must also add the margins and borders For the div aboveTotal width = 300 + (10x2) + (5x2) = 330px
Styling backgrounds
Background color Specifies the background color of an element body { background-color:#7355DA;}
CSS colors can be Hex value: #ffee44 RGB value: rgb(255,0,0) Color name: red
Background image body {background-image:url(‘main_back.jpg’);} Background images can be repeated vertically or horizontally body {
background-image:url(‘main_back.jpg’);}background-repeat:repeat-x;
}
Background position
Background image position This can be specified with the
background-position property body {
background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top;}
Background Shorthand property A shortened form can be used to represent
backgrounds
body { background:#ffffff url('img_tree.png') no- repeat right top;} When using the shorthand property the order of the
property values is: background-color background-image background-repeat background-attachment background-position
Styling text
Color p { color:#f00;}
Text Alignment p { text-align: right; }
Text Decoration span.link { text-decoration: underline; }
Text Transformation p.uppercase { text-transform: uppercase; } p.lowercase {text-transform: lowercase; }
Text Indent p {text-indent : 5px; }
Styling Fonts
In CSS, there are two types of font family names generic family – A group of font families
with a similar look (e.g. Serif or Monospace)
font-family – A specific font family (e.g. Arial, Verdana)
Styling Fonts
CSS Font Syntax p {font-family: “Times New Roman”,
Times, serif; }
Styling Fonts
Font Style p.normal { font-style: normal;} p.italic{ font-style: italic;}
Font Size Absolute e.g. 10px;
Sets font to specific size Does not allow user to change the text size in a
browser. Bad for accessibility Relative eg 1.2 em
Sets size relative to surrounding elements Allows user to change font size
Default font size is 1em or 16px
CSS Grouping
Allows you to provide the same style to a group of elements
Elements or selectors are comma separated
e.g. h1,h2,p {
color:#897944;}
CSS Nesting
You can specify certain conditions for styles to be inherited
This is good if you can accurately predict the structure of your markup
Look at the following examplep { color:blue; text-align:center;}.marked { background-color:red; }.marked p { color:white;}
When a p occurs after a .marked element, its color will be white
Case Study
Example page
Exercise Create the markup and CSS which
will display the following output
Related Documents
