<commit_before>{% extends "landing/base_learn.html" %}

{% block pageid %}learn-css{% endblock %}

{% block title %}{{ page_title(_('Learn CSS')) }}{% endblock %}

{% block content %}
<header id="page-head">
  <div class="wrap">
    <nav class="crumb"><a href="{{ url('learn') }}">{{ _('Back to Home') }}</a></nav>
    <h1 class="page-title">{{ _('Learn CSS') }}</h1>
    {% trans %}
    <p class="intro">CSS (<strong>Cascading Style Sheets</strong>) is a language for describing the appearance of web pages. 
    To create good-looking web pages, you need to learn CSS in order to define the appearance and location of 
    the HTML elements within the pages.</p>
    <p>The links on this page lead to a variety of CSS tutorials and CSS training materials. Whether you are 
    just starting out, learning the basics of CSS, or are an experienced web developer wanting to learn 
    <strong>CSS3</strong> (the newest version of the standard) and CSS best practices, you can find helpful 
    resources here.</p>
    {% endtrans %}
  </div>
</header>
  
<section id="content">
<div class="wrap">

  <section id="content-main" class="full" role="main">
    <div id="intro-level" class="learn-module boxed">
      <h2>{{ _('Introductory Level') }}</h2>
      <ul class="link-list">
        <li>
          <h3 class="title"><a href="{{ devmo_url('CSS/Getting_Started') }}">{{ _('CSS Getting Started') }}</a></h3>
          <h4 class="source">MDN</h4>
          <p>{{ _('This tutorial introduces you to Cascading Style Sheets (CSS). It guides you through the basic features of CSS with practical examples that you can try for yourself on your own computer.') }}</p>
        </li>
        <li>
          <h3 class="title"><a href="http://dev.opera.com/articles/view/27-css-basics/" rel="external">{{ _('CSS Basics') }}</a></h3> 
          <h4 class="source">Dev.Opera</h4>
          <p>{{ _('What CSS is, how to apply it to HTML, and what basic CSS syntax looks like.') }}</p>
        </li>
        <li>
          <h3 class="title"><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external">{{ _('CSS Selector Classes') }}</a></h3>
          <h4 class="source">Wikiversity</h4>
          <p>{{ _('What are classes in CSS?') }}</p>
        </li>
        <li>
          <h3 class="title"><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external">{{ _('External CSS') }}</a></h3>
          <h4 class="source">Wikiversity</h4>
          <p>{{ _('Using CSS from an external style sheet.') }}</p>
        </li>
        <li>
          <h3 class="title"><a href="http://www.w3.org/MarkUp/Guide/Style" rel="external">{{ _('Adding a Touch of Style') }}</a></h3>
          <h4 class="source">W3C</h4>
          <p>{{ _('A brief beginner\'s guide to styling web pages with CSS.') }}</p>
        </li>
        <li>
          <h3 class="title"><a href="http://code.google.com/edu/submissions/html-css-javascript/#css" rel="external">{{ _('CSS From the Ground Up') }}</a></h3>
          <h4 class="source">Google Code University</h4>
          <p>{{ _('Video tutorial on styling pages with CSS.') }}</p>
        </li>
        <li>
          <h3 class="title"><a href="{{ devmo_url('Common_CSS_Questions')}}">{{ _('Common CSS Questions') }}</a></h3>
          <h4 class="source">MDN</h4>
          <p>{{ _('Common questions and answers for beginners.') }}</p>
        </li>
      </ul>
    </div>
    
    <div id="inter-level" class="learn-module boxed">
      <h2>{{ _('Intermediate Level') }}</h2>
      <ul class="link-list">
        <li>
          <h3 class="title"><a href="{{ devmo_url('CSS_Reference')}}">{{ _('CSS Reference') }}</a></h3>
          <h4 class="source">MDN</h4>
          <p>{{ _('Complete reference to CSS, with details on support by Firefox and other browsers.') }}</p>
        </li>
        <li>
          <h3 class="title"><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">{{ _('CSS Challenges') }}</a></h3>
          <h4 class="source">Wikiversity</h4>
          <p>{{ _('Flex your CSS skills, and see where you need more practice.') }}</p>
        </li>
        <li>
          <h3 class="title"><a href="http://www.html.net/tutorials/css/" rel="external">{{ _('Intermediate CSS Concepts') }}</a></h3>
          <h4 class="source">HTML.net</h4>
          <p>{{ _('Grouping, pseudo-classes, and more.') }}</p>
        </li>
        <li>
          <h3 class="title"><a href="http://www.alistapart.com/articles/css-positioning-101/" rel="external">{{ _('CSS Positioning 101') }}</a></h3>
          <h4 class="source">A List Apart</h4>
          <p>{{ _('Using positioning for standards-compliant, table-free layout.') }}</p>
        </li>
        <li>  
          <h3 class="title"><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">{{ _('Progressive Enhancement with CSS') }}</a></h3>
          <h4 class="source">A List Apart</h4>
          <p>{{ _('Integrate progressive enhancement into your web pages with CSS.') }}</p><commit_msg>fix bug 731647 - Update CSS Ref Link<commit_after>{% extends "landing/base_learn.html" %}

{% block pageid %}learn-css{% endblock %}

{% block title %}{{ page_title(_('Learn CSS')) }}{% endblock %}

{% block content %}
<header id="page-head">
  <div class="wrap">
    <nav class="crumb"><a href="{{ url('learn') }}">{{ _('Back to Home') }}</a></nav>
    <h1 class="page-title">{{ _('Learn CSS') }}</h1>
    {% trans %}
    <p class="intro">CSS (<strong>Cascading Style Sheets</strong>) is a language for describing the appearance of web pages. 
    To create good-looking web pages, you need to learn CSS in order to define the appearance and location of 
    the HTML elements within the pages.</p>
    <p>The links on this page lead to a variety of CSS tutorials and CSS training materials. Whether you are 
    just starting out, learning the basics of CSS, or are an experienced web developer wanting to learn 
    <strong>CSS3</strong> (the newest version of the standard) and CSS best practices, you can find helpful 
    resources here.</p>
    {% endtrans %}
  </div>
</header>
  
<section id="content">
<div class="wrap">

  <section id="content-main" class="full" role="main">
    <div id="intro-level" class="learn-module boxed">
      <h2>{{ _('Introductory Level') }}</h2>
      <ul class="link-list">
        <li>
          <h3 class="title"><a href="{{ devmo_url('CSS/Getting_Started') }}">{{ _('CSS Getting Started') }}</a></h3>
          <h4 class="source">MDN</h4>
          <p>{{ _('This tutorial introduces you to Cascading Style Sheets (CSS). It guides you through the basic features of CSS with practical examples that you can try for yourself on your own computer.') }}</p>
        </li>
        <li>
          <h3 class="title"><a href="http://dev.opera.com/articles/view/27-css-basics/" rel="external">{{ _('CSS Basics') }}</a></h3> 
          <h4 class="source">Dev.Opera</h4>
          <p>{{ _('What CSS is, how to apply it to HTML, and what basic CSS syntax looks like.') }}</p>
        </li>
        <li>
          <h3 class="title"><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external">{{ _('CSS Selector Classes') }}</a></h3>
          <h4 class="source">Wikiversity</h4>
          <p>{{ _('What are classes in CSS?') }}</p>
        </li>
        <li>
          <h3 class="title"><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external">{{ _('External CSS') }}</a></h3>
          <h4 class="source">Wikiversity</h4>
          <p>{{ _('Using CSS from an external style sheet.') }}</p>
        </li>
        <li>
          <h3 class="title"><a href="http://www.w3.org/MarkUp/Guide/Style" rel="external">{{ _('Adding a Touch of Style') }}</a></h3>
          <h4 class="source">W3C</h4>
          <p>{{ _('A brief beginner\'s guide to styling web pages with CSS.') }}</p>
        </li>
        <li>
          <h3 class="title"><a href="http://code.google.com/edu/submissions/html-css-javascript/#css" rel="external">{{ _('CSS From the Ground Up') }}</a></h3>
          <h4 class="source">Google Code University</h4>
          <p>{{ _('Video tutorial on styling pages with CSS.') }}</p>
        </li>
        <li>
          <h3 class="title"><a href="{{ devmo_url('Common_CSS_Questions')}}">{{ _('Common CSS Questions') }}</a></h3>
          <h4 class="source">MDN</h4>
          <p>{{ _('Common questions and answers for beginners.') }}</p>
        </li>
      </ul>
    </div>
    
    <div id="inter-level" class="learn-module boxed">
      <h2>{{ _('Intermediate Level') }}</h2>
      <ul class="link-list">
        <li>
          <h3 class="title"><a href="{{ devmo_url('CSS/CSS_Reference')}}">{{ _('CSS Reference') }}</a></h3>
          <h4 class="source">MDN</h4>
          <p>{{ _('Complete reference to CSS, with details on support by Firefox and other browsers.') }}</p>
        </li>
        <li>
          <h3 class="title"><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">{{ _('CSS Challenges') }}</a></h3>
          <h4 class="source">Wikiversity</h4>
          <p>{{ _('Flex your CSS skills, and see where you need more practice.') }}</p>
        </li>
        <li>
          <h3 class="title"><a href="http://www.html.net/tutorials/css/" rel="external">{{ _('Intermediate CSS Concepts') }}</a></h3>
          <h4 class="source">HTML.net</h4>
          <p>{{ _('Grouping, pseudo-classes, and more.') }}</p>
        </li>
        <li>
          <h3 class="title"><a href="http://www.alistapart.com/articles/css-positioning-101/" rel="external">{{ _('CSS Positioning 101') }}</a></h3>
          <h4 class="source">A List Apart</h4>
          <p>{{ _('Using positioning for standards-compliant, table-free layout.') }}</p>
        </li>
        <li>  
          <h3 class="title"><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">{{ _('Progressive Enhancement with CSS') }}</a></h3>
          <h4 class="source">A List Apart</h4>
          <p>{{ _('Integrate progressive enhancement into your web pages with CSS.') }}</p>
{'fraction_non_alphanumeric': 0.19694129255056733, 'fraction_numerical': 0.013418845584607795, 'mean_word_length': 2.8657513348588863, 'pattern_counts': {'":': 0, '<': 303, '<?xml version=': 0, '>': 303, 'https://': 0, 'lorem ipsum': 0, 'www.': 8, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5028492', 'n_tokens_mistral': 3405, 'n_tokens_neox': 3234, 'n_words': 919}