HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.
Example
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
The property is a CSS property. The value is a CSS value.
You will learn more about CSS later in this tutorial.
Background Color
The CSS background-color property defines the background color for an HTML element.
Example
Set the background color for a page to powderblue:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Example
Set background color for two different elements:
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
Text Color
The CSS color property defines the text color for an HTML element:
Example
Fonts
The CSS font-family property defines the font to be used for an HTML element:
Example
Text Size
The CSS font-size property defines the text size for an HTML element:
Example
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:
Example
Chapter Summary
- Use the style attribute for styling HTML elements
- Use background-color for background color
- Use color for text colors
- Use font-family for text fonts
- Use font-size for text sizes
- Use text-align for text alignment
HTML Exercises
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
# Getting started with CSS
An external CSS stylesheet can be applied to any number of HTML documents by placing a <link> element in each HTML document.
The attribute rel of the <link> tag has to be set to "stylesheet" , and the href attribute to the relative or absolute path to the stylesheet. While using relative URL paths is generally considered good practice, absolute paths can be used, too. In HTML5 the type attribute can be omitted
It is recommended that the <link> tag be placed in the HTML file’s <head> tag so that the styles are loaded before the elements they style. Otherwise, users will see a flash of unstyled content
# Example
hello-world.html
style.css
Make sure you include the correct path to your CSS file in the href. If the CSS file is in the same folder as your HTML file then no path is required (like the example above) but if it’s saved in a folder, then specify it like this href="foldername/style.css" .
External stylesheets are considered the best way to handle your CSS. There’s a very simple reason for this: when you’re managing a site of, say, 100 pages, all controlled by a single stylesheet, and you want to change your link colors from blue to green, it’s a lot easier to make the change in your CSS file and let the changes "cascade" throughout all 100 pages than it is to go into 100 separate pages and make the same change 100 times. Again, if you want to completely change the look of your website, you only need to update this one file.
You can load as many CSS files in your HTML page as needed.
CSS rules are applied with some basic rules, and order does matter. For example, if you have a main.css file with some code in it:
All your paragraphs with the ‘green’ class will be written in light green, but you can override this with another .css file just by including it after main.css. You can have override.css with the following code follow main.css, for example:
Now all your paragraphs with the ‘green’ class will be written in darker green rather than light green.
Other principles apply, such as the ‘!important’ rule, specificity, and inheritance.
When someone first visits your website, their browser downloads the HTML of the current page plus the linked CSS file. Then when they navigate to another page, their browser only needs to download the HTML of that page; the CSS file is cached, so it does not need to be downloaded again. Since browsers cache the external stylesheet, your pages load faster.
# Internal Styles
CSS enclosed in <style></style> tags within an HTML document functions like an external stylesheet, except that it lives in the HTML document it styles instead of in a separate file, and therefore can only be applied to the document in which it lives. Note that this element must be inside the <head> element for HTML validation (though it will work in all current browsers if placed in body ).
# CSS @import rule (one of CSS at-rule)
The @import CSS at-rule is used to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, @import cannot be used inside conditional group at-rules. @import
# How to use @import
You can use @import rule in following ways:
A. With internal style tag
B. With external stylesheet
The following line imports a CSS file named additional-styles.css in the root directory into the CSS file in which it appears:
Importing external CSS is also possible. A common use case are font files.
An optional second argument to @import rule is a list of media queries:
# Inline Styles
Use inline styles to apply styling to a specific element. Note that this is not optimal. Placing style rules in a <style> tag or external CSS file is encouraged in order to maintain a distinction between content and presentation.
Inline styles override any CSS in a <style> tag or external style sheet. While this can be useful in some circumstances, this fact more often than not reduces a project’s maintainability.
The styles in the following example apply directly to the elements to which they are attached.
Inline styles are generally the safest way to ensure rendering compatibility across various email clients, programs and devices, but can be time-consuming to write and a bit challenging to manage.
# Changing CSS with JavaScript
# Pure JavaScript
It’s possible to add, remove or change CSS property values with JavaScript through an element’s style property.
Note that style properties are named in lower camel case style. In the example you see that the css property font-family becomes fontFamily in javascript.
As an alternative to working directly on elements, you can create a <style> or <link> element in JavaScript and append it to the <body> or <head> of the HTML document.
# jQuery
Modifying CSS properties with jQuery is even simpler.
If you need to change more than one style rule:
jQuery includes two ways to change css rules that have hyphens in them (i.e. font-size ). You can put them in quotes or camel-case the style rule name.
# See also
# Styling Lists with CSS
There are three different properties for styling list-items: list-style-type , list-style-image , and list-style-position , which should be declared in that order. The default values are disc, outside, and none, respectively. Each property can be declared separately, or using the list-style shorthand property.
list-style-type defines the shape or type of bullet point used for each list-item.
Some of the acceptable values for list-style-type :
- disc
- circle
- square
- decimal
- lower-roman
- upper-roman
- none
(For an exhaustive list, see the W3C specification wiki
To use square bullet points for each list-item, for example, you would use the following property-value pair:
The list-style-image property determines whether the list-item icon is set with an image, and accepts a value of none or a URL that points to an image.
The list-style-position property defines where to position the list-item marker, and it accepts one of two values: "inside" or "outside".
# Remarks
Styles can be authored in several ways, allowing for varying degrees of reuse and scope when they are specified in a source HTML document. External stylesheets can be reused across HTML documents. Embedded stylesheets apply to the entire document in which they are specified. Inline styles apply only to the individual HTML element on which they are specified.
Before You Begin
I’ve made a website where you can discover foreign language music and learn a language using songs lyrics in 19 languages. Check it out and view it as an example of what you could built after a bit of practice.
Introduction
Take a moment and picture yourself as having all the skills and experience of a full-fledged web developer and as having accomplished all of your programming goals.
This course will get you one step closer to fulfilling that vision. Let’s begin. Here is a link to the HTML Course if you would like a refresher.
HTML Full Course in One Article
The Essentials of Web Development
CSS means Cascading Style Sheets. Files containing CSS code end in “.css” and are used to give style to HTML elements. Basically, CSS is used to turn a website with basic structure and content into something much prettier.
Linking to Your CSS File
If you are just reading this for the concepts, you don’t have to worry about linking the CSS file to the HTML file.
But, if you are using Visual Studio Code to follow along with this course, you will have to link them yourself. You connect the files by putting a link element inside the head of your HTML file. Set the “rel” attribute to “stylesheet” and the “href” attribute to your CSS file’s pathway. If your CSS file is in the same folder as your HTML file and is not nested any further, you simply set “href” to the CSS file’s name.
Because of Emmet shortcuts, in Visual Studio Code, you can type “link” and then press the tab button to automatically add everything you need except for the “href” value. You will have to edit that separately.
CSS Structure
CSS code looks like this and has a three-part structure:
- Selector: A word or series of words that tells the browser what element or elements you want to style.
- Property: The property you want to style
- Value: The style you will give the property (end the style declaration with a semicolon)
As an example, if you wanted to change the background color of the body element, you would write:
The body is empty in the above example.
While it is good practice to use the “!+TAB” way of generating the HTML base code, the following code examples will not include the base code because that makes the concepts easier to understand. They will also omit the body element.
Before you learn the many properties that can be styled using CSS, it is crucial to understand how to select an element or how to select a group of elements. We will use the “background-color: yellow” example to explain the many selector options available to you.
Element Selectors
The first type of selector is the element selector.
In an element selector, you simply write the element’s name. The following example targets all of your HTML’s h2 elements.
Note that in the above code, there was an h2 element without any h1 element. If you remember from the HTML Full Course, this is bad code! You should first use h1 elements and then gradually work your way down.
ID Selectors
Id selectors are commonly used when you wish to select only one element. Id attributes are included in elements’ opening HTML tags and must be unique to that element. They look like this:
The ID selector begins with “#” and then you include what you assigned the “id” attribute in your HTML code. For this example, the first heading of a website was given a unique “id” of “first-heading”, and now, because of our CSS, the first heading’s background color is yellow.
Class Selectors
The attribute “class” can also be added to elements’ opening tags and used in our selector statements. Unlike the “id” attribute, classes don’t have to be unique to each element and are used to group elements with similar styles.
Class selectors begin with “.” and then have the value you assigned to the “class” attribute in your target elements.
You can assign more than one class to an element. Just put a space between each class name, wrap the names in quotation marks, and assign it to the “class” attribute. Now we can use CSS to target both of the classes. Here’s what it could look like:
Attribute Selectors
We can also select elements using attribute selectors. Attribute selectors select all the elements that have a certain value assigned to an attribute. Follow the following format in your selector statement: [attribute-name = “assigned-value”].
You can be even more specific with attribute selectors by selecting elements whose attribute value starts, ends, or contains a string of text. Here’s what they would look like:
Starts With: [attribute-name ^= “string”]
Ends With: [attribute-name $= “string”]
Contains: [attribute-name *= “string”]
In addition to selecting by element, id, class, or attribute, there are many other options and variations which will be covered below.
Select All Selectors
Select all selectors style all of the elements. For example, the following code targets everything, including the body element, and makes them all have a yellow background.
You can also select all the elements that are nested after an element or group of elements. Use selectors to select the intended elements, put a space, and type “*”. This code selects all the elements that are nested inside h1 elements and, therefore, only the span element gets a yellow background:
Descendant Selectors
Descendant selectors are used to select all the elements of a certain type that are nested within another certain type of element, regardless of how far nested they are. The following example targets all the span elements that are nested within h1 elements.
You can also select the immediate children that are nested within an element or nested within each element in a group of elements using the “greater than” symbol. Here is an example that targets the italicized elements that are nested one level down within every element that has the class “all-headers”:
Sibling Selectors
Next, we have sibling selectors. There are two main types: general and adjacent.
The general sibling selector targets all the siblings of a certain type that follow the first targeted element or group of elements. It uses a “
” symbol and looks like this:
Here we are targeting all span elements that follow h1 elements. Follow, in this case, means that the targeted span elements come after the h1 elements and are in the same “level” as the h1 elements, so to speak. In other words, neither of them are nested within each other. So, that was the general sibling selector.
We also have the adjacent sibling selector that only selects elements that are immediate neighbors of the first targeted element(s). Use a “+” symbol to code this selector.
Multiple Selectors
You can list multiple selection statements before you declare properties and values. This is achieved by separating each selection statement with a comma. Here is an example that styles both h1 and span elements.
Pseudo-Elements
Now we get to the more complicated selector statements, the first one being pseudo-elements. Pseudo-elements are kind of like sub-elements that can be targeted in selection statements. Here are two examples (Note that we use two colons to connect elements with their pseudo-elements):
Placeholders
This code makes the placeholder’s background turn yellow for each element that has the type “text”.
First Letters
This code makes the first letter of each paragraph have a blue background color.
There are many more pseudo-elements, but the point of this lesson is just to make you aware of their existence. Same thing with the following selection type, pseudo-classes.
Pseudo-Classes
Using a colon, we can target an element’s properties when something special happens to that element. The most often used pseudo-class is “hover” and here’s what it would look like:
Without hovering over the button, the button has no background color.
But when the website user hovers their cursor over the button, the background color turns yellow.
CSS Specificity
The final point about selector statements in CSS has to do with specificity scores. For every CSS selector, a specificity score is calculated that helps the browser decide between conflicting selectors.
When more than one selector is trying to change the same property, the browser ends up implementing the property value that comes from the selector statement with the highest specificity score.
From lowest to highest specificity, the order goes as follows:
Element Selectors < Class Selectors < ID Selectors
When you make complicated selector statements, it gets pretty difficult to figure out if one selector is more specific than another. Luckily, Visual Studio Code comes to the rescue. If you hover over the selection statement in your CSS file, it will tell you the score.
If you have two selectors that both try to change the same property and each of the selectors has the same specificity score, the browser will pick the selector that comes last in the file. Otherwise, it goes with the highest scoring selector.
Styling Text
Now that you know how selectors work, we can see some examples of properties and their possible values. First, we will go over how to style text.
The text’s size can be changed using the “font-size” property, which is usually given a height in pixels. This code sizes the text to the height of 30 pixels.
Boldness
The “font-weight” property determines the text’s degree of boldness. Values range from least bold (“100”) to most bold (“900”). You can also assign the words “bold” or “normal” to this property. Here is what this property looks like in action:
Fonts
You can use the property “font-family” to change your text’s font style. Some of the available font families that work for most browsers include Arial, Courier New, Georgia, and Times New Roman. The code looks like this:
To play on the safe side, you might want to specify a list of fonts. The browser tries to load the first font and will move on to the next one if the first one doesn’t work out. Simply list the fonts and separate them with commas. You can have as many backup fonts as you want.
If you want to use less standard font styles, you might want to check out Google Fonts. You can look around until you find a font you like. Then click “select this style” and look for the link tag with the attributes “href” and “rel”. Copy and paste that link tag into the head element of your HTML code. Then follow the CSS guidelines under the phrase “CSS rules to specify families” to set the font-family to that font in your CSS file.
Google Fonts also is great for seeing what fonts look good together if you click on the font and then scroll down to the “Pairings” section.
Text Alignment
The “text-align” property can take the values “left”, “right”, and “center”. This property aligns the text to either the left side, the right side, or to the center of the text’s parent element. Here’s an example:
Line-Height
You can change the height of each line of text using the “line-height” property. This property is by default set to “normal”. But you can use a unitless number to change this. Unitless numbers are numbers without a specified unit type like 2 or 1.1. I won’t get too far into the weeds here, but we use unitless numbers over “unit-full” numbers because it ensures that the line-height will scale proportionally when the page is zoomed in or out.
Letter Spacing
The property “letter-spacing” changes the length of the space between each letter. It usually takes a number of pixels, and can also be set to “normal” to get the default spacing.
Word Spacing
To change the spacing between words, give the property “word-spacing” a value in pixels or you can set it to normal.
Text Transform
You can use the “text-transform” property to make each word capitalized, to make the letters uppercase, or to make the letters lowercase. Here’s what they would look like:
Underlining Text
While you could use HTML to underline the text, underlining in CSS gives you more customization options. You add an underline by setting the “text-decoration” property to “underline solid” or to “underline dotted” to create a solid or a dotted line respectively.
You can also change the color of the line using the “text-decoration-color” property, like this:
Often, you will want to remove underlines from links. This is achieved by setting “text-decoration” to “none”.
Text Shadow
You can add a “text-shadow” to the text. The value given to the “text-shadow” property follows the following form: “offset-x offset-y blur-radius color”. These terms will be explained below the code example.
Each of the offset values (“offset-x” and “offset-y”), take a number of pixels that can be positive or negative. If they were negative it would look like “-2px”. Positive offset values make the shadow go to the right and down. Negative offset values, alternately, make the shadow go to the left and up.
The blur-radius is used to give a blur to the shadow and it takes a positive pixel value.
Finally, the color determines the color of the shadow (more on colors in the “Colors” section below).
You can even give the text multiple text shadows. Put a comma after the first shadow’s values and then add the second shadow’s values like this:
Text Color
You can change the color of any text that is nested inside another element. Select the parent element with your selector and then use the property “color”.
There are many more options than basic colors. The next section goes into details on all the options you may choose.
Colors
Besides just writing the name of the color for properties like “background-color” and “color” and “line-decoration-color”, you can use “hue, saturation, lightness, and alpha (HSLA)”, “red, green, blue, and alpha (RGBA)”, and also “hex-codes” to get more specific colors.
For HSLA colors, the first number ranges from 0 to 360 and is the hue of the color. The hue represents the location of the color on a color wheel in terms of degrees.
The second number ranges from 0% to 100% and is the saturation of the color. 0% means the color is grayed out and 100% means the color is completely not grayed out.
The third number also ranges from 0% to 100% and is the color’s lightness. 0% means the color is completely darkened and 100% means the color is completely lightened.
Finally, the fourth number is a decimal number that ranges from 0 to 1 and is the color’s alpha. At 0, alpha makes the color completely see-through. At 1, alpha makes the color completely not see through.
RGBA is simpler to understand. R, G, and B range from 0 to 255 and represent how red, green, and blue the color is. 0, 0, 0 means no red, no green, and no blue is added, and 255, 255, 255 means maximum red, maximum green, and maximum blue is added.
Alpha, once again, determines the color’s see-through-ness.
Hex-codes
Hex-codes are written using hexadecimal numbers that represent the RGBA numbers but instead of each value going from 0 to 255, each value goes from 00 to FF. In other words, rather than having each digit range from 0 to 9, your options include 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F. Two of the 16 options are chosen to determine R. Two are chosen to determine G. And it’s the same thing for B and A. The R, G, and B values are completely lacking their respective colors at 00, and are full of their respective colors at FF. And then Alpha just ranges from 00 to FF instead of from 0 to 1. Hex-codes begin with “#” and then have 8 digits.
Backgrounds
There are several options for styling an element’s background like, for example, the body’s background, which covers the whole page. These options include having a solid background color, a linear-gradient, and a background image.
Background Color
To get a solid background color, set the “background-color” to one of the color options we went over in the last section.
Linear Gradient
You could also use a linear gradient to style the background which gradually changes the background from one color to another, as you go across the screen.
To make a linear gradient, have the “background” property’s value follow this form: “linear-gradient(gradient-direction, first-color, second-color, third-color, etc…)”.
The “gradient-direction” should be set to a certain number of degrees. “45deg” means the gradient will run diagonally. “90deg” means the gradient will run from left to right. For the colors, you can use any of the previously listed techniques to specify the gradient colors.
Background Image
Nowadays, many websites have background images. You do this with the “background-image” property, which you set to a URL link. The string that goes in the URL link can either be an image file hosted online or a locally hosted image in one of your computer’s files. Here is what an image from Unsplash would look like in the background:
When you have finished setting the background image, you can now make some more modifications to the background.
Currently, the image size is repeated as many times as necessary to fill the body. To stop a background from repeating, use the “background-repeat” property and set it to “no-repeat”.
Alternately, the property “background-size” can be used to cover the image across the entire body with the value “cover”. Then you don’t have to worry about repeating images.
To change what part of the photo is covering the body when “background-size” is set to “cover”, use the “background-position” property. You can target each of these regions of the photo: “top”, “bottom”, “left”, “right”, and “center”.
CSS Variables
CSS Variables are used to store property values like long URLs or specific colors. It can save a lot of typing time and make your code easier to read. Within a selector’s curly brackets, write code that mirrors the following:
The variable “special-color” can now be used in future CSS declarations that select elements that are nested within the body element.
You can give a fallback value to CSS variables for when the variable doesn’t work. Change the “var( — variable-name);” to “var( — variable-name, fallback-value);”.
If there was an error with the special color like if “ — special-color” was spelled wrong, the background would be blue.
You can define global variables in CSS with the following code that doesn’t go within the curly brackets after a CSS selector statement but instead exists by itself:
Global variables can be accessed by any selector, and for any element(s).
Box Model
The next topic we will cover is the Box Model. Every HTML element belongs to a box like this and when you hover over the HTML in Google Chrome’s Developer Console. It is the box that gets highlighted on the website.
Looking at the box model diagram, the inside rectangle is the element, then (from the inside out) we have the padding, then the border, and finally the margin. E.P.B.M. I suggest making an acronym so you can quickly remember the order. It’s common to mix up padding and margin, but you’ll get the hang of it quickly.
Element
Sizing an element is achieved with the “width” and “height” properties. Usually, either the number of pixels, percentages of the parent’s width and height, or percentages of the view-width and the view-height are used. Here, the element with an “id” of “unique” is given a different width and height to showcase the various options.
These values are also used to size the width of paddings, borders, and margin, so it is important to remember them.
Box Sizing
By default, or if you set the property “box-sizing” to “content-box”, the width and height properties determine only the element’s size. You can change that, however. If you set “box-sizing” to “border-box”, the width is calculated including the element, the padding, and the border. To further explain these differences, take a look at this code and the resulting effects.
Child 2’s width property has accounted for not just the element size, but also the padding and the border. The child was limited to 100 pixels in width, and as a result, had to shrink the element size.
Child 1, on the other hand, only had the element limited to 100 pixels in width. The border, with a width of 10px, extended beyond the element’s 100 pixels.
Padding
The padding creates distance between the border and the element’s content. You can style all the padding sides at once, like this:
Or you can style each side’s padding individually, like this:
I often catch myself trying to call the property “padding-bot,” which is not a thing. Something to watch out for.
You also may want to get rid of all the padding. To do this, set the padding property to “0”.
I’ll give a more detailed example that may clarify padding for you. This is what the element with an id of “not_padded” looks like without padding:
And this is the element with an id of “padded” when it is in fact padded:
As you can see, the div with the id “padded” is pushed closer to the middle of its parent as the padding takes up space on all four sides.
Border
The border surrounds the padding and you can change the border’s style, color, and width, as well as the roundness of the border. Let’s start with width.
Border-width is determined by the “border-width” property. Use a number of pixels (20px), a percentage of the parent’s width or height (50%), or a percentage of the view-width or view-height (60vw or 80vh).
After setting the width of the border, we can change the color, with the “border-color” property and the style with the “border-style” property.
For “border-color” just set it to one of the many color options previously mentioned.
For “border-style” just set it to one of these options: “solid”, “dashed”, “dotted”, or “none”. “Solid” makes a solid border, “dashed” makes a dashed border, “dotted” makes the border dotted, and “none” gets rid of the border. Here’s an example:
The final relevant property for borders is “border-radius.” We use this property to determine the border’s roundness. If you want the border to be a circle, set “border-radius” to 50%. You can give other percentage values to this property that range from 0 to 100, or you can give pixel values. This is how you would make a circular-bordered image.
If you want the image to be a perfect circle, you must make sure the width and height properties are equal to each other and then set the “border-radius” to “50%”.
Margin
Margin determines the space between the border and other elements and is often used to separate items from one another. The “margin” property accepts a number of pixels, a percentage of its element’s parent’s width, or a percentage of the view-width or view-height. You can specify the length of all the side’s margins at once like this:
Or you can change each side’s margin individually, like this:
Here’s an example. The children div in this code has no margin and are stacked right on top of each other:
And this is what the children look like with margin (they have pushed away from each other and are now separated):
The last thing about margins is that it is often used to horizontally center an element within its parent. You do this by setting the margin to ”0 auto”. Here’s an example:
Outline
There is one more thing we should talk about in this section that isn’t technically part of the box model, but it makes sense to talk about it here. That thing is the outline.
Outlines take up no space and exist outside of the border. You can give an outline width, style, and color just like you would give a border.
Display
The display property determines how your element is displayed. There are several options available to you.
Setting the “display” property to “none” completely hides the element. It’s like it doesn’t even exist since it takes up no space.
Inline
Setting “display” to inline gets rid of the element’s default margin and makes the margin width 0. Neighboring inline items will fit side by side in a line (hence the name inline). You can still make inline elements have margin by specifying the margin after you’ve changed the display property. Inline displays also are unaffected by the width and height properties. So setting the elements’ widths to 100 px doesn’t change the elements’ size, as showcased in this example:
Image and Span elements by default have an inline display. Since you almost always want your website’s text to remain inline, you will often wrap text within the span element, give the span element some id, and then reference that “id” in a selector to style the text. That way you can style portions of your website’s text without that portion jumping to a new line. That could happen if you use the div element instead of nav to wrap the text.
Block
Setting an element’s “display” to “block” makes the element, by default, take up 100% of its parent’s width. You still have control over the height and width of the element, however.
If you do not specify the height and width, and the element is unable to take up 100% of its parent’s width, it takes up as much as it can. Otherwise, it will take up 100%.
Neighboring block elements go on separate lines.
A “block” display is the default for form elements, div elements, section elements, and header elements. For that reason, you should wrap elements inside of div or section elements when you want them to appear on new lines and not be inline next to each other.
Inline-Block
There is a hybrid between “inline” displays and “block” displays, called “inline-block”.
Setting an element’s “display” to “inline-block” lets you control the width and height of the element while still having the element be with other “inline” elements on the same line.
Next, we have “flex” displays. Setting an element’s “display” to “flex” turns that element’s box into a flexbox and puts the element’s children in either a row or a column.
Flexboxes give greater control over where child elements are placed in a parent element.
The first step is to, of course, set the “display” in the parent element to “flex”. Then you should specify which direction the flex should go. The “flex-direction” property takes either “row”, “row-reverse”, “column” or “column-reverse” as values. The default direction is “row”.
The row options treat the parent like a row and give you greater control over the placement of child elements in the horizontal direction.
And the column options treat the parent like a column and give you greater control over the placement of child elements in the vertical direction.
The reverse options look at the order of the children from top to bottom and left to right in the HTML code and reverse the children’s order upon display in either a row or a column.
Enabling flexbox opens up two properties: “justify-context” and “align-items” which have different functions depending on whether you chose a row direction or a column direction. “Justify-context” controls the element’s positioning along the main-axis and “align-items” controls the element’s positioning along the cross-axis.
A row’s main-axis is the horizontal direction and a row’s cross-axis is the vertical direction. It’s pretty much the opposite for columns. A column’s main-axis is the vertical direction and a column’s cross-axis is the horizontal direction.
Here are possible values for justify-context, which controls the main-axis alignment:
- Flex-start: Moves the children to the beginning of the row or column. This is the default value of justify-context.
- Flex-end: Moves the children to the end of the row or column.
- Center: Centers the children in the middle of the row or column.
- Space-between: Shoves the two outer children to the edges of the row or column and spreads the empty space between the children.
- Space-around: Spreads the children apart from each other in a row or column so that the distances between them are equal to each other and the distance before the first and after the last child is half as large as each of the spaces in the middle.
- Space-evenly: The space between the children in a row or column, as well as space before the first child and after the last child, are all equal to each other.
Here are the possible values for align-items, which controls the cross-axis alignment:
- Flex-start: Moves all the children to the beginning of the row or column. This is the default-value of align-items.
- Flex-end: Moves all the children to the end of the row or column.
- Center: Centers the children in the middle of the row or column.
- Stretch: Stretches the children to cover the entire cross-axis if the children were given no width or height.
- Baseline: Aligns the children near an imaginary line where the cross axis starts.
To further exemplify these concepts, I will show you a base HTML code and will list the resulting website display for each possible value of justify-context and align-items, combining them into three examples so as to save time and space.
Flex- start, for both justify-content and align-items, is the default value and would look like the examples of “flex-direction: row” and “flex-direction: column” presented above. Therefore, flex-start needs no further explanation.
We will take a closer look at flex-end, however. Setting justify-content and align-items to flex-end makes the children move towards the end of the row, and to the bottom of the column.
Centering the children in the middle of the parent can be achieved by setting justify-content and align-items to the value “center”, like this:
Setting align-items to “stretch”, as explained above, stretches the children to cover the entire cross-axis if no length was established for the cross-axis direction. Also, this example showcases the value “space-around” for justify-content which spreads out the space between the children with half the distance of each inside empty space going before the first of the children and after the last of the children. It looks like this:
Here is an example with justify-content set to “space-between” and align-items set to “baseline”.
Remember, “space-between” pushes the first and last child to the far edges of the main axis and equalizes the space between the children. And baseline places the children along the cross-axis.
For the last example, we will switch to a flex-direction of “column”. There are no more align-items values left to cover so this example will use “center” for align-items. It will also use “space-evenly” for justify-content, the last value left to be covered which equalizes the lengths of the spaces before, between, and after the children.
If the children of a flexbox, or if the children of any element are too big to fit in the row or column, you can set the “flex-wrap” property to either “nowrap” or “wrap.”
The value “nowrap” makes overflowing items get smaller until they fit in the row or column.
Or you can set it to “wrap” which wraps the overflowing items to the next line.
The other alternative to deal with overflowing items is to use the property “overflow” and set it to “hidden” or “scroll”. You don’t have to have a flex-box to use the “overflow” property.
So, to explain, here is an overflowing div element that goes beyond its parent element’s width and height:
If you set overflow to “hidden”, the child element is contained to the parent’s width and height:
And if you set overflow to “scroll”, it looks like this:
Order
Finally, you can specify the order of a flexbox’s children using the “order” property in each child. Just set this property’s value to an integer. The order will go from least to greatest.
Here is a code example of three children without being ordered:
And here they are with the “order” property:
Position
The “position” property controls the position of your selected element. These are your options for the “position” property’s values: “static”, “relative”, “absolute”, “fixed”, and “grid”.
Static
“Static” is the “position” property’s default value. By default, the browser just does what it does and follows something called the “normal flow.”
Setting the position property to “relative”, “absolute”, or “fixed”, unlocks additional properties of “top”, “right”, “bottom”, “left” that can help you position elements on the screen.
But when “position” is set to “static”, using these additional properties changes nothing. This is what you would code, to make an element take on the default positioning.
Relative
Setting an element’s “position” property to “relative” doesn’t immediately change the element’s position in the normal flow. But it does unlock the previously mentioned properties of “top”, “right”, “bottom”, and “left”. Now you can give positive and negative distance measurements (numbers of pixels, percentage of the view-width, or view-height) to move the element around.
Here are the functions of the four positioning properties:
Top: Positive values move the element below its default/static positioning. Negative values move the element above its static positioning.
Bottom: Positive values move the element up from its static positioning. Negative values move the element down.
Left: Positive values move the element to the right of its static positioning. Negative values move the element to the left of its static positioning.
Right: Positive values move the element to the left of its static positioning. Negative values move the element to the right of its static positioning.
Here is an example that moves the element fifty pixels to the right of its static positioning and one hundred pixels down.
Relative positions do not cause changes in any other element’s position (it does not move non-selected elements around).
Absolute
“Absolute” positioning removes the element from the normal flow and the browser positions the other elements as if the absolutely positioned element was not there.
If you just set the “position” property to “absolute”, however, it will remain in its static positioning. Like this:
With absolutely positioned elements, you won’t want the element positioned where the browser first loads it. The unlocked properties “top”, “left”, “bottom”, and “right” can be used to space the element away from each edge of the screen and must be assigned values to make absolutely positioned elements actually change their positions. Here is what each of the unlocked values does:
Top: Positive values distance the element away from the top of the screen. Negative values distance the element above the top of the screen.
Bottom: Positive values distance the element away from the bottom of the screen. Negative values move the element down below the bottom of the screen.
Left: Positive values move the element to the right of the left side of the screen. Negative values move the element to the left of the left side of the screen.
Right: Positive values move the element to the left away from the right side of the screen. Negative values move the element to the right of the right side of the screen.
What follows is an example that showcases many of the above concepts for absolute positioning.
The last point for absolute positioning is that absolutely positioned elements will be positioned after relatively positioned elements if they are not given a top or bottom value. Keep this in mind if you run into problems down the line with absolute positioning.
Fixed
When you position your elements to be “fixed” it makes them similar to absolutely positioned elements in that they are taken out of the normal flow, however, the difference is that fixed positioned elements cannot be scrolled. The properties left, right, top, and bottom all work the same as with absolute positioning. Fixed positioning is often used for navigation bars at the top or bottom of your website.
As you can see with this example, regardless of where we scroll to on the webpage, the fixed element stays in the same position:
Positioning Tips
Here are a few quick tips for positioning. If you want the element to be positioned all the way to one side of the screen, whether it’s the top, bottom, right, or left side, do something like this (the element’s positioning must not be static):
Here’s an example:
Another tip is that if you want to quickly center an element horizontally within its parent, you can do this in the HTML code by wrapping that element in a “center” element, like this:
Z-Index
The property “z-index” is used to bring items forward (on top of other elements) or backward (behind other elements).
Assign an integer to the “z-index” property. When there is an overlap between elements, the element with the greater z-index appears in front.
There is one more display type that I have waited to explain because it entails a completely different way of positioning elements, a grid system. To use a grid, set the parent element’s “display” property to “grid”.
Column and Row Size
Next, you should specify the number and size of the columns, as well as the number and size of the rows. This is achieved with the properties “grid-template-columns” and “grid-template-rows”. These properties take at least one distance value that is typically a number of pixels or percentages of the view-width or view-height.
I will show the various CSS properties that should be given values for the grid to work. Then, toward the end of the Grid section, there will be a large example. Here is the first CSS example:
The above code makes four columns with widths of 200 pixels each. It also makes four rows with different heights.
When specifying column widths or row heights you may use the distance value (“fr”). Rows with their height set to “fr” get their height from the amount of free space remaining in the parent. So the first row in the above example gets a height of 2/3 of the remaining free space of the parent’s height that hasn’t been taken up by the other rows. The parent’s height is 500 pixels and the two rows take up a total of 200 pixels. 300 pixels are remaining so the first row gets a height of 200 pixels and the last row gets a height of 100 pixels.
Space Between Columns and Rows
You can put space between the columns or rows with the property “grid-column-gap” or “grid-row-gap”. The distance value determines the width of the space for “grid-column-gap” and the height of the space for “grid-row-gap”.
You can also change both gaps at once with the “grid-gap” property.
Each of the following grid properties goes in the children of the parent element we used to create the grid.
Grid-Column and Grid-Row
You can use the “grid-column” property to say how many columns that item will span. Likewise, you can use the “grid-row” property to say how many rows that item will span. Here’s an example:
The above code makes the item take up the first three columns and the first two rows. 1 represents the first line of the grid from either the top or left (for “grid-row” or “grid-column” respectively). The 4 means the fourth line from the left. And the 3 means the third line from the top. So 1 to 4 covers the first three spaces, and 1 to 3 covers the first two.
Grid Template Areas
Another to assign children to different parts of the grid is with grid template areas.
The first step is to create the areas using the property “grid-template-areas” in the parent element. The following code creates three rows and three columns:
The “heading” area spans the first three columns in row 1. The “.” is used to indicate an empty area. The “first_centered” area is in the middle of the second row. And the “second_centered” area is in the middle of the third row.
Essentially, we are naming areas of the grid to which we will assign the items. Then, to assign an item, target the item with a selector and then use the “grid-area” property giving it the value of the grid area’s name without quotation marks, like this:
You can change all the grid items’ positioning within their grid areas at once using the “justify-items” property or the “align-items” property in the grid parent.
Or, you can change the positioning of each child one at a time using “justify-self” or “align-self” properties on the child.
The “justify-self” property controls the child’s position along the horizontal axis and the “align” property controls the child’s position along the vertical axis.
“Justify-self” and “align-self” takes the possible values of “stretch”, “center”, “start”, or “end”.
“Stretch” stretches the child to span the entire axis within its grid area.
“Center” moves the child to the center of the axis within its grid area.
“Start” moves the child to the start of the axis within its grid area.
“End” moves the child to the end of the axis within its grid area.
Okay, now it’s time for the big grid example that combines a lot of the properties into a complex grid layout. It’s not the prettiest example, but it gets the job done.
I encourage you to try and make sense of it on your own with the help of the above explanations.
Transitions
Transitions are often used on hovers or when new information appears or disappears. Transitions transition properties from one value to another. For example, we could transition the colors, or change the opacity.
If we wanted to change the background color of a button when we hover over it, we would target that button, use the property “transition”, and give it a value that follows the form “property duration function”.
You must first assign an original value to a property. Then create the transition using the transition property, and finally specify, when a hover happens, what the background color should transition into.
“1s” means that the transition will take one second to finish.
“Linear” is an example of a function that determines the transition’s rate of change. There are other functions, but linear is the easiest to understand because it makes the transition have a constant rate of change.
You can even give multiple transitions in the same transition value, like this:
Animations
Animations are used more often than transitions for more complicated transitions because they make it easier to transition a property between more than two values.
To create an animation, use the “animation-name” and “animation-duration” property in the animated element’s declaration. Set “animation-name” to whatever you want to call the animation and set “animation-duration” to the number of seconds you want the animation to take (like 3s). Also, you have to make sure that the property you are animating is assigned a value in the original CSS styling statement. Otherwise, the animation will not work.
The next step is to add the keyframes which detail how your animation will transition. It looks like this.
The above code only runs the animation once when the page loads. It transitions from a yellow background to an orange background at the halfway point, and finally to a red background, and then to the original yellow background color.
You can make the animation keep the last animated property value after the animation finishes by setting the “animation-fill-mode” property to “forwards”. Here is an example that puts this concept into practice:
There is one more important concept for animations. The animation can run more than once if you use the “animation-iteration-count” property. This property can take a positive int or “infinite”. The number you include determines the number of times the animation will run. “Infinite” means the animation is continuous and never stops.
Responsive Design
It’s an expectation nowadays that websites should be mobile, tablet, and desktop friendly and for that, you need responsive design. Standard CSS uses a mobile-first design where we design first for smartphone users and as our code is written we test for the screen size and make changes to the style when the screen width or height exceeds a limit.
To test screen widths, we use media queries.
Let’s say our website’s background should be colored blue on a phone, green on a tablet, and stay green on a desktop. We might do something like this:
If you are able, try to make the browser window change sizes to see how this page is responsive. When the screen width is below 500px, it looks like this:
And when the screen width is above 500 pixels, it looks like this:
Conclusion
Way to go! Seriously! If you made it to the end, you have now gotten a basic understanding of CSS and have been exposed to all of the fundamentals.
My advice is to work on some personal projects that utilize these concepts. Doing so will help these concepts become second nature to you and you might even learn something new as well.
Or, you can move onto more complicated programming subjects like JavaScript to build on your newly acquired base knowledge. The JavaScript course is coming soon.
Regardless of what you do, I hope this article has helped advance you along your programming journey.
Тег <style> в html
В третьем уроке HTML мы рассмотрели все самые распространенные html теги. К каждому из них можно было также подставить параметр style и мы постоянно ссылались на это. Настало время поговорить о том, что именно можно прописать в этом параметре, но для начала расскажу о теге <style> . Вообще для чего он нужен и почему так важен.
Синтаксис тега <style>
Между <style> и </style> прописываются стили, а точнее свойства CSS (размер шрифта, цвет, фон, отступы, шрифт и т.п.). Это написание равносильно таблице стилей CSS . Кстати описывать стиль можно в любом месте на странице, т.е. необязательно это делать в заголовочных тегах head, но по хорошему тону, стили располагаются именно там.
Новый стиль любого класса описываются в формате точка, далее название класса, а в фигурных скобках описывается стиль. Синтаксис следующий:
В таком формате мы создаем глобальный стиль, который можно использовать в любом теге.
Чтобы сделать стиль только для какого тега нужно указать его перед точкой:
Это означает, что мы можем применять его только для тега <b>
Кстати, чтобы не прописывать всегда класс ( class=»» ) часто употребляемым тегам, мы можем задать стиль по умолчанию любому тегу. Например, чаще всего для популярного тега <p> задается стиль по умолчанию следующим образом:
Рассмотрим практичный пример с <style>
Например . Html код:
Преобразуется на странице в следующее:
Обратите внимание, что в class мы указали styletest — потому что именно так называется наш стиль. Поскольку в style мы не указали конкретно для какого тега он сделан, то мы может применять его не только для тегов <font> , но и для других. Например, для <b> , <u> и т.д. — для всех тегов, которые поддерживают параметр class.
Выше разобранный пример можно сделать по-другому (не используя class):
Результат будет таким же как и предыдущий пример.
В чем же тогда разница? Давайте проведем сравнение. Допустим, у Вас есть на сайте 50 страниц (это считается маленьким сайтом). На всех 50 страницах у Вас для какого-то текста в тегах прописано style vhtml»>color: blue; font-size:12px; font-family:Arial «. Теперь представим такую ситуацию, что синий цвет Вам больше не по душе и Вы захотели сменить его на черный. В этом случае Вам нужно будет редактировать 50 страниц. Но 50 страниц это ещё не так уж и много. Тем не менее это все равно лишняя работа, которую можно было не делать. Поэтому я советую пользоваться классами ( class vhtml»>какой-то класс «). В этом случае Вам бы пришлось поменять всего лишь в одном месте цвет и на всех страницах бы все поменялось.
Задание стилей для вложенных тегов
Если мы используем вложенные конструкции (иерархию тегов), то стиль нужно задавать напрямую. Например:
Например, .cen a говорит о том, что этот стиль будет использован только в блоке с классом cen. В нашем примере мы подразумеваем этот блок тегом <div>. Чаще всего такие конструкции встречаются именно для дивов.
Таблица стилей CSS
Чтобы упростить работу со стилями, создают специальную «таблицу стилей CSS«, которая представляет из себя просто сборник стилей. Подключается она с помощью тега link в теге head
В данном случае таблица стилей (назовем её style.css ) должна содержать следующее:
Теперь вернемся к первому примеру, который можно сделать более универсально, подключив в заголовке таблицу стилей.
Надеюсь, что Вы поняли всю прелесть таблиц стилей. Стиль нужно написать только в таблице стилей .css , а там где нужно его применить писать class=»имя стиля» .
Плюсы при использовании таблицы стилей
- Файлы .css можно сжимать и кэшировать, за счет этого страница грузится быстрее
- Стиль прописывается в одном месте, а значит его легко изменить. Представьте, как сложно было бы менять стиль на каждой странице при любой небольшой правке
- Это позволяет уменьшить html код и является правильным тоном. На странице должен быть контент, а не описание стилей.
Использование стилей html через ID
Теперь рассмотрим как можно использовать стили через ID . Для начала, необходимо в таблице стилей (назовем её primerid.css ) написать следующее:
Обратите внимание, что сначала пишется название тега, далее # , далее название ID и потом аргументы стиля.
Для использования ID, код html страницы должен содержать примерно следующее:
Вместо параметра class нужно написать id, в остальном все также. Также можно использовать и вложенные конструкции. Как правило, id не используют для описание стилей.
Теперь расскажу о том, какие аргументы можно задавать в стилях. Их довольно много.
Аргументы и свойства в style
1. Свойство background: цвет — задает цвет фона. Цвет можно выбрать любым. Цвет может быть задан в виде шестизначного кода (например, #53A32B; ) или конкретное название цвета (например, red ). Выбрать подходящий цвет можно на странице: коды и названия html цветов.
Аналогом является: background-color: цвет .
Более подробно про фон читайте в отдельной статье: как сделать фон для сайта.
2. Свойство background-image: url(‘images/bg.png’); — фоном будет картинка. В скобках указывается адрес фона изображения.
3. Свойство background-repeat: repeat — использовать фоновую картинку многократно. Другие возможные параметры:
- repeat-x — повторять фоновое изображение только по горизонтали
- repeat-y — повторять фоновое изображение только по вертикали
- no-repeat — не повторять фоновое изображение
4. Свойство border: 1px solid red; — вся область объекта будет в красной рамке, ширина которой 1 пиксель. Возможны и другие параметры вместо solid:
- dotted — рамка будет покрыта не сплошной линией, а точками
- dashed — рамка будет покрыта тире, пробел, тире и т.д.
- double — двойная рамка
- groove — рифлёная 3D граница
Цвет и размер области рамки можно изменять. Цвет можно задавать в формате #XXXXXX или писать название цвета. Выбрать цвет можно на странице коды и названия html цветов
Рамку можно задавать избирательно, т.е. только с тех сторон, где это нужно:
- border-bottom: 1px solid red; — линия будет только снизу
- border-top: 1px solid red; — линия будет только сверху
- border-right: 1px solid red; — линия будет только справа
- border-left: 1px solid red; — линия будет слева
Можно совмещать эти параметры, т.е. сделать линию только слева и снизу. Более подробно про задание границ читайте в специальной статье: свойство css border
5. Свойство color: #fc0ab1; — задает цвет текста. Цвет можно выбрать любым. С этим аргументом Вы уже были знакомы.
6. Свойство font-family: value; — задает шрифт текста. Существует очень много различных шрифтов. Например, самые распространенные шрифты:
- Verdana (я пользуюсь этим шрифтом)
- Times New Roman
- Arial
- Courier New
- Comic Sans MS
- Georgia
- Impact
Более подробно про шрифты и их выбор читайте в статьях:
7. Свойство font-size: 15px; — задает размер текса, в данном случае 15px. Можете вместо px так же писать другие единицы размерности: em и om .
8. Свойство font-weight: value; — задает толщину текста (насыщенность). Возможные значения:
- bold — полужирное
- bolder — жирное
- lighter — светлое
- normal — обычный
Можно толщину задавать цифрами: 100, 200, 300, 400, 500, 600, 700, 800, 900. Более подробно читайте в статье: свойство CSS font-weight
9. Свойство height: 100%; — задает высоту. Можно задавать в %, а можно в пикселях (px). Например: height: 100px .
10. Свойство padding-top: 5px; — отступ сверху. Возможно задать значение auto . Аналогичный тег: margin-top с разницей, что padding — отступ внутри элемента, а margin — от других элементов.
11. Свойство padding-right: 4px; — отступ справа. Возможно задать значение auto . Аналогичный тег: margin-right.
12. Свойство padding-bottom: 5px; — отступ снизу. Возможно задать значение auto . Аналогичный тег: margin-bottom.
13. Свойство padding-left: 4px; — отступ слева. Возможно задать значение auto . Аналогичный тег: margin-left.
14. Свойство width: 100%; — задает ширину. Можно задавать в %, а можно в пикселях (px).
15. Свойство overflow: value; — область видимости содержания блочного элемента, которое не помещается в нем. Возможные значения параметра:
- visible — отображается все содержание элемента, даже за пределами установленной высоты и ширины
- hidden — отображается только область внутри элемента, остальное будет обрезано
- scroll — всегда добавляются полосы прокрутки
- auto — полосы прокрутки добавляются только при необходимости
Более подробно читайте в статье: свойство CSS overflow
16. Свойство text-align: value; — выравнивание текста. Возможные значения параметра:
- left — по левому краю
- right — по правому краю
- center — по центру
- justify — выравнивание по левому и правому краю
- auto — автоматически
- inherit — наследование значения предка
Более подобно читайте в статье свойство CSS text-align
17. Свойство float: value; — определяет сторону, по которой будет выравниваться какой-то элемент, а остальные элементы будут обтекать его с других сторон. Возможные значения параметра:
- left — по левому краю
- right — по правому краю
- none — отсутствует
- inherit — наследование значения предка
18. Свойство line-height: 22px; — устанавливает межстрочный интервал в пикселях. Более подробно про растояние между строками читайте в статье свойство CSS line-height
19. Свойство white-space: value; — задает отображение между пробелами. Возможные значения:
- normal — обычное значение
- nowrap — пробелы не учитываются, переносы строк в коде HTML игнорируются
- pre — текст показывается с учетом всех пробелов и переносов, в случае длинной строки будет добавлена полоса прокрутки
- pre-line — пробелы не учитываются, текст автоматически переносится на следующую строку
- pre-wrap — сохраняются все пробелы и переносы, автопереход на следующую строку
- inherit — наследование значения предка
Более подробно читайте в статье: свойство CSS white-space
20. Свойство display: value; — определяет способ показа элемента. Имеет довольно много параметров:
- block — элемент показывается как блочный
- inline — элемент отображается как встроенный
- inline-block — создает блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу
- inline-table — элемент является таблицей
- list-item — элемент выводится как блочный и добавляется маркер списка
- none — временно удаляет элемент из документа. С помощью скриптов можно сделать его появление
- run-in — устанавливает элемент как блочный или встроенный в зависимости от контекста
- table — элемент является блочной таблицей
- table-caption — задает заголовок таблицы подробно
- table-cell — элемент представляет собой ячейку таблицы
- table-column — назначает элемент колонкой таблицы
- table-column-group — элемент является группой одной или более колонок таблицы
- table-footer-group — используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы
- table-header-group — элемент предназначен для хранения одной или нескольких строк ячеек
- table-row — элемент отображается как строка таблицы
- table-row-group — создает структурный блок, состоящий из нескольких строк таблицы
Более подробно читайте в статье: свойство CSS display
21. Свойство text-decoration: value; — опция для редактирования внешнего вида текста. Имеет несколько параметров:
- blink — мигающий текст
- line-through — перечеркнутый текст
- overline — верхнее подчеркивание текста
- underline — нижние подчеркивание текста
- none — выводит обычный текст
- inherit — наследуется у предка
Более подробно читайте в статье: свойство CSS text-decoration
22. Свойство text-transform: capitalize; — преобразование текста в заглавные или прописные буквы.
- capitalize — первый символ каждого слова в предложении будет заглавным
- lowercase — перевод всего текста в нижний регистр
- uppercase — перевод всего текста в верхний регистр
- none — не менять ничего
- inherit — наследование предка
Более подробно читайте в статье: свойство CSS text-transform
23. Свойство letter-spacing: 2px; — задает расстояние между буквами. Более подробно читайте в статье: свойство CSS letter-spacing
Так же стоит обратить внимание на возможности стилей для тега <a> , но они будут рассмотрены отдельно здесь: HTML тег а.
Уважаемый читатель, теперь Вы имеете представление о стилях в html. Вы можете делать Ваши странички более красивыми. Рассмотренные выше возможности стилей являются поверхностными и для профессионального использования Вам понадобятся более глубокие знания. В следующих уроках мы рассмотрим самые важные из этих тегов во всех подробностях. Теперь советую перейти к следующему уроку.