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.
Major benefits of CSS:
a. 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. It was a W3C recommendation.
b. Saves a lot of time
CSS style definitions are saved in external CSS files so it is possible
to change the entire website by changing just one file.
c. 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:
color: yellow;
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.
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.
CSS Element Selector
CSS Id Selector
CSS Class Selector
CSS Universal Selector
CSS Group Selector
CSS Element Selector
The element selector selects the HTML element by name.
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
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.
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Javatpoint.com</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
CSS Class Selector
The class selector selects HTML elements with a specific class
attribute.
It is used with a period character . (full stop symbol) followed by
the class name.
A class name should not be started with a number.
If you want to specify that only one specific HTML element
should be affected then you should use the element name with
class selector.
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
<html>
<head>
<style>
p.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
CSS Universal Selector
The universal selector is used as a wildcard character. It selects all the elements on the pages.
<html>
<head>
<style>
*{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
CSS Group Selector
The grouping selector is used to select all the elements with the same style
definitions.
Grouping selector is used to minimize the code. Commas are used to separate each
selector in grouping.
Let's see the CSS code without group selector.
h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p{
text-align: center;
color: blue;
}
It can be grouped in following ways:
h1,h2,p {
text-align: center;
color: blue;
}
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
<h2>Hello Javatpoint.com (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>
CSS is added to HTML pages to format the document according to
information in the style sheet.
There are three ways to insert CSS in HTML documents.
1.Inline CSS
2.Internal CSS
3.External CSS
Inline CSS
Inline CSS is used to apply CSS on a single line or element.
Syantax:
<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>
Example:-
<p style="color:blue">Hello CSS</p>
<h2 style="color:red;margin-left:40px;">Inline CSS is applied on this
heading.</h2>
Internal CSS
Internal CSS is used to apply CSS on a single document or page. It can affect all the
elements of the page. It is written inside the style tag within head section of html.
<html>
<head>
<style>
body {
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>
</body>
</html>
External CSS
External CSS is used to apply CSS on multiple pages or all pages. Here, we
write all the CSS code in a css file. Its extension must be .css
For example style.css.
p{color:blue}
to link this style.css file to your html pages like this:
<link rel="stylesheet" type="text/css" href="style.css">
It uses the <link> tag on every pages and the <link> tag should be put
inside the head section.
CSS Comments
CSS comments are generally written to explain your code. It is very helpful for the users
who reads your code so that they can easily understand the code . Comments are ignored
by browsers.
Comments are single or multiple lines statement and written within /*............*/ .
<html>
<head>
<style>
p{
color: blue;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
</style>
</head>
<body>
<p>Hello Javatpoint.com</p>
<p>This statement is styled with CSS.</p>
<p>CSS comments are ignored by the browsers and not shown in the output.</p>
</body>
</html>
CSS Border
The CSS border is a shorthand property used to set the border on
an element.The CSS border properties are use to specify the style,
color and size of the border of an element. The CSS border
properties are given below.
border-style
border-color
border-width
border-radius
CSS border-style
The Border style property is used to specify the border type which
you want to display on the web page. There are some border style
values which are used with border-style property to define a
border.
Value Description
none It doesn't define any border.
dotted It is used to define a dotted border.
dashed It is used to define a dashed border.
solid It is used to define a solid border.
Value Description
double It defines two borders with the same border-width value.
groove It defines a 3d grooved border. effect is generated according to border-
color value.
ridge It defines a 3d ridged border. effect is generated according to border-color
value.
inset It defines a 3d inset border. effect is generated according to border-color
value.
outset It defines a 3d outset border. effect is generated according to border-color
value.
<html>
<head>
<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>
</html>
CSS border-width
The border-width property is used to set the border's width. It is set in pixels. You can also use the one of
the three pre-defined values, thin, medium or thick to set the width of the border.
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<p class="one">Write your text here.</p>
<p class="two">Write your text here.</p>
<p class="three">Write your text here.</p>
</body>
</html>
CSS border-color
There are three methods to set the color of the border.
Name: It specifies the color name. For example: "red".
RGB: It specifies the RGB value of the color. For example: "rgb(255,0,0)".
Hex: It specifies the hex value of the color. For example: "#ff0000".
There is also a border color named "transparent". If the border color is not set it is
inherited from the color property of the element.
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: #98bf21;
}
</style>
</head>
<body>
<p class="one">This is a solid red border</p>
<p class="two">This is a solid green border</p>
</body>
</html>
CSS Backgrounds
The CSS background properties are used to define the background
effects for elements.
CSS background properties:
background-color
background-image
background-repeat
background-attachment
background-position
<html>
<head>
<style>
h1 {
background-color: green;
}
div{
background-color: lightblue;
}
p{
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>
