What is CSS
CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It can also be used with any kind of XML documents including plain XML, SVG and XUL.
CSS is used along with HTML and JavaScript in most websites to create user interfaces for web applications and user interfaces for many mobile applications.
Why use CSS
These are the three major benefits of CSS:
1) Solves a big problem
Before CSS, tags like font, color, background style, element alignments, border and size had to be repeated on every web page. This was a very long process. For example: If you are developing a large website where fonts and color information are added on every single page, it will be become a long and expensive process. CSS was created to solve this problem.
2) Saves a lot of time
CSS style definitions are saved in external CSS files so it is possible to change the bentire website by changing just one file.
3) Provide more attributes
CSS provides more detailed attributes than plain HTML to define the look and feel of the website.
CSS Syntax
A CSS rule set contains a selector and a declaration block.
Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>, <title> etc.
Declaration Block: The declaration block can contain one or more declarations separated by a semicolon. For the above example, there are two declarations:
1. color: yellow;
2. font-size: 11 px;
Each declaration contains a property name and value, separated by a colon.
Property: A Property is a type of attribute of HTML element. It could be color,border etc.
Value: Values are assigned to CSS properties. In the above example, value "yellow" is
assigned to color property.
1. Selector{Property1: value1; Property2: value2; ..........;}
HTML style using CSS
Let's suppose we have created our web page using a simple HTML code, and we want something which can present our page in a correct format, and visibly attractive. So to do this, we can style our web page with CSS (Cascading Stylesheet) properties.
CSS is used to apply the style in the web page which is made up of HTML elements.
It describes the look of the webpage. CSS provides various style properties such as background color, padding, margin,border-color, and many more, to style a webpage.
Each property in CSS has a name-value pair, and each property is separated by a semicolon (;).
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="text-align: center;">
<h2 style="color: red;">Welcome to CSS</h2>
<p style="color: blue; font-size: 25px; font-style: italic;">This is a great way to
learn design your websites.</p>
</body>
</html>
Three ways to apply CSS
To use CSS with HTML document, there are three ways:
● Inline CSS: Define CSS properties using style attribute in the HTML elements.
● Internal or Embedded CSS: Define CSS using <style> tag in <head> section.
● External CSS: Define all CSS property in a separate .css file, and then include
the file with HTML file using tag in section.
Inline CSS:
Inline CSS is used to apply CSS in a single element. It can apply style uniquely in each element.
To apply inline CSS, we need to use style attribute within HTML element. We can use as many properties as we want, but each property should be separated by a semicolon(;).
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h1>
<p>This paragraph is not affected.</p>
<h1> hello there</h1>
</body>
</html>
Internal CSS:
An Internal stylesheets contains the CSS properties for a webpage in <head> section of HTML document. To use Internal CSS, we can use class and id attributes.
We can use internal CSS to apply a style for a single HTML page.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: linen;
}
h1 {
color: red;
margin-left: 80px;
}
</style>
</head>
<body>
<h1>The internal style sheet is applied on this heading.</h1>
<p>This paragraph will not be affected.</p>
<h1>The is another internal style sheet is applied on this heading.</h1>
</body>
</html>
External CSS:
An external CSS contains a separate CSS file which only contains style code using the class name, id name, tag name, etc. We can use this CSS file in any HTML file by including it in HTML file using <link> tag.
If we have multiple HTML pages for an application and which use similar CSS, then we can use external CSS.
There are two files need to create to apply external CSS
- First, create the HTML file
- Create a CSS file and save it using the .css extension (This file only will only contain the styling code.)
- Link the CSS file in your HTML file using tag in header section of HTML document.
mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
external.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
1) CSS Element Selector
The element selector selects the HTML element by name.
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p>Me too!</p>
<p>And me!</p>
</body>
</html>
2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element.
It is written with the hash character (#), followed by the id of the element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
#para2{
text-align: left;
color: yellow;
}
</style>
</head>
<body>
<p id="para1">Hello There</p>
<p>This paragraph will not be affected.</p>
<p id="para2">This paragraph will not be affected.</p>
</body>
</html>
3) CSS Class Selector
The class selector selects HTML elements with a specific class attribute. It is used with a period character .
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p cla="center">This paragraph is blue and center-aligned.</p>
<p>This paragraph is not affected</p>
</body>
</html
Author Spotlight
Santosh Chapagain
Gmail: chapagainsantoshcs@gmail.com
Phone no: +977-9863512955
2 Comments
best
ReplyDeletebest
ReplyDelete