Styling text using css

Styling text using css

• 1.
  By Daniel Francis
• 2.
  CSS - Cascading StyleSheets - These are used to define how different HTML elements are displayed - These were created to save work when changing the appearance of all the pages in a website. - Saved under the extension .css
• 3.
  The use oftext in HTML  Different styles of text can be used to achieve a variety of goals in a webpage  For example, more professional websites, such as those used by businesses, would typically use a basic, dark font which is easier to read and convey information.
• 4.
  Styling Text  CSScan be implemented in various ways to style different text as you see fit  Some examples of text properties that can be changed include: text size, text color, font, text alignment and text indentation
• 5.
  Font Size  Textsize can be set using pixels or the em size unit, which is recommended by the WC3 (1em = 16px). A font size tag looks as follows:  h1 {font-size:30px} or  h1 {font-size:2.5em}
• 6.
  Font color  Fontcolor can be changed using either a HEX value, a color name or an RGB value.  h1 {color:#000000;}  h1 {color:red;}  h1 {color:rgb (255, 0, 0;}  Usually if you are defining a color property, the background-color property should also be defined
• 7.
  EXAMPLES  The nextslide shows an example of some CSS code. Take note of how the different tags are given different properties to style individual sections of the website. By changing just these properties, entire sections of the website can be styled without editing the HTML code.
• 8.
  selector tag: usedto select the section being styled property tag: used to select which property is styled value tag: used to give a value to the property
• 9.
  This is theHTML code I have linked the CSS file to. The following slide displays what the webpage looks like when displayed in a web browser
• 11.
  Each paragraph hashad a class selector applied to it. This allows the HTML file to find the selector in the CSS file and apply styling to the text. Notice how the first and last paragraphs have exactly the same styling applied to them. This is because they both use the same class selector. If I wanted to change the style of these paragraphs, I would not need to recode both paragraphs, only the CSS code. This use of CSS saves a great deal of time and energy if a web developer was tasked with restyling a webpage for a client.
• 12.
  All of thecode in these files a valid in a variety of web browsers. The page has been tested in Mozilla Firefox, Internet Explorer and Google Chrome.