tags provide extra meaning and allow browsers to show users Structural markup: the elements that you can use to describe both headings and paragraphsappropriate structure for the page. Semantic markup: There are some text elements that are not intended to affect the structure of your web pages, but they do add extra information to the pages
you have 6 level of heading
- By default, a browser will show each paragraph on a new line with some space between it and any subsequent paragraphs.
#### **Bold & It alic**
- bold tag presented in a visually different way
- italic
#### **Superscript & Subscript**
- element is used to contain characters that should be superscript such as the suffixes of dates or mathematical concepts
- is used to contain characters that should be subscript. It is commonly used with foot notes or chemical formulas
#### **White Space**
- When the browser comes across two or more spaces next to each other, it only displays one space.Similarly if it comes across a line
This is known as white space collapsing.
#### **Line Breaks & Horizontal Rules**
- element,
* Adjacent Sibling Selector ex : h1+p {} Targets the first element after any elements that are siblings of an
to add a line break inside the middle of a paragraph
-
To create a break between themes
** empty elements **elements that do not have any words between an opening and closing tag.
-Content management systems and HTML editors such as Dreamweaver usually have two views of the page you are creating: a visual editor and a
code view.
** Visual editors **often resemble word processors.allow you to control the presentation of text.
** Code views** show you the code created by the visual editor so you can manually edit it, or so you can just enter new code yourself. It is often activated
using a button with an icon that says HTML or has angled brackets
#### Strong & Emphasis
- indicates that its content has strong importance
- indicates emphasis that subtly changes the meaning of a sentence.
#### Quotations
- There are two elements commonly used for marking up quotations:
- is used for longer quotes that take up an entire paragraph.
-
is used for shorter quotes that sit within a paragraph.
#### Abbreviations & Acronyms
- If you use an abbreviation or an acronym
#### Citations & Definitions
- can be used to indicate where the citation is from.
- lement is used to indicate the defining instance of a new term.
- Some browsers show the content of the element in italics
#### Auth or Details
to contain contact details for the author of the page.
#### Changes to Content
- element can be used to show content that has been inserted into a document
-
element can show text that has been deleted from it
- element indicates something that is no longeraccurate or relevant
## css
## CSS
#### BLOCK & INLINE ELEMENTS
- Block level elements look like they start on a new line and Inline elements flow within the text and do not start on a new line.
add a
you can add border around any of the boxes, to style Boxes :
Width and height Borders (color, width, and style) Background color and images Position in the browser window.
to style text :
Typeface,Size,Color,Italics, bold, uppercase,lowercase, small-caps
A CSS rule contains two parts: a selector and a declaration.
- selector is the name of html tag that we want to style
- declaration is the type of style
- you can specify several selector in one rule using comma between each selector and You can specify several properties in one declaration, each separated by a semi-colon
ex : p{font-family :arial;}
- CSS Properties Affect How El ements Are Dis played
#### to use css there are three ways :
- **external:**The element can be used in an HTML document to tell the browser where to find the CSS file used to style the page ex : ``` ```
An HTML page can use more than one CSS style sheet.
- **Internal :** ```
- **inline** :inside the html opening tag using style attribute
### Selector
* Universal Selector ex : * {} Targets all elements on the page
* Type Selector ex : h1, h2, h3 {} Targets the ,
and
elements
* Class Selector ex : .note {} Targets any element whose class attribute has a value of note
* ID Selector ex : #introduction {} Targets the element whose id attribute has a value of introduction
* Child Selector ex : li>a {} Targets any elements that are children of an
element
* General Sibling Selector ex : h1~p {} If you had two
element,this rule would apply to both
- LAST RULE If the two selectors are identical,the latter of the two will take precedence.
- SPECIFICITY If one selector is more specific than the others, the more specific rule will take precedence over more general ones.
- IMPORTANT You can add !important after any property value to indicate that it should be considered more important than other rules that apply to the same element
### Inheritance
- If you specify the font-family or color properties on the element, they will apply to most child elements. This is because the value of the font-family property is inherited by child elements.
- background-color or border properties; they are not inherited by child elements
### use External Style Sheets advantages
1- All of your web pages can share the same style sheet. This is achieved by using the does not need to be repeated in every page
2- The HTML code will be easier to read and edit because it does not have lots of CSS rules in the same document.
- If you are just creating a single page, you might decide to put the rules in the same file to - keep everything in one place.
- If you have one page which requires a few extra rules (that are not used by the rest of the site), you might consider using CSS in the same page