Learn about html and css

Learn in an interactive environment.
Read short lessons, take notes, and complete challenges directly in your browser.

Anonymous cookies are used to improve the quality of the course.

It’s time to learn
HTML CSS with
proper semantics & accessibility.

Learn HTML CSS from scratch, and practice in an intuitive environment. Throughout this course, you will learn about semantics and accessibility.

You will read short lessons, and solve challenges and projects, one step at a time. Try the first 50 lessons, challenges & flashcards for free. You can upgrade to a Pro account with a one-time payment that gives you access for 5 years.

Learn HTML CSS is suitable for beginners who are getting started and experienced developers who want to learn HTML CSS the proper way.

What you will learn

This course covers HTML and CSS from scratch. While you can get a result on the screen easily with HTML and CSS, it’s important to have proper semantics and accessibility.

We’ve got a unique approach as we like to explain the concepts step by step so that you can fully understand how it works.

The lessons & challenges will guide you through these topics step by step:

• Accessibility
• Semantics
• Headings
• Meta tags
• Semantic elements
• Non-semantic elements
• HTML Validation
• Left to right direction
• Horizontal writing mode
• Landmarks
• Reader mode
• DevTools (Inspect)
• Images
• Fonts
• Units
• Responsiveness
• Box models
• Selectors
• Collapsing margins
• CSS (axis) Shorthands
• Anchors
• UI Kit
• Color accessibility
• Custom Properties
• Flex
• Grid
• Positioning
• Forms
• Variable fonts
• Stacking contexts
• Container queries
• Scroll Snap
• Responsive utilities
• Much more.

Semantic and responsive portfolio page for a typical web developer. It’s in dark mode by default and supports light mode.

A 7-page mobile web app. The web app is static, thus uses no API. It focuses on mobile best practices.

Real-life projects

To apply your acquired knowledge, we have 2 projects for you. These 2 projects are revisited throughout the course, helping you apply your newly acquired knowledge.

Once you complete the course, you will be able to use these projects for your own (non-educational) work.

HTML CSS flashcards

This course is designed with the learner in mind. That’s why we’ve developed a separate flashcards app where you can reinforce the new concepts that you learned using spaced repetition.

Spaced repetition has been proven to be a more effective learning method.

What people are
saying

Todd 🦞

This is what I’ve been talking about for a couple weeks now. This kind of education is sorely needed in development.

Brian Hinton 🐧

I’ve been coding and for 20+ years, and I still am learning little bits from @JoubranJad’s #learnhtmlcss course. A good reminder that we all forget basic things over the years, and should never stop learning.

About the
instructor

Jad Joubran is a Google Developer Expert, Microsoft Most Valuable Professional (2019-2022), and Freelance Web Performance Consultant based in Amsterdam.

His passion for JavaScript led him to create and develop the most interactive, step by step courses for JavaScript, React, Programming basics, and HTML CSS.

Why Learn HTML CSS through this course?

Lessons

• Read concise lessons
• Save notes in lessons
• Export & print your notes
• Read a recap of topics learned
• Suggested popular highlights
• Read a recap of every lesson

Practice

• Practice directly in the browser
• Solve interactive challenges
• Test-driven environment
• Solve real-world projects
• Continue on your phone
• Compare with official solution

Flashcards

• Keep your memory fresh
• Learn on the go
• Benefit from spaced repetition
• Review per chapter
• Maintain your progress streak
• 200+ flashcards

Modern
Pricing

Generous free trial

Try the first 50 lessons, challenges, projects (first 15 chapters) & flashcards for free. No time limit.
The remaining chapters require a PRO account.

One-time payment

We do not like subscriptions. This is why Learn HTML CSS PRO can be unlocked for a single payment that gives you access for 5 years.
Check out the payment page. We recommend that you complete the free trial before upgrading.

The easiest way to learn semantic and accessible HTML CSS step by step

Join more than 125,000 learners.

Other courses

Learn Programming

The easiest way to learn Programming concepts for absolute beginners step by step.

Learn JavaScript

The easiest way to learn & practice modern JavaScript step by step

React Tutorial

The easiest way to learn React (hooks). Understand how React works not just how to build with React.

Источник

HTML Styles — CSS

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS = Styles and Colors

What is CSS?

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

Tip: The word cascading means that a style applied to a parent element will also apply to all children elements within the parent. So, if you set the color of the body text to «blue», all headings, paragraphs, and other text elements within the body will also get the same color (unless you specify something else)!

Using CSS

CSS can be added to HTML documents in 3 ways:

• Inline — by using the style attribute inside HTML elements
• Internal — by using a element in the section
• External — by using a element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the element to blue, and the text color of the

element to red:

Example

A Blue Heading

Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the section of an HTML page, within a element.

The following example sets the text color of ALL the elements (on that page) to blue, and the text color of ALL the

elements to red. In addition, the page will be displayed with a «powderblue» background color:

Example

This is a heading

This is a paragraph.

External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the section of each HTML page:

Example

This is a heading

This is a paragraph.

The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

Here is what the «styles.css» file looks like:

«styles.css»:

Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!

CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example

Use of CSS color, font-family and font-size properties:

This is a heading

This is a paragraph.

CSS Border

The CSS border property defines a border around an HTML element.

Tip: You can define a border for nearly all HTML elements.

Example

Use of CSS border property:

CSS Padding

The CSS padding property defines a padding (space) between the text and the border.

Example

Use of CSS border and padding properties:

CSS Margin

The CSS margin property defines a margin (space) outside the border.

Example

Use of CSS border and margin properties:

Link to External CSS

External style sheets can be referenced with a full URL or with a path relative to the current web page.

Example

This example uses a full URL to link to a style sheet:

Example

This example links to a style sheet located in the html folder on the current web site:

Example

This example links to a style sheet located in the same folder as the current page:

You can read more about file paths in the chapter HTML File Paths.

Chapter Summary

• Use the HTML style attribute for inline styling
• Use the HTML element to define internal CSS
• Use the HTML element to refer to an external CSS file
• Use the HTML element to store and elements
• Use the CSS color property for text colors
• Use the CSS font-family property for text fonts
• Use the CSS font-size property for text sizes
• Use the CSS border property for borders
• Use the CSS padding property for space inside the border
• Use the CSS margin property for space outside the border

Tip: You can learn much more about CSS in our CSS Tutorial.

HTML Exercises

HTML Style Tags

Tag	Description
	Defines style information for an HTML document
	Defines a link between a document and an external resource

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник

W3Schools Spaces

Learn More

My Learning

Track your progress with our free «My Learning» program.

Log in to your account, and start earning points!

Become a PRO User

And unlock powerful features:

• Browse W3Schools without ads
• Website hosting (Includes Spaces PRO)
• Access to our HTML Video Tutorial

Color Picker

W3Schools’ famous color picker:

Code Game

Help the Lynx collect pine cones!

Exercises and Quizzes

Test your skills!

Web Templates

Browse our selection of free responsive HTML Templates

Kickstart your career

Get certified by completing a course

How To Section

Code snippets for HTML, CSS and JavaScript

For example, how to create a slideshow:

Follow us:

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.

Источник