HTML style using CSS
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web
pages all at once.
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 (;).
Tip: The word cascading means that a style applied to a parent
element will also apply to all children elements within the parent.
So, if you set the color of the body text to "blue", all headings,
paragraphs, and other text elements within the body will also get
the same color (unless you specify something else).
Example:
<body style="text-align: center;">
<h2 style="color: red;">Welcome to javaTpoint</h2>
<p style="color: blue; font-size: 25px; font-style: italic ;">This is
a great website to learn technologies in very simple way. </p>
</body>
Three ways to apply CSS
To use CSS with HTML document, there are three ways:
o Inline CSS: Define CSS properties using style attribute in the HTML
elements.
o Internal or Embedded CSS: Define CSS using <style> tag in <head>
section.
o 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, you 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:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
Output:
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.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:
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
o First, create the HTML file
o Create a CSS file and save it using the .css extension (This file only will
only contain the styling code.)
o Link the CSS file in your HTML file using tag in header section of HTML
document.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.
Here is what the "[Link]" file looks like:
"[Link]":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Tip: With an external style sheet, you can change the look of an entire web
site, by changing one file!
Output:
CSS Colors, Fonts and Sizes
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
Example
Use of CSS color, font-family and font-size properties:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:
CSS Border
The CSS border property defines a border around an HTML element.
Tip: You can define a border for nearly all HTML elements.
Example
Use of CSS border property:
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 2px solid powderblue;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Output:
CSS Padding
The CSS padding property defines a padding (space) between the text and the
border.
Example
Use of CSS border and padding properties:
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 2px solid powderblue;
padding: 30px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Output:
CSS Margin
The CSS margin property defines a margin (space) outside the border.
Example
Use of CSS border and margin properties:
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 2px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Output:
CSS Margins
The CSS margin properties are used to create space around
elements, outside of any defined borders.
There are properties for setting the margin for each side of an
element (top, right, bottom, and left).
margin-top, margin-right, margin-bottom, margin-left
All the margin properties can have the following values:
1. auto - the browser calculates the margin.
2. length - specifies a margin in px, pt, cm, etc.
3. % - specifies a margin in % of the width of the containing
element.
4. inherit - specifies that the margin should be inherited from the
parent element.
Example:
Set different margins for all four sides of a <p> element:
p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Example using margin:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom
margin of 100px, and a left margin of 80px.</div>
</body>
</html>
Margin - Shorthand Property
To shorten the code, it is possible to specify all the margin properties in
one property.
1. Use the margin shorthand property with four values:
p{
margin: 25px 50px 75px 100px;
}
If the margin property has four values:
margin: 25px 50px 75px 100px;
o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px
2. Use the margin shorthand property with three values:
p{
margin: 25px 50px 75px;
}
If the margin property has three values:
margin: 25px 50px 75px;
o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px
3. Use the margin shorthand property with two values:
p{
margin: 25px 50px;
}
If the margin property has two values:
margin: 25px 50px;
o top and bottom margins are 25px
o right and left margins are 50px
4. Use the margin shorthand property with one value:
p{
margin: 25px;
}
If the margin property has one value:
margin: 25px;
o all four margins are 25px
The auto Value
You can set the margin property to auto to horizontally center the element
within its container. The element will then take up the specified width, and
the remaining space will be split equally between the left and right
margins.
Example
Use margin: auto:
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
The inherit Value
This example lets the left margin of the <p class="ex1"> element be
inherited from the parent element (<div>):
Example
Use of the inherit value:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
CSS Border property
It is now recommended to use border property of CSS to specify border in
table.
Code:
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
</style>
</head>
<body>
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>
Output:
Collapsed Table Borders
To avoid having double borders like in the example above, set the
CSS border-collapse property to collapse.
This will make the borders collapse into a single border:
Code:
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
</style>
</head>
<body>
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>
Output:
Style Table Borders
If you set a background color of each cell, and give the border a white
color (the same as the document background), you get the impression of
an invisible border:
Example
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Rounded Table Borders
With the border-radius property, the borders get rounded corners:
Example
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
Skip the border around the table by leaving out table from the css selector:
Example
th, td {
border: 1px solid black;
border-radius: 10px;
}
Dotted Table Borders
With the border-style property, you can set the appearance of the border.
The following values are allowed:
Example
th, td {
border-style: dotted;
}
Border Color
With the border-color property, you can set the color of the border.
Example
th, td {
border-color: #96D4D4;
}
CSS Selectors
CSS Selectors are patterns used in CSS to select and target HTML elements so that styles can
be applied to them. They define which elements on a web page should receive specific styling
rules.
Used to select HTML elements based on tag name, class, id, or attributes. Help apply styles
like color, font, spacing, and layout. Make web pages structured, consistent, and visually
appealing.
CSS selectors are commonly grouped into five main categories:
I. Basic Selectors
Basic selectors in CSS are simple tools used for selecting by HTML element name
(e.g., h1), class (.class Name), ID (#idName), or universally (* for all elements).
1. Universal Selector (*): Selects all elements on the page and applies the same
style universally.
Example: Setting the font color for every element.
<html>
<head>
<style>
*{
color: red;
}
</style>
</head>
<body>
<h1>Header Text</h1>
<p>Paragraph Text</p>
</body>
</html>
2. Element Selector: Targets all elements of a specific type, such as paragraphs or
headers.
Example: Setting a common font size for all paragraphs.
<html>
<head>
<style>
p{
font-size: 16px;
color: red;
}
</style>
</head>
<body>
<p>This paragraph styled with font size 16px.</p>
</body>
</html>
3. Class Selector (.): Applies styles to elements with a specific class attribute.
Example: Making all buttons have a blue background.
<html>
<head>
<style>
.button {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<button class="button">Click Me!</button>
</body>
</html>
4. ID Selector (#): Styles a single element identified by its unique id.
Example: changing the background color of a header.
<html>
<head>
<style>
#header{
background-color: gray;
color: white;
}
</style>
</head>
<body>
<div id="header">This is the header section.</div>
</body>
</html>
II. Combinator Selectors
Used to define relationships between selectors, allowing you to style elements
based on their hierarchy or positioning in the document. Common combinators include
descendant ( ), child (>), adjacent sibling (+), and general sibling (~).
1. Descendant Selectors: Targets an element inside another, such as paragraphs
inside div.
Example: Styling paragraphs inside a div.
<html>
<head>
<style>
div p {
color: red;
}
</style>
</head>
<body>
<div>
<p>This paragraph inside a div will be red.</p>
<h3>This will not be red.</h3>
</div>
</body>
</html>
2. Child Selector (>): They only affect the direct child elements of a parent.
Example: Styling direct children paragraphs of a div.
<html>
<head>
<style>
div>p {
margin-left: 20px;
color: green;
}
</style>
</head>
<body>
<div>
<p>This is a direct child and has a left margin and color green. </p>
<div>
<h3>This is not a direct child. </h3>
</div>
</div>
</body>
</html>
3. Adjacent Sibling Selector (+): Styles an element immediately following another.
Example: Making the first paragraph bold after an h1.
<html>
<head>
<style>
h1+p {
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<h1>This is a header. </h1>
<p>This is immediately following the header and is bold and green. </p>
<p>This will not be bold. </p>
</body>
</html>
4. General Sibling Selector (~): Styles all siblings that follow a specific element.
Example: Italicizing all paragraphs following an h1.
<html>
<head>
<style>
h1~p {
font-style: italic;
color: green;
}
</style>
</head>
<body>
<h1>This is a header. </h1>
<p>This is a sibling of the h1 element and will be italicized. </p>
<p>This will also be italicized because it's a sibling of the h1 element. </p>
</body>
</html>
III. Attribute Selectors
Attribute selectors in CSS target elements based on the presence or value of their
attributes.
1. Presence Selector: It selects elements that contain a specific attribute.
Example: styling all inputs with a type attribute.
<html>
<head>
<style>
input[type] {
border: 8px solid black;
}
</style>
</head>
<body>
<input type="text" placeholder="Text input">
<input type="number" placeholder="Number input">
<h1>This is a header. </h1>
</body>
</html>
2. Attribute Value Selector: It targets elements with a particular attribute value.
Example: Styling text inputs.
<html>
<head>
<style>
input[type="text"] {
background-color: yellow;
}
</style>
</head>
<body>
<input type="text" placeholder="Text input">
<input type="password" placeholder="Password input">
</body>
</html>
3. Substring Matching (^=): It matches elements where the attribute contains a
substring.
Example: Styling links with https in their href.
<html>
<head>
<style>
a[href^="https"] {
color: green;
}
</style>
</head>
<body>
<a href="[Link] link</a>
<a href="[Link] link</a>
</body>
</html>
4. Wildcard Selector (*=): Matches elements where the attribute value contains a
specific string.
Example: Underlining links with example in the URL.
<html>
<head>
<style>
a[href*="gerrpg"] {
color:yellow;
}
</style>
</head>
<body>
<a href="[Link] contains 'gerrpg' and is yellow.</a>
<a href="[Link] also contains 'gerrpg' and is also
yellow.</a>
<a href="[Link] is not yellow.</a>
</body>
</html>
5. Ends With Selector ($=): Matches elements whose attribute value ends with a
specific string.
Example: Styling links that end with .pdf in their URL.
<html>
<head>
<style>
a[href$=".pdf"] {
color: red;
}
</style>
</head>
<body>
<a href="[Link] contains '.pdf' and is in red
color.</a>
<a href="[Link] is not in red color.</a>
</body>
</html>
6. Word Match Selector (~=): Matches elements whose attribute contains a specific
whole word (space separated).
Example: Styling elements that have the class highlight among multiple class
names.
<html>
<head>
<style>
[class~="highlight"] {
background: yellow;
}
</style>
</head>
<body>
<p class="highlight">BCA4</p>
<p class="highlight1">BCA6</p>
</body>
</html>
7. Hyphen Match Selector (|=): Matches elements whose attribute value starts with
a word followed by a hyphen.
Example: Styling elements with language attributes like en or en-US.
<html>
<head>
<style>
p[lang|="en"] {
color: blue;
}
</style>
</head>
<body>
<p lang="en-US">This is in blue color as it contains en-US'</p>
<p lang="en">This is also in blue as it contains excact matching 'en'.</p>
<p lang="fr">This is not blue.
</body>
</html>
IV. Pseudo-Classes: Pseudo-Classes in CSS define the special states of elements
for styling.
1. :hover: Styles elements when the user hovers over them.
Example: Changing the color of a link when hovered.
<html>
<head>
<style>
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="[Link] over this to see the effect.</a>
</body>
</html>
2. :focus: Styles the elements when the user focus on any particular element.
<html>
<head>
<style>
input:focus {
outline: 8px solid red;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
3. :first-child: Styles the element which is the first child of its parent.
<html><head></head>
<style>
p:first-child {
color: brown;
}
</style>
<body>
<div>
<p>Hello1</p>
<p>Hello2</p>
</div>
<div>
<h3>BCA4</h3>
<p>Hello hello</p>
</div>
</body></html>
4. :last-child: Style's the element which is the last child of its parent.
<html><head></head>
<style>
p:last-child {
color: brown;
}
</style>
<body>
<div>
<p>Hello1</p>
<p>Hello2</p>
</div>
<div>
<h3>BCA4</h3>
<p>Hello hello</p>
</div>
</body></html>
5. :not: Helps to remove a particular element from the styling index or styling context.
<html><head></head>
<style>
p:not(.one) {
color: blue;
}
</style>
<body>
<div>
<p class="one">Hello1</p>
<p class="two">Hello2</p>
<p class="three">Hello3</p>
</div>
</body></html>
V. Pseudo-Elements
Pseudo-elements allow you to target and style specific parts of an element, such as
inserting content before or after it.
They can be used to style parts of text, like the first letter or line of a paragraph.
Pseudo-elements are commonly used to enhance and beautify the internal content
of elements.
1. ::before: To insert some content before an element.
<html><head></head>
<style>
h1::before {
content: "***";
}
</style>
<body>
<h1>Welcome to BCA</h1>
</body></html>
2. ::after: To insert some content after an element.
<html><head></head>
<style>
h1::after {
content: "☀☀☀";
color: orangered;
}
</style>
<body>
<h1>Welcome to BCA</h1>
</body></html>
3. ::first-line: Styles the first line of text within a block element. Line breaks
mark the beginning of a new line.
<html><head></head>
<style>
p::first-line {
color: red;
}
</style>
<body>
<p>Welcome to GFG<br>
Hello GFG</p>
</body>
</html>
4. ::first-letter: It Styles the first-letter of a word or a sentence.
<html><head></head>
<style>
p::first-letter {
color: red;
}
</style>
<body>
<p>Welcome to BCA<br>
Hello BCA</p>
</body>
</html>
5. ::placeholder: Styles the placeholder of a specific input field.
<html><head></head>
<style>
input::placeholder {
font-size: 20x;
font-family: sans-serif;
font-weight: 900;
color: yellow;
}
</style>
<body>
<input type="text" placeholder="Enter your name">
|<input type="text">
</body></html>