{color:blue; font-size: 12px;}

Transcription

1 CSS stands for cascading style sheets. Styles define how to display a web page. Styles remove the formatting of a document from the content of the document. There are 3 ways that styles can be applied: Inline The style is applied within the HTML tag. <p style= font-family: verdana; font-size: 12px; ></p> styles are defined using the <style> tag in the head of the document. Embedded The <style> font-family:verdana; font-size:12px; </style> External You can link to a separate style sheet that contains a list of rules to format the content. <link rel= stylesheet type= text/css href= styles.css /> The preferred and perhaps most useful method is using an external style sheet. You can define formatting for anything from text to tables to page layout in one file and use it across multiple pages or your entire site. You can make changes to the site by simply updating the style sheet. Note: You can use different methods in your page. Just remember that inline styles override embedded styles which override external styles. CSS Rules Each CSS rule consists of a selector and one or more declarations. Selector Declaration Declaration h1 {color:blue; font-size: 12px; Property Value Property Value The selector is usually the HTML element that you want to format. Each declaration is made up of a property and a value.

2 CSS Comments You can add comments to your style to help explain your code. To make certain the comments are ignored by the browser, you must begin them with /* and end them with */. For example: /*Anything between these slashes will not be seen by the browser. Make notes to yourself about your code. CSS Class Selector The class selector can be used to apply multiple looks to an HTML element or apply a particular format to several HTML elements. For example, you may define a general style for the <p> tag, but then need to change that format for a particular paragraph. You can create a class selector for that style. Class selectors must be written with a period: p.bold.bold Both can be used to define a class. The first would be used to format a paragraph; the second would used to format any HTML element. The class would be referenced as class=name. For example: <p class= bold > The class would override the styles for the <p> tag in that one paragraph. Note: You can create multiple selectors for an element, and you can use them more than once in your document or web page. Class ID Selector The id selector is used to set a unique style for an element. It is different from class in that an ID selector should only be used once within a page or document. ID s are most often used in layout. ID selectors are written with # followed by a name for the ID. td#menu td#main td#banner These id selectors could be used to define styles for table cells in the layout table for your web page. The ID selector would be reference as id=name. For example <td id= menu > The ID would apply your unique styles to the table cell. Note: Remember that ID selectors are unique and should only be used once in your document. Just like the class selector, the more specific ID selector will override any general styles.

3 Styling Hyperlinks (Anchor Tag) One of the elements most often styled by CSS is the anchor (hyperlink) tag. The anchor tag is different from other HTML elements because it has states such as link, visited, hover, and active. The must be listed in the order below in the style sheet. a or a:link a:visited a:hover a:active Use these pseudo-class selectors to style the main hyperlinks (anchors) on your page. There may be a time when you need to have a second anchor style on your page. In that case, you can add a class name to the pseudo-class selectors listed above. a.menu a.menu:visited a.menu:hover a.menu:active Use these pseudo-class selectors to add an second hyperlink style to your page. Example: /*Main Links*/ a { a:visited { a:hover { a:active { text-decoration:underline; /* Menu Links*/ a.menu { a.menu:visited { a.menu:hover{ a.menu:active { text-decoration:underline;

4 Common Properties Text Properties color sets color of text hex color values or color names color: #000000; color: black; text-align aligns text left, right, center, justify text-align: center; text-decoration adds decoration to text none, underline, overline, linethrough a {text-decoration: none; Font Properties font-family sets the font family of the text any font name or list of names font-family: Verdana, Arial, Helvetica, sans serif; font-size sets the size of the text values in px h3 {font-size: 18px; xx-small to xx-large font-style sets the text style normal, italic, oblique h2 {font-style: italic; font-weight sets the weight (boldness) of the text normal, bold, bolder, lighter multiples of 100 h1 {font-weight: bold; Background Properties background-color sets the color of an hex color values or color names body {background- elements background background-image sets an image as the background image url body {background-image: url ( images/bg.jpg );

5 Other Properties margin adds space to an area values in px margin: 10px; left, right, top bottom outside the border of an padding left, right, top bottom border left, right, top bottom element adds space around an element inside the border adds/styles border around an element value in px color = hex color values or color names style =solid, dashed, dotted, etc. width=px value padding: 10px; *See notes below When adding a border to an element, it involves setting several values such as color, style, and width. You can declare a style for each value or you can create a shorthand property for borders. In the following example, a border is being adding to the <p> using the normal way and the shorthand. Both add a solid, dark grey border that is 3 pixels wide. border-style: solid; border-color: # ; border-width: 3px; Normal Rule border: 3px solid #757575; Shorthand Property When using shorthand, you do not have to include all the values, but you do have to list them in a certain order: border-width border-style border-color