{"id":19,"date":"2019-04-05T16:55:29","date_gmt":"2019-04-05T16:55:29","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp460\/?page_id=19"},"modified":"2021-03-08T18:16:16","modified_gmt":"2021-03-08T18:16:16","slug":"html-css","status":"publish","type":"page","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp460-1100\/html-css\/","title":{"rendered":"HTML\/CSS"},"content":{"rendered":"\n

HTML: What is HTML?<\/a> | Element, Tags, and Attributes<\/a>| Empty and container elements <\/a> | Nesting, Parents, Children and Inheritance<\/a> | HTML5 Sectional Elements<\/a> | Formatting Text in HTML<\/a> | Basic HTML Structure<\/a><\/p>\n\n\n\n

CSS: What is CSS?<\/a> | Types of CSS<\/a> | How to Write CSS?<\/a> | CSS selectors<\/a> | CSS box model<\/a> | Width & Max-Width<\/a> | Block-level and Inline elements<\/a> | CSS type properties<\/a> | Using an Online Font Service (Google Fonts)<\/a> | Viewport & Media Queries<\/a> <\/p>\n\n\n\n

Introduction<\/h2>\n\n\n\n

Front-end web development is comprised of two main coding languages: HTML and CSS (with some added Javascript in many instances). They are markup (not “programming”) languages, that are used to display and organize information on the web.<\/p>\n\n\n\n

\n\n\n\n

HTML<\/h2>\n\n\n\n

What is HTML? <\/h3>\n\n\n\n

HTML (Hypertext Markup Language) is a set of instructions to a browser about what information to include in a web page (text, hyperlinks, but also images, sound, and other media). It provides structure and organization for the layout of the page.<\/p>\n\n\n\n

go back to top<\/a><\/em><\/p>\n\n\n\n

Element, Tags, and Attributes<\/h3>\n\n\n\n

HTML tags<\/strong> mark the content of the page. For example <p> marks content as a paragraph and <header> marks the head portion of a page or an element.<\/p>\n\n\n\n

Most tags come in pairs. The first opens an HTML element<\/em> and the second closes it. The line below is an example of an HTML element<\/em> which includes the start and end tags, as well as the content.:<\/p>\n\n\n\n

    <p>This is a great day<\/p>\n<\/pre><\/div>\n\n\n\n
This is another html element that in which a paragraph is nested<\/em> inside a div element:<\/p>\n\n\n\n
    <div><p>This is a great day<\/p><\/div>\n<\/pre><\/div>\n\n\n\n
An attribute<\/strong> is a property of an element. It is written inside the start tag in the following form:<\/p>\n\n\n\n
    <tag attribute="value">\n<\/pre><\/div>\n\n\n\n
For example the src attribute points to a file\u2019s name and location, in the form of a URL:<\/p>\n\n\n\n
    <img src="images\/flower.gif" \/><\/pre><\/div>\n\n\n\n
go back to top<\/a><\/em><\/p>\n\n\n\n
Empty and container elements<\/h3>\n\n\n\n
Tags that enclosed content are called Container Elements<\/strong>. They consist of opening and closing tags and all content is placed between them. For example:<\/p>\n\n\n\n
  <p>content<\/p>\n  <h1>content<\/h1>\n<\/pre><\/div>\n\n\n\n
Tags that do not enclosed content are called Empty Elements<\/strong>. They do not have a closing tag. Instead, in XHTML they are closed with a \/, for example. Here is a list of Empty Elements:<\/p>\n\n\n\n
  <br>\n  <link>\n  <img>\n  <hr>\n  <meta>\n  <embed>\n  <param>\n  <area>\n  <col>\n  <input><\/pre><\/div>\n\n\n\n
go back to top<\/a><\/em><\/p>\n\n\n\n
Nesting, Parents, Children and Inheritance<\/h3>\n\n\n\n
When an HTML element is \u2018nested\u2019 inside another element, such as in the code below, it is considered a child of the nesting element.<\/p>\n\n\n\n
<div>\n <p>lorem ipsum<\/p>\n<\/div>\n<\/pre><\/div>\n\n\n\n
Note that the closing tag of the child element appears before the closing tag of parent, so it is fully contained within the parent element.<\/p>\n\n\n\n
You may have several layers of nesting, such as:<\/p>\n\n\n\n
<body>\n <header>\n  <div>\n   <h1>\n    <a href="#">lorem ipsum<\/a>\n   <\/h1>\n  <\/div>\n <\/header>\n<\/body>\n<\/pre><\/div>\n\n\n\n
Child elements inherit some CSS styles from their parents. For example, the font<\/em> property is inheritable, as well as the text-align<\/em> and the width<\/em> properties. Some properties are not inheritable such as the background-color<\/em> property.<\/p>\n\n\n\n
go back to top<\/a><\/em><\/p>\n\n\n\n
HTML5 Sectional Elements<\/h3>\n\n\n\n
The following definitions are all from HTML \u2013 Living Standard<\/a>:<\/em><\/p>\n\n\n\n