HTML & CSS
HTML, HyperText Markup Language, gives content structure and
meaning by defining that content as, for example headings, paragraphs,
or images. CSS, or Cascading Style Sheets, is a presentation
language created to style the appearance of content using, for example,
fonts or colors.
Understanding Common HTML Terms
Elements
Elements are designators that define the structure and content of
objects within a page. Some of the more frequently used elements include
multiple levels of headings (identified as
<h1> through <h6> elements) and paragraphs (identified as the <p> element). The list goes on to include the <a>, <div>, <span>, <strong>, and <em> elements, and many more.
Elements are identified by the use of less-than and greater-than angle brackets,
< >, surrounding the element name. Thus, an element will look like the following.
Tags
The use of less-than and greater-than angle brackets surrounding an element creates what is known as a tag. Tags most commonly occur in pairs of opening and closing tags.
Attributes
Attributes are properties used to provide additional information about an element.
HTML syntax outline including an element, attribute, and tag
Setting Up the HTML Document Structure
- All HTML documents have a required structure that includes the following declaration and elements:
<!DOCTYPE html>,<html>,<head>, and<body>. - The document type declaration, or
<!DOCTYPE html>, informs web browsers which version of HTML is being used and is placed at the very beginning of the HTML document. - After the document type declaration, the
<html>element signifies the beginning of the document. - Insides the
<html>element, the<head>element identifies the top of the document, including any metadata (accompanying information about the page). - All of the visible content within the web page will fall within the
<body>element.
Self-Closing Elements
In the previous example, the
<meta>
element had only one tag and didn’t include a closing tag. Fear not,
this was intentional. Not all elements consist of opening and closing
tags. Some elements simply receive their content or behavior from
attributes within a single tag. The <meta> element is one of these elements. The content of the previous <meta> element is assigned with the use of the char set attribute and value. Other common self closing elements include-
<br> -
<embed> -
<hr> -
<img> -
<input> -
<link> -
<meta> -
<param> -
<source>
----------------------------------------------------------------------------------------------------------------------------
Understanding Common CSS Terms
Selectors
As elements are added to a web page, they may be styled using CSS. A selector designates exactly which element or elements within our HTML to target and apply styles (such as color, size, and position) to.
Properties
Once an element is selected a property determines the styles that will
be applied to that element. Property names fall after a selector within
the curly brackets
{} and immediately preceding a colon, :. There are numerous properties we can use such as background, color, font-size, height and width and new properties are often added. In the following code. We are defining the color and font-size properties to be applied to all <p> elements.
Values
CSS syntax outline including a selector, properties, and values
Working with Selectors
Type Selectors
Type selectors target elements by their element type.
Class Selectors
Class selectors allow us to select an element based on the element’s
class attribute value. Class selectors are a little more specific than type selectors, as they
select a particular group of elements rather than all elements of one
type.
Class selectors allow us to apply the same styles to different elements at once by using the same
class attribute value across multiple elements. 
ID Selectors
ID selectors are even more precise than class selectors as they target only one unique element at a time. Just as class selectors use an element’sclass attribute value as the selector ID selectors use an element’s id attribute value as a selector.Regardless of which type of element they appear on
id attribute values can only be used once per page. If used they should be reserved for significant elements.Within CSS, ID selectors are denoted by a leading hash sign
# followed by the id attribute value. Here the ID selector will only select the element containing the id attribute value of shayhowe.
----------------------------------------------------------------------------------------------------------------------------
Referencing CSS
In order to get our CSS talking to our HTML we need to reference our
CSS file within our HTML. The best practice for referencing our CSS is
to include all of our styles in a single external style sheet which is
referenced from within the
<head> element of our HTML document.
Within the
<head> element of the HTML document the <link> element is used to define the relationship between the HTML file and the CSS file. Because we are linking to CSS, we use the rel attribute with a value of stylesheet to specify their relationship. Furthermore, the href hyperlink reference) attribute is used to identify the location, or path, of the CSS file. 
0 comments:
Post a Comment