introduction to html5
DESCRIPTION
Introduction to HTML5. CSS Styles. Understanding Style Sheets. HTML5 enables you to define many different types of content on a web page, including headings, paragraphs, lists, images, input fields, canvases, and multimedia. - PowerPoint PPT PresentationTRANSCRIPT
INTRODUCTION TO HTML5
CSS Styles
Understanding Style Sheets HTML5 enables you to define many different
types of content on a web page, including headings, paragraphs, lists, images, input fields, canvases, and multimedia.
To specify how this content looks, you need to add Cascading Style Sheets, or CSS.
CSS lets you specify colors, font families, backgrounds, margin widths, alignment, and much, much more.
A CSS style sheet is typically a text file separate from your HTML document.
Defining Style Sheets A style sheet holds formatting codes that control
the appearance of your web page. You can use style sheets to change the look of
any page element, such as paragraphs, lists, backgrounds, and more.
Any time you want to apply the formatting from an external style sheet to an HTML document, you attach the style sheet to the page using a <link> tag.
Style sheet files have a .css file extension. Style sheets can also be internal, residing within
your HTML code between <style> and </style> tags.
Controlling Multiple Pages You can link every page in your website to a
single style sheet. Any changes you make to the style sheet rules
are reflected in every HTML document linking to the sheet.
By storing all the formatting information in one place, you can easily update the appearance of your site’s page all at onces.
This can be a real timesaver if your site consists of lots of pages.
Style Sheet Syntax Style sheets are made up of rules, and each rule
has two distinct parts: a selector and a declaration.
The selector specifies the element to which you want to apply a style rule.
The declaration specifies the formatting for the selector.
The above example, the selector is h2 and {color: red} is the declaration.
When applied to a page, this rule make all level2 headings appear in red.
Style Sheet Declarations A declaration consist of one or more property-
value pairs such as font-size: 12px or position: absolute.
Each property and value is separate by a colon. Multiple property-value pairs are separated by
semicolons.
Style Class If you want to apply formatting to only a
particular instance of a tag, you can define a CSS class for that tag.
The above code defines a “huge” class that can be applied to HTML.
Style Class You can apply the class using the class attribute
inside a paragraph tag.
Style Class
Inheritance Tags you add inside other tag inherit the outer
tag’s formatting, unless you specify otherwise. For example, if you define a style for the <body>
tag, any heading or paragraph tags you nested within <body> tag inherit the same formatting.
HTML inheritance makes it easy to keep the formatting consistent as you add new items within an element.
Inheritance
Create an Internal Style Sheet You can create an internal style sheet that
resides within the <head> tag of your HTML5 document.
The styles of an internal style sheet are delineated by <style> and </style> tags and apply only to the HTML in that document.
Internal style sheets are handy if your website consists of a single page because you can change both style rules and HTML in the same file.
If you want to apply the same styles to multiple web pages, consider putting the styles in an external style sheet instead.
Create an Internal Style Sheet
Create an Internal Style Sheet
What is the Type Attribute The type attribute of the <style> tag defines the
styling language used inside the <style> tag.
The value “text/css” specifies that the code is CSS.
The “text/css” value is also the default, which means if you do not include the attribute, any CSS code inside the <style> tag will still be recognized and work correctly.
Create an External Style Sheet You can use an external style sheet to define
formatting and layout instructions and then apply those instructions to your HTML5 document.
Style sheets can include rules for customizing text, tables, form elements, and more.
You can save the style sheet as a text file and assign the .css file extension to identify the file as a Cascading Style Sheet.
For easy access, you can save the file in the same folder as your HTML5 file.
If you have multiple style sheets and wants to keep them separate, you can save them in a subdirectory.
Create an External Style Sheet Create a new document in your text editor and
save the file as styles.css
You can also add comments to your style sheets by using /* and */
Link to a Style Sheet You can link to an external style sheet to assign a
set of formatting rules to your HTML5 document. You use the <link> tag to specify the filename
and location of the style sheet. You can link multiple documents to the same
style sheet to give all the pages in your site a consistent look and feel.
You can also assign multiple style sheets to a single document by adding more than one <link> tag.
Link to a Style Sheet
Link to a Style Sheet
Apply a Style Locally You can apply a style to a single instance of a tag
in your document using an HTML attribute. The style attribute enables you to apply a style
rule to a tag without having to define the rule separately in an internal or external style sheet.
A style applied locally overrides any styles found on external or internal style sheets for the same tag.
Applying style locally works best for one time changes or for quickly testing a style on content.
You should use internal or external style sheets for styles you plan to apply more than once.
Apply a Style Locally
Apply a Style Locally
Apply Styles to Multiple Tags You can separate a list of selectors by commas to
apply the same set of styles to all of them.
You can use the universal selector (*) to apply styles to every HTML tag in your document.
You can override such a rule by writing additional rules for specific tags.
Apply Styles to Multiple Tags
Apply a Style Using a Class You can create a CSS class to apply a style rule to
specific instances of HTML tags in a page. For example, if you want the introductory
paragraphs formatted differently from all the other paragraphs, you can create a class specifically for the introductory paragraphs.
After you create the class and assign it using the class attribute, the browser applies the formatting to all the affected paragraphs.
Apply a Style Using a Class
Apply a Style Using a Class
Generic Class You can use a generic class to format more than
one type of tag. For example, you might use a generic class to
format both paragraphs and level 3 headings in a document.
When defining a generic class, simply type a period followed by the class name and then your declaration.
Do not type an HTML tag before the period.
Generic Class
Generic Class
Assign Multiple Classes to a Tag You can assign multiple classes to a tag to add
more than one set of styles to that tag. You separate the class names with spaces.
Assign Multiple Classes to a Tag
Apply a Style Using an ID You can apply an id attribute to an HTML tag on
your page to give it a unique identifier. You can then apply styles to that HTML tag using
a special CSS selector for that tag. Using the id attribute to apply styles is an
alternative to using the class attribute.
Apply a Style Using an ID
Apply a Style Using an ID
Difference Between ID and Classes By definition, such an identifier should be
assigned to only one tag on your page. For example, if you assign a page-title identifier
to an <h1> tag at the top of your page using the id attribute, you should not assign the page-title identifier to any other instance of the <h1> tag, or to any other tags, on the page.
However, if you do assign that identifier to multiple tags, most browsers do no complain and apply any associated styles to all of the tags.
To follow the official CSS specification, if you want to apply a style to multiple tags, you should create a class.
Link to Media-specific Style Sheets You can link to several style sheets in your HTML
document and specify that different style sheets be applied for different media using the media attribute.
For example, one style sheet could be applied when the document is displayed on a computer screen, another style sheet could be applied when the document is printed, and yet another could be applied for viewing on a mobile phone or other handheld device.
Link to Media-specific Style Sheets Create two new CSS documents.
Link to Media-specific Style Sheets
Link to Media-specific Style Sheets
Media TypesMedia Type Description
all For all devicesbraille For braille tactile feed back devices
embossed For paged braille printershandheld For handheld devices such as mobile phones
(* not include iPhone, iPad, and Android phone)print For printed pages and for documents viewed in print
preview modeprojection For projected presentations
screen For color computer screensspeech For speech synthesizers
tty For teletypes, terminals and other media that use a fixed-pitch character grid
tv For televisions
Link to Style Sheets for iPads, iPhones, and Android Phones Creating styles specifically for iPad tablets,
iPhones, and phones based on the Android operating system requires specialized coding.
You cannot simply specify the handheld media type when you link to your CSS.
The iPad, iPhone, and Android OS web browser ignore handheld links and instead behave more like browsers on tradition computers – they load style sheets specific to the screen media type.
However, you can create style sheets specific to browsers on these devices by checking the maximum width of the device screen.
Link to an iPad-specific Style Sheet Create an external style sheet with rules specific
to the iPad. Link to the style sheet in your document using
the <link> tag.
The current iPad screen has a width of 1024 pixels on its longer side.
When the page is opened on an iPad, the styles are applied.
Link to and iPhone- and Android-specific Style Sheet Create a style sheet with rules specific to the
iPhone and Android phones. Link to the style sheet in your document using
the <link> tag.
The current iPhone screens have a width of 480 pixels on their longer sides.
When the page is opened on an iPhone or Android phone, the styles are applied.
Optimizing a Page for Mobile Device Key things to consider are that you are designing
for a smaller screen, navigation by touch, and slower download speeds.
You should consider increasing the font size to make the text more legible and links easier to tap; turning off the display of larger images to reduce the page download time; and disabling CSS float styles to convert multicolumn layouts into single-column layouts, which can be easier to view on smaller screens.
Define Styles for Nested Tags You can set up style rules for your page based on
how tags are nested inside other tags. For example, you can specify that a style rule be
applied to a heading tag, but only when that heading is nested inside a certain type of section tag.
You create such a style rule by specifying a sequence of tags or tag classes in a selector.
The nested order of tags on your page must match the sequence of the tags in the selector.
Defining style rules this way enables you to efficiently apply styles to precise sections of your page.
Define Styles for Nested Tags Create a new style sheet file and type the
following
You specify a nested tag style by type the name of the outer tag or tag class follow by a space and the name of the inner tag or tag class.
In this example, the selector is made up of an outer tag class, section.first, and an inner tag, h2.
Apply Styles for Nested Tags
Apply Styles for Nested Tags
Parent-Child Relationship in CSS You can specify that a style rule be applied only
to the immediate descendant, or child, of a tag using a greater-than symbol (>) in the selector.
The following applies a rule to a <p> tag that is directly inside of an <article> tag.
This rule would apply to the following.
The rule wound not apply to the following.