Coder Social home page Coder Social logo

dsc-enterprise-deloitte-ws-content-vs-presentation's Introduction

Separating Content and Presentation

Introduction

You now know what HTML is and how to create a properly-formatted HTML document. That said, if you look at the HTML pages thus far, you can't help but notice that they look a little plain. To make them more attractive (and responsive), you can use Cascading Style Sheets or CSS!

Objectives

You will be able to:

  • Identify the separation of content and presentation
  • Explain the role of CSS

Identify the Separation of Content and Presentation

HTML lets you mark-up your content with semantic structure. It forms the skeleton of your web page. It would be great to be able to say, "Browser, when you see a p tag with id of my-name, make the first letter be huge!" Or, to get your readers' attention, you might say, "Browser, if you see any tag with a class of warning surround it with a red box!" HTML authors believe that creating marked-up documents and styling marked-up documents are entirely separate tasks. They see a difference between writing content (the data within the HTML document) and specifying presentation, the rules for displaying the rendered elements.

Explain the Role of CSS

CSS, or "Cascading Style Sheets," tells you how to write rules that define how browsers will present HTML. Rules in CSS won't look like HTML and they usually live in a file apart from our HTML file.

CSS handles all of the ways you want to customize your content's look and feel from margins and colors, to column-based layout!

Additional Resources

Summary

Web developers separate the content of our HTML pages from their presentation, which they style with CSS. By keeping the two separate, you not only utilize the best tools for each job, but you can change code for one without disturbing the code for the other.

dsc-enterprise-deloitte-ws-content-vs-presentation's People

Contributors

fpolchow avatar loredirick avatar mas16 avatar mathymitchell avatar peterbell avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.