How to include CSS with HTML?
In previous chapter of CSS Tutorials we have already discussed about the methods by which HTML Elements can be styled. In this chapter we will go to learn How to use those three CSS methods.
CSS can be used to HTML by three different methods; mentioned below:
1. Inline – In this method we use style attribute inside the HTML element.
2. Internal – In this method we use to define the CSS property: value pair inside <style> element within <head> section. We target to select the elements by its name or selector attributes like id and class. We have learnt about the selector attributes in HTML5 Tutorial - HTML Attributes chapter.
3. External – In this method we use external CSS file and create a hyperlink between HTML and CSS documents and target to select the elements by its name or selector attributes like id and class.
Using Inline CSS
An inline CSS can be use to describe the style of a single HTML element. Style Attribute is used (in that HTML element) to define a style of the element.
Syntax
<element style = “CSS-Property: CSS-Value ;”>
Don’t add space between the property value and the unit. For Example: ‘width:10 px’. This is wrong way. Always follow the correct way which is: ‘width:10px;’.
To use multiple style description in Single HTML element, define multiple times CSS property value pairs separated by semicolon (;), you can easily understand with below example:
<p>An Example of <span style = "background:yellow;padding:5px;border-radius:5px;">Inline CSS<span></p>
<p>Above heading and paragraph is styled with Inline CSS.</p>
Note: Grouping of Style cannot be done with Inline CSS.
Using Internal CSS or Embedded CSS
Internal or Embedded CSS can be used with <style> element. We can describe the style of HTML elements by putting CSS property and value within <style> element. <style> tag is defined inside the <head> tags on HTML document.
Syntax
<style>
Selector{
CSS-Property: CSS-Value ;
}
</style>
Follow to example to understand better:
<head>
<title>CSS Tutorial - progrramers</title>
<style type = "text/css" media = "all">
body{
background:#CCCCCC;
text-align:center;
}
p:nth-child(2){
background:#313131;
color:#FFFFFF;
padding:10px;
display:inline;
}
h1{
color:#424242;
font-family:ubuntu;
}
div{
background:#FFFFFF;
margin:10%;
padding:10px;
}
span{
background:yellow;
padding:5px;
border-radius:5px;
}
</style>
</head>
Example Explained:
You can clearly see in the above Try Yourself example that at first
1. <style> tag is defined inside <head> tag. This is the standard method. We should always put <style> tag inside the <head> to define Internal CSS on HTML document. You can also see ‘type’ and ‘media’ attributes inside the <style> tag which is required before HTML version 5.0. It means that if you are working lesser version from HTML5 that it is mandatory to define at least ‘type’ attribute. ‘media’ attribute is an optional choice until you are not working with responsive web design.
2. ‘type’ attribute specifies the style sheet language as a content-type (MIME type). ‘media’ attribute helps to identify the device screen size and adjust the HTML element according to alternate defined style rules. We will read more about media in coming chapters.
3. HTML elements are targeted by their names which is called selector, CSS-Property and CSS-value together define the specific style to Elements.
Below is the Attribute of <style> tag and their possible values.
Attribute
|
Value
|
Description
|
type
|
text/css
|
Specifies
the style sheet language as a content-type (MIME type). This is required
attribute.
|
media
|
Screen
Tty
Projection
TV
Print
Projection
Braille
Aural
All
|
Specifies
the device the document will be displayed on. Default value is all.
This is an optional attribute.
|
External CSS
External CSS is just similar to Internal CSS. Only the difference is that unlike internal CSS, External CSS is written on separate file which is saved with ‘.CSS’ extension. To create link between ‘.CSS’ files and HTML documents there is a link defined on HTML document.
Syntax
<link href = “file.css” type = “text/css”/>
Example Explained
1. External CSS is written on a separate file which is saved as “example.css” and linked to HTML document with <link href = “ ”> tag defined in head tag.
2. ‘type’ attribute inside the <link> tag which specifies the style sheet language as a content-type (MIME type) is required before HTML version 5.0. It means that if you are working lesser version from HTML5 that it is mandatory to define ‘type’ attribute.
<html>
<head>
<title>CSS Tutorial - progrramers</title>
<link href = "" rel = "stylesheet" type = "text/css"/>
</head>
<body>
<h1>Welcome to progrramers</h1>
<p>A w3School for W3Programmers</p>
<div>
<p>An Example of <span>External CSS</span><br /><br />
All heading and paragraph are styled with External CSS.</p>
</div>
</body>
</html>
CSS Rules Overriding
Before we try to understand CSS rules overriding, we must remember that HTML Document rendered top to bottom line by line and executed on the web browser. This means that which element is written first, will be rendered first and last element will be rendered last.
What is CSS rule overriding? We read above that CSS can be use in different ways so there is a priority of every method which overrides another. Below is the list which defines number one has highest priority
1. Inline CSS – Inline CSS defined inside the HTML Elements, has the highest priority. It means that it will override all the CSS Rules defined inside <head> tag or External Style Sheet or browser defaults.
2. Internal CSS and External CSS – Both depend on the situation that which one is written on last. If <style> tag is defined after <link> tag inside the <head> section then internal CSS will override the External CSS rules and Vice Versa.
3. Browser Default.
Related Topics
Post A Comment:
0 comments: