1- Intro to HTML and CSS

 Tools of the trade:HTML and CSS      

Introduction to HTML and CSS | An overviewWhat  is  HTML?  Hypertext  Markup  Language  or  HTML  is  the  language  that  web  pages  are  written  in.    As  a  markup  language,  HTML  is  a  set  of  markup  tags,  which  describe  the  page  content.    Here’s  an  example:  <p>  Hello  world!  </p>  Typed  surrounded  by  the  paragraph  tags  in  a  text  editor,  such  as  Notepad  and  saved  with  an  .html  extension  this  text  can  be  displayed  as  a  page  in  a  web  browser.    Learning  HTML  means  learning  the  syntax  of  the  language,  the  elements  supported  and  the  basic  structure  of  HTML  documents.    This  course  will  introduce  you  to  the  fundamentals  of  HTML.  You  will  learn  about  the  different  tags  and  how  to  use  them  to  create  and  edit  web  pages  that  contain  a  great  variety  of  content.    What  is  CSS?  CSS  stands  for  Cascading  Style  Sheets  and  is  the  language  that  controls  the  presentation  of  HTML  documents.    While  with  HTML  you  create  the  content  on  your  page,  such  as  headings,  text,  and  images,  CSS  is  about  how  the  content  on  your  page  is  presented.    To  use  an  analogy  from  the  fashion  industry:  think  of  CSS  as  the  stylist  who  decides  how  the  model  should  look;  whether  she  wears  a  blue  dress  with  red  shoes,  or  how  her  hair  is  made  up.    CSS  does  exactly  that:  it  tells  the  specific  element  how  to  present  itself  on  the  page:  it  can  tell  a  paragraph  how  it  should  be  sized,  which  colour  it  should  be  and  where  it  should  be  positioned  on  the  page.                    ALIA_PD_Sep2014_v1 2  

Introduction to HTML and CSS | An overviewWhat  is  the  logic  behind  the  ‘cascade’?  The  term  ‘cascade’  refers  to  how  the  styles  are  applied  to  pages.  There  are  different  ways  of  storing  the  style  sheet:     1. CSS  can  be  contained  in  an  external  file   2. CSS  can  be  embedded  as  an  internal  sheet  within  the  head  of  an  HTML   document   3. CSS  can  be  applied  inline    External  style  sheet  When  CSS  is  declared  in  an  external  style  sheet,  the  declarations  are  saved  in  a  separate  file  that  has  a  .css  extension.  Saving  declarations  externally  enables  you  to  apply  the  styles  to  many  pages  of  the  website.       The  above  line  of  code  links  the  html  file  (webpage)  with  the  css  file  (styles)  called  stylesheet.css    Internal  style  sheet  The  head  section  of  an  html  file  contains  a  lot  of  information  about  the  website,  such  as  the  title  of  the  page,  its  creator  and  keywords  that  describe  the  content  of  the  page.  An  internal  style  sheet  is  saved  between  the  <style>  tags  of  the  head  section.     This  is  an  internal  style  sheet.  It  is  not  saved  as  a  separate  file,  but  embedded  in  the  html  file.          ALIA_PD_Sep2014_v1 3  

Introduction to HTML and CSS | An overviewInline  styles  You  can  also  declare  styles  that  are  specific  to  an  instance  of  an  element  on  your  page.  For  example,  to  turn  only  the  first  of  many  paragraphs  into  red  colour  you  would  apply  a  style  attribute  to  that  paragraph  only.    <p style=\"color:red;\">This is my first paragraph and it will appear in redon my webpage.</p>             This  is  how  the  paragraph  of  text  appears  in  the  browser.      So  if  you  have  defined  your  styles  in  more  than  one  way,  i.e.  you  have  used  an  embedded  style  sheet  and  made  some  inline  declarations,  which  definition  will  be  applied  to  the  HTML?  The  cascading  order  As  the  name  implies  there  is  a  stacking  order  and  some  declarations  have  priority  over  others:   1. An  inline  style  (inside  and  HTML  element)  has  the  highest  priority  and  will   override  all  other  styles   2. This  is  followed  by  an  internal  style  sheet  (in  the  head  section  of  the  HTML   document)   3. Then  the  declarations  in  an  external  style  sheet  will  be  considered   4. And  finally  the  browser  default  will  be  applied    Which  program  do  I  need  to  create  HTML  and  CSS?  HTML  and  CSS  can  be  written  using  a  simple  text  editor,  such  as  Notepad.  All  you  need  to  do  is  ensure  that  your  file  is  saved  with  an  .html  extension  and  you  can  view  it  in  a  browser  such  as  Chrome,  Internet  Explorer  or  Firefox  as  a  webpage.  Watch  the  video  called  Notepad  to  web  to  see  how  it’s  done.        ALIA_PD_Sep2014_v1 4