body {
margin: 0px;
padding: 0px;
}
ul {
width: 150px;
list-style-type: none;
margin: 0px;
padding: 0px;
background: black;
overflow: hidden;
}
li a {
display: block;
background: black;
color:white;
padding: 5px;
text-decoration: none;
}
li a:hover {
background: red;
}
This CSS code will create a vertical navigation menu.
The ul element has a width of 150px and is given a black background color with no bullet points for the list items.
The list items (li) are floated to the left so that they stack vertically, and each anchor (a) element is displayed as a block with a black background, white text, and 5px of padding. When the anchor element is hovered over, it will change its background color to red.
This is a basic HTML document that contains an unordered list <ul> with four list items <li>. Each list item contains a hyperlink <a> element with a hashtag # as its href attribute value, indicating that it is a placeholder link that does not lead to any particular web page.
This HTML code can be further styled with CSS to apply visual styles to the list items and hyperlinks, such as changing their font size, color, background color, borders, and positioning, among other things.
body {
margin: 0px;
padding: 0px;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background: black;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
background: black;
color:white;
padding: 5px;
text-decoration: none;
}
li a:hover {
background: red;
}
This is a CSS code block that styles an HTML navigation bar with a horizontal layout. Here's what each part of the code does:
body: Sets the margin and padding of the page to 0, so there are no gaps around the edge of the page.
ul: Styles the unordered list element that contains the navigation items. Sets the list-style-type to none, so there are no bullet points next to the list items. Sets the margin and padding of the list to 0, so there are no gaps between the list and other elements. Sets the background color of the list to black. Sets the overflow to hidden, so any content that exceeds the width of the list is hidden.
li: Styles each list item element. Floats each list item to the left, so they display horizontally.
li a: Styles the anchor tag that contains each navigation link. Displays the link as a block-level element, so it fills the entire width of the list item. Sets the background color of the link to black, sets the text color to white, sets padding around the text, and removes any underlines on the link.
li a:hover: Styles the link when the user hovers over it with the mouse. Changes the background color to red.
Image opacity refers to the level of transparency or how much an image is see-through.
In CSS, image opacity can be controlled using the opacity property. The opacity property takes a value between 0 and 1, with 0 being completely transparent and 1 being completely opaque.
By setting the opacity property to a value between 0 and 1, you can make an image partially transparent. For example, opacity: 0.5; would make the image 50% transparent, allowing the content beneath the image to show through.
This CSS code sets the opacity of all images on the page to 0.5, meaning they will be semi-transparent.
The second rule sets up a hover effect on the images - when the user hovers over an image with their mouse, its opacity will change to 0.3, making it even more transparent. Additionally, the image will increase in size to 400px by 400px and float to the right.
In CSS, inline-block is a display property value that combines the characteristics of both inline and block elements. It allows an element to be displayed as an inline-level block container, which means that it will appear inline with other elements but can also have a specific width, height, padding, and margin just like a block-level element.
When an element is set to inline-block, it can contain text and other inline-level elements just like an inline element. However, it also has the ability to have dimensions and spacing properties applied to it, like a block element. This makes inline-block elements useful for creating more complex layouts where you need a mixture of both inline and block level elements.
Some common use cases for inline-block include creating inline navigation menus, creating side-by-side elements, or creating a row of elements that wrap to the next line when there isn't enough space.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
This is a basic HTML document that contains four div elements with class name content. They each contain a paragraph of text.
This CSS code defines a class named "content". The properties for this class are:
display: inline-block; makes the element behave like an inline element, but with the ability to set a width and height.
width: 200px; sets the width of the element to 200 pixels.
height: 200px; sets the height of the element to 200 pixels.
background: yellow; sets the background color of the element to yellow.
margin: 5px; sets the margin around the element to 5 pixels.
padding: 5px; sets the padding inside the element to 5 pixels.
This code creates a block element with a fixed size of 200x200 pixels, with a yellow background and some spacing around it. The display: inline-block; property allows multiple elements with this class to be displayed side-by-side horizontally, as opposed to stacking vertically like normal block elements.
CSS float is a property used for positioning and aligning content within a container.
When an element is floated, it is moved to one side of its container, allowing other elements to flow around it. Float is commonly used to create layouts with multiple columns or to position images within text.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<div class="content">
<img src="trol.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
This is a basic HTML code that includes an image and two paragraphs in a div container.
The CSS code we provide floats the image to the right using the float property with a value of right.
This causes the image to be positioned to the right of the text content that comes before it in the HTML. The .content class is used to style the container element that holds the image and text.
It sets a width of 600px, adds a black border of 2px thickness, and sets a margin and padding of 5px. This provides some space between the content and the edges of the container element.
In CSS, absolute and fixed are both values for the position property, which is used to position an element on a web page.
When an element has position: absolute, it is positioned relative to its closest positioned ancestor element. If no ancestor element is positioned, then the element is positioned relative to the body element. This means that the element is removed from the normal document flow, and its position is set by the top, bottom, left, and right properties.
On the other hand, when an element has position: fixed, it is positioned relative to the viewport, which means it always stays in the same position even if the page is scrolled. This means that the element is also removed from the normal document flow, and its position is set by the top, bottom, left, and right properties.
In short, absolute positioning is relative to the nearest positioned ancestor element, while fixed positioning is relative to the viewport.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
In this CSS code, we have two div elements, .first and .second. The .first div has a width of 400 pixels and a red border. It is positioned absolutely with the top and left properties set to 0 pixels, which means it will be positioned relative to its nearest positioned ancestor element or the initial containing block if there is no positioned ancestor.
The .second div has a max-width of 400 pixels, a red border, and a yellow background color. It is positioned fixed with the bottom and left properties set to 0 pixels, which means it will be positioned relative to the browser viewport and will stay in the same position even if the page is scrolled.
Here's an example HTML code with internal CSS that demonstrates the difference between position: absolute and position: fixed:
<!DOCTYPE html>
<html>
<head>
<title>Absolute vs Fixed Positioning</title>
<style>
.first {
width: 400px;
border: 1px solid red;
position: absolute;
top: 0px;
left: 0px;
}
.second {
max-width: 400px;
margin: auto;
border: 1px solid red;
background: yellow;
position: fixed;
bottom: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class="first">
<h2>This is a div with absolute positioning.</h2>
<p>This div is positioned absolutely at the top-left corner of the page, because it has a position property of "absolute" and top and left values of 0.</p>
</div>
<div class="second">
<h2>This is a div with fixed positioning.</h2>
<p>This div is positioned fixed at the bottom-left corner of the page, because it has a position property of "fixed" and bottom and left values of 0.</p>
</div>
</body>
</html>
In this example, the first div is positioned absolutely at the top-left corner of the page, while the second div is positioned fixed at the bottom-left corner of the page. You can see the difference in their behavior by scrolling the page and observing how the second div remains fixed in place, while the first div moves along with the page.
Static position is the default position for any element on a webpage. When an element is positioned as static, it is placed according to the normal flow of the page, and it cannot be moved from that position even if the page is scrolled.
Fixed position, on the other hand, is used to position elements that should stay in a fixed location on the screen, regardless of scrolling. Elements with fixed position are positioned relative to the browser window, rather than the normal flow of the page. This means that they will stay in the same location even if the page is scrolled.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
In this CSS code, there are two div elements with the classes "first" and "second".
The first div has a width of 400 pixels and a red border. Its position property is set to static, which is the default value and means that the element will be positioned according to the normal flow of the page.
The second div has a maximum width of 400 pixels and a red border. It has a yellow background color and its position property is set to fixed. This means that the element will be positioned relative to the browser window and will not move when the page is scrolled. The bottom and left properties are also set to 0 pixels, which means the element will be fixed to the bottom left corner of the window.
Here's an example that demonstrates the differences between static and fixed positioning using internal CSS:
<!DOCTYPE html>
<html>
<head>
<title>Static vs Fixed</title>
<style>
.container {
width: 800px;
margin: 0 auto;
background-color: #f2f2f2;
padding: 20px;
border: 1px solid #ccc;
}
.static {
position: static;
width: 300px;
height: 150px;
background-color: #a9a9a9;
margin: 20px;
padding: 20px;
border: 1px solid #333;
}
.fixed {
position: fixed;
width: 300px;
height: 150px;
background-color: #ffa500;
margin: 20px;
padding: 20px;
border: 1px solid #333;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Static vs Fixed</h1>
<div class="static">
<h2>Static</h2>
<p>This box is positioned statically, which means it follows the normal flow of the document. If you scroll the page, the box will scroll along with the content.</p>
</div>
<div class="fixed">
<h2>Fixed</h2>
<p>This box is positioned fixed, which means it stays in the same position relative to the viewport. If you scroll the page, the box will remain in the same place on the screen.</p>
</div>
</div>
</body>
</html>
In this example, we have a container div that has a width of 800px and is centered on the page. Inside the container, we have two divs, one with the class "static" and one with the class "fixed".
The "static" div has a position of static, which is the default positioning value, and a width of 300px. It has a gray background color and a border, and it's positioned 20px away from the edges of the container.
The "fixed" div has a position of fixed and is positioned 20px away from the bottom and right edges of the viewport. It has an orange background color and a border, and it's also 300px wide.
When you view this HTML file in a browser, you should see the two boxes side by side inside the container. If you scroll the page, you'll notice that the "static" box scrolls along with the content, while the "fixed" box stays in the same position on the screen.
CSS max-width is a property that sets the maximum width a specific element can have.
If the content inside an element exceeds the set max-width, it will overflow and create horizontal scrollbars. max-width is often used with responsive design to ensure that an element does not become too wide on larger screens, making the content difficult to read or causing other layout issues.
When used in conjunction with width, max-width specifies the maximum width of an element, and width specifies the minimum width.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
This HTML code creates two div elements with the classes "first" and "second" inside the body element. Each div element contains a paragraph element with some Lorem Ipsum text inside.
In this CSS code, we have two classes: .first and .second.
The .first class has a fixed width of 800px, a margin set to "auto" (which centers the element horizontally), and a border of 1px solid red.
The .second class has a maximum width of 800px, a margin set to "auto" (which centers the element horizontally), and a border of 1px solid red.
The difference between these two classes is that the .first class has a fixed width, while the .second class has a maximum width. This means that the .second class will resize itself to fit the available width, but will not exceed a width of 800px.
This CSS code targets the table rows and table data cells of an HTML table.
tr:hover selector applies the styles to the table row when the user hovers over it with their mouse, changing the background color of the row to yellow.
The td selector applies padding to all table data cells within the table, making the content inside each cell have a distance of 25 pixels from the border of the cell.
This CSS code styles HTML table rows with alternating colors and a different color on hover:
tr:nth-child(even) selects all even rows (2nd, 4th, 6th, etc.) and sets their background color to yellow.
tr:nth-child(odd) selects all odd rows (1st, 3rd, 5th, etc.) and sets their background color to lightblue.
tr:hover selects the row that the mouse is hovering over and sets its background color to white. Additionally, it adds a red solid border with a width of 10 pixels to the hovered row.
The td selector sets a padding of 25 pixels to all table cells.
This CSS code sets the style of an HTML table and its elements.
The table element and its th and td child elements are all set to have a width of 500 pixels, a blue border with a width of 2 pixels, and collapsed borders.
The th elements have a light blue background color, black text color, a height of 40 pixels, and left-aligned text.
The td elements have a light yellow background color, a height of 40 pixels, centered vertical alignment, and centered text alignment.
This CSS code styles an HTML table by setting a blue solid border of 2px width, collapsing table borders, and centering it horizontally using margin: auto.
The table headers (<th>) have a light blue background, black text color, and a height of 40px. The text is aligned to the left using text-align: left and a padding of 5px is added on the left side of the content using padding-left: 5px.
The table data cells (<td>) have a light yellow background and a padding of 25px on all sides. The content is aligned vertically to the center of the cell using vertical-align: center and text is aligned to the center using text-align: center.
The HTML code above creates a simple table with two columns and three rows. The table consists of three main elements: <table>, <tr>, and <td>.
The <table> element defines the table and contains all the other elements that make up the table. Inside the <table> element, there are two rows defined by the <tr> element. The first row contains two header cells, defined by the <th> element, with the titles "Name" and "Last Name". The second and third rows contain two data cells each, defined by the <td> element, with the names "Slavoj" and "Zizek" in the second row, and "Jordan" and "Peterson" in the third row.
The <th> element is used to define header cells in a table, which are typically used to provide a title for a column. The <td> element, on the other hand, is used to define data cells in a table, which contain the actual data for each row and column.
By default, the table has no styling, but it can be styled using CSS to change its appearance, such as setting the border, background color, font size, and so on.
table {
width: 500px;
border: 2px blue solid;
}
This CSS code sets the width of the table to 500 pixels and applies a blue solid border with a thickness of 2 pixels to the table.
By default, tables in HTML do not have borders, so this CSS code adds a visible border to the table to separate it visually from other elements on the page. The border style is set to "solid", which means the border is a continuous line, and the color is blue.
The width of the table is set to 500 pixels, which means that the table will take up 500 pixels of horizontal space on the page. This can be useful to ensure that the table fits within a certain area on the page and to give it a consistent size across different devices and screen sizes.
table {
width: 500px;
border: 2px blue solid;
}
th, td {
width: 500px;
border: 2px blue solid;
}
The th, td selector targets both the table header cells (th) and regular table cells (td) in an HTML table, and sets their width to 500 pixels and adds a blue 2-pixel wide solid border around them.
This CSS code will apply a 2px wide blue solid border to all table elements including the table itself, table headers (th), and table data cells (td). It will also set the width of all these elements to 500px.
This CSS code is styling the table, table headers (th), and table cells (td) by setting the width of each element to 500px, and setting a 2px blue solid border for each element. The border-collapse: collapse property is also added, which merges the borders between adjacent cells to make the table look like a single border.
Overall, this CSS code will give a consistent width and border styling to the table, headers, and cells, making the table look more organized and visually appealing. The border-collapse: collapse property will also ensure that the table cells are tightly spaced and the borders are not unnecessarily repeated.
This CSS code sets the following styles for the HTML table and its elements:
The width of the table, table headers (th), and table data (td) is set to 500px.
The border of the table, table headers, and table data is set to a 2px blue solid line.
The border-collapse property is set to collapse, which means that the table borders will merge into a single border where they meet.
The background color of table headers is set to light blue.
The text color of table headers is set to black.
The height of table headers is set to 40px.
Overall, this code will create a table with a blue border, a fixed width of 500px, and collapsed borders. The table headers will have a light blue background, black text, and a height of 40px. The table data will have the same width and border style as the headers.
This CSS code styles an unordered list with an ID of "u_list". It sets the background color of the list to yellow and the text color to black.
This means that any unordered list element with an ID of "u_list" will have a yellow background color and black text color. The "#" symbol is used to target the element by its ID, and "ul" specifies that it is an unordered list.
Additionally, we set the list-style-type to "circle", which means that each list item will be preceded by a filled circle.
So any unordered list element with an ID of "u_list" will have a yellow background color and black text color, and each list item will have a filled circle as a bullet point.
The ordered list is given the id "o_list", which can be used to style the list using CSS. The list items are labeled as "First Element", "Second Element", and "Third Element".
The CSS code ol#o_list targets an ordered list with the id attribute of o_list and sets the following properties:
background: yellow: sets the background color of the list to yellow.
color: black: sets the text color of the list items to black.
list-style-type: decimal: sets the list item marker to decimal numbers.
So, in the HTML code, the ordered list with id attribute of o_list will have a yellow background, black text color for the list items, and each item will have a decimal number as the marker.
Links can be decorated using CSS. You can style the different states of a link using the following pseudo-classes:
:link - selects unvisited links
:visited - selects visited links
:hover - selects links when the mouse cursor is over them
:active - selects links when they are clicked or tapped
The default colors for links in CSS depend on the user agent (web browser) and operating system being used. However, as a general guide, the default colors for links in CSS per pseudo-class are:
:link - blue
:visited - purple
:hover - blue
:active - red
It's important to note that these defaults can be overridden using CSS, and it's good practice to style links to ensure they are easily distinguishable from other text and elements on the page.
This code styles links in three different states using CSS pseudo-classes. Here's what each declaration does:
a:link - Sets the color of unvisited links to orange.
a:visited - Sets the color of visited links to red.
a:hover - Sets the background color of links when the mouse cursor is over them to red, and sets the color of the link text to white.
So when a user visits the page, all links will appear as orange until they are clicked. Once clicked, the link will appear as red. When the user hovers their mouse over any link, the background of the link will turn red and the text color will change to white. This helps to give the user visual feedback and make the links more interactive.
This code styles links in four different states using CSS pseudo-classes. Here's what each declaration does:
a:link - Sets the color of unvisited links to orange.
a:active - Sets the color of links when they are clicked to yellow and sets the background color of the link to black.
a:visited - Sets the color of visited links to red.
a:hover - Sets the background color of links when the mouse cursor is over them to red, and sets the color of the link text to white.
So when a user visits the page, all links will appear as orange until they are clicked. Once clicked, the link will appear as yellow with a black background. When the user hovers their mouse over any link, the background of the link will turn red and the text color will change to white. Visited links will appear as red.
This code uses different colors and backgrounds for each of the link states, which can help users navigate the website more easily and provide visual feedback when interacting with links.
In CSS, font sizes can be specified using different units of measurement, including pixels (px), percentages (%), and rems (root ems).
Pixels (px): This is an absolute unit of measurement that defines the size of the font in pixels. Pixels are fixed units, meaning that they will always be the same size on any device, regardless of the screen size or resolution. For example, font-size: 16px; sets the font size to 16 pixels.
Percentages (%): This unit of measurement is relative to the font size of the parent element. For example, font-size: 120%; sets the font size to 120% of the font size of the parent element.
Rems (root ems): This is a relative unit of measurement that is based on the font size of the root element (usually the <html> element). For example, font-size: 1rem; sets the font size to the same size as the font size of the root element, which is often set to 16 pixels by default. Using rems is recommended because it makes it easier to create scalable and responsive designs.
Percentages and rems are relative units of measurement in CSS, meaning they are based on the size of other elements or the root element, respectively.
Percentages are based on the font size of the parent element, while rems are based on the font size of the root element, which is usually set to a default value of 16 pixels.
Using relative units like percentages and rems can be beneficial because they allow for more flexible and responsive designs that can adapt to different screen sizes and resolutions.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam.</p>
</div>
</div>
</body>
</html>
Our well known simple html example.
p {
width: 400px;
font-family: Arial;
font-size: 22px;
}
This CSS code sets the font family of all <p> elements to "Arial", the font size to 22 pixels, and the width to 400 pixels.
The font-family property sets the font family of the text, in this case to "Arial". The font-size property sets the size of the font to 22 pixels. The width property sets the width of the element to 400 pixels.
Together, these properties define the style of the text within the <p> element, specifying its font family, size, and width.
This CSS code sets the font size of the text to 22 pixels and applies the small-caps font variant.
The font-size property sets the size of the font to 22 pixels. The font-variant property applies the small-caps font variant to the text, which causes all lowercase letters to be rendered as small capitals.
Together, these properties define the style of the text, specifying its size and font variant.
There are several possible font variants that can be applied to text using CSS:
normal: The default value that specifies a normal font face.
small-caps: This variant causes all lowercase letters to be rendered as small capitals.
all-small-caps: This variant causes all letters to be rendered as small capitals.
petite-caps: This variant causes all lowercase letters to be rendered as smaller capital letters.
all-petite-caps: This variant causes all letters to be rendered as smaller capital letters.
unicase: This variant is a mix of uppercase and lowercase letters in a single set of characters.
titling-caps: This variant is designed for use in titles and causes all letters to be rendered as capital letters, with some letters being enlarged for emphasis.
These font variants can be applied using the font-variant property in CSS.
CSS provides a wide range of properties to control the characteristics of fonts used on web pages. Here are some of the font characteristics that can be controlled using CSS:
Font family: The specific typeface used for the text.
Font size: The size of the font in pixels, ems, or other units of measurement.
Font style: Whether the font is normal, italic, or oblique.
Font weight: The thickness of the font, ranging from 100 (thin) to 900 (bold).
There are several font families that are commonly used on the web, as they are widely available and provide good readability on a variety of devices and screen sizes. Some of the most commonly used font families include:
Arial, sans-serif: A sans-serif font that is commonly used for its clean, modern look and excellent readability.
Times New Roman, serif: A serif font that is commonly used for its traditional look and readability, particularly in printed materials.
Verdana, sans-serif: A sans-serif font that is specifically designed for use on the web, with a high level of clarity and legibility even at small sizes.
These are just a few examples of commonly used font families, but there are many other options available depending on the design goals and requirements of a particular project.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam.</p>
</div>
</div>
</body>
</html>
Our simple html code.
p {
width: 400px;
font-family: Arial;
}
This CSS code sets the width of all <p> elements to 400 pixels and specifies the font family as Arial. The width property sets the width of the content area of an element, while the font-family property sets the font family used for the text within an element.
In this case, all paragraphs will have a fixed width of 400 pixels, and the text within each paragraph will be displayed in the Arial font. This can be useful for ensuring consistent typography across a website or application, and for specifying a preferred font family that is appropriate for the content being displayed.
p {
width: 400px;
font-family: "Times New Roman", Arial, Verdana;
}
In this case, the browser will first try to use the Times New Roman font for the text within each paragraph. If Times New Roman is not available, the browser will try to use the Arial font. If Arial is also not available, the browser will try to use the Verdana font. This is useful because it allows for a fallback font in case the preferred font is not available on a particular user's device.
It's worth noting that font family names with multiple words or spaces, such as "Times New Roman", need to be wrapped in quotation marks in CSS to ensure that the browser interprets them correctly.
