1 / 10

CSS

CSS. The basics { }. CSS. Cascading Style Sheets  - language used to describe html appearance & formatting Style Sheet  - file that describes how html file should look Cascading  - sheets can apply formatting to: all elements on a page

isanne
Download Presentation

CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS The basics { }

  2. CSS • Cascading Style Sheets - language used to • describe html appearance & formatting • Style Sheet - file that describes • how html file should look • Cascading - sheets can apply formatting to: • all elements on a page • can single out a specific - i.e. paragraph- to have a different style

  3. What’s the Difference? • CSS can apply same formatting to • several HTML elements • without rewriting each line of code (e.g. style="color:red":) again and again • CSS can apply appearance/ formatting to • several HTML pages • from a single CSS file

  4. Where is CSS placed in html doc? • Between<style> here </style> tags inside html file • <style> tags go inside<head> </head> of a webpage • Example • <!DOCTYPE html><html><head><style> p {  color: purple;  }</style><title>Result</title></head><body><p>Purple text </p></body></html>

  5. Selector -any html element (i.e. <p>, <img>, or <table>, but remove the <>s) • Property - an aspect of a selector (i.e. to change the font-family, color, and font-size of the text on a web page) • Value - a possible setting for a property (i.e. color can be red, blue, black, or almost any color; font-family can be any number of different fonts, etc.)

  6. CSS Example:  make a paragraph's text red with CSS: selector{property: value;} ____________________ p{color: red;}

  7. Set multiple properties Example p {font-family: Garamond;color: green;font-size: 24px;}

  8. Single Properties in multiple tags Example:Heading color red; paragraphs in Courier; span background in yellow h3 {color: red;}p {font-family: Courier;}span { background-color: yellow;}

  9. Link html file to CSS file • so html file can see/use the CSS file • The link file placed between  <head> </head> <link> tag needs 3 attributes:1st attribute -  type="text/css"2nd attribute - rel="stylesheet”3rd attribute - href="web address of CSS file"/>Example<head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>blah</title></head>

  10. Hexidecimal Color Picker

More Related