WHAT IS CSS:
CSS stands for Cascading Style Sheets
Cascading Style Sheet(CSS) is used to set the style in web pages that contain HTML elements. It sets the background color, font-size, font-family, color etc
CSS describes how HTML elements should be displayed.
CSS Syntax:
TYPES OF CSS
Following are the three methods to add CSS to HTML documents.
INLINE CSS:
Inline Style Sheets included with HTML element i.e. they are placed inline with the element. To add inline CSS, we have to declare style attribute which can contain any CSS property.
Syntax:
<Tagname STYLE = “ Declaration1 ; Declaration2 “> …. </Tagname>
In the following example, we have used the inline CSS in <p> and <h1> tag.
- <!DOCTYPE html>
- <html>
- <body style="background-color:white;">
- <h1 style="color:Red; padding:20px;">CSS Tutorials</h1>
- <p style="color:blue;">It will be useful here.</p>
- </body>
- </html>
INTERNAL CSS
Embedded Style Sheets are use to apply same appearance to all occurrence of specific element. These are defined in <head> element by using the <style> element.
Syntax
<head> <title> …. </title>
<style >
…….CSS Rules/Styles….
</style>
</head>
Example:
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- body {
- background-color: black;
- }
- h1 {
- color: red;
- padding: 50px;
- }
- </style>
- </head>
- <body>
- <h2>CSS types</h2>
- <p>Cascading Style sheet types: inline, external and internal</p>
- </body>
- </html>
EXTERNAL CSS
External Style Sheets are the separate .css files that contain the CSS rules. These files can be linked to any HTML documents using <link> tag with rel attribute.
To use the external CSS, follow the steps, given below:
- Create a new .css file with text editor, and add Cascading Style Sheet rules too.
Example:
- .xleftcol {
- float: right;
- width: 35%;
- background:#608800;
- }
- .xmiddlecol {
- float: right;
- width: 35%;
- background:#eff3df;
- }
2. Add reference to the external .css file right after <title> tag in the <head> section of HTML sheet:
<link rel="stylesheet" type="text/css" href="style.css" />
CSS FUNDAMENTALS
- Identify CSS syntax.
- Identify CSS use formats.
- Utilize various types of CSS selectors.
- Utilize various types of color values in CSS.
- Recognize and implement CSS comments.
BENEFITS
- CSS saves time
- Pages load faster
- Easy maintenance
- Superior styles to HTML
DISPLAY PROPERTIES
The display property controls the box's type generated by an element.
Types:
- display: inline
- display: block
- display: inline-block
- display: none
“display: inline” Property: This property is used to display an element as an inline element (like <span>). The height and width properties are not effected on display: inline; property. It allows only left and right side of margin, not top and bottom.
“display: block” Property: A block element fill the entire line, and nothing can be displayed on its left or right side.
“display: inline-block” Property: This property is used to display an element as an inline-level block container. The element itself formatted as an inline element, but it can apply height and width values. It is placed as an inline element (on the same line as adjacent content).
“display: none” Property: You can hide an element in CSS using the CSS properties display: none or visibility: hidden.
display: none : removes the entire element from the page and mat affect the layout of the page. visibility: hidden hides the element while keeping the space the same.
ATTRIBUTES
HTML attributes are special words which provide additional information about the elements or attributes are the modifier of the HTML element.
Types:
- ID Attribute
- Class Attribute
- Style Attribute
- Title Attribute
ID ATTRIBUTE
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
The id attribute is most used to point to a style in a style sheet
Syntax-
<tagname id=””></tagname>
CLASS ATTRIBUTE
The class attribute specifies one or more class names for an element.
The class attribute is mostly used to point to a class in a style sheet.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
color: blue;
}
p.important {
color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph. :)</p>
</body>
</html>
STYLE ATTRIBUTE
The style attribute specifies an inline style for an element.
The style attribute will override any style set globally, e.g. styles specified in the <style> tag or in an external style sheet.
The style attribute can be used on any HTML element
Example
<h1 style="color:blue;text-align:center;">This is a header</h1>
<p style="color:green;">This is a paragraph.</p>
TITLE Attribute
The title attribute is used to specify extra information about the element. When the mouse moves over the element then it shows the information.
Syntax:
<element title = "text">
Example:
<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p title=" Tutorials">AchieversIT </p>
4.png)