CSS
Note: Understanding HTML is essential to understanding CSS. If you do not have some knowledge about HTML or did not read the HTML page of this site, I would recommend doing so before starting CSS. This page won't make any sense without some basic understanding of HTML.
What is CSS?
CSS stands for Cascading Style Sheet. Similar to how HTML tells a browser what each element on a page is and how it should function, CSS tells the browser how each element is meant to be displayed. CSS affects the presentation and layout of a web page, meaning you can control things such as the color of individual elements and the position of each element on the page. Remember how I mentioned that tags create boxes around written content? CSS has the ability to make that box blue and lean slightly left.
When people thinking of creating web pages and working with web design, what they're really thinking about is creating Cascading Style Sheets. Arguably, it's where the real fun of web design kicks in, but it involves just as much effort as writing HTML.
Style sheets, selectors, and declarations
CSS can added to HTML in three ways: external style sheet, internal style sheet, and inline style. Many web authors use external sheets, and for good reason. Internal style sheets can be applied to one page, and though it appears to be easier to combine both HTML and CSS into one document, it ends up making the entire document something of a mess. Inline styles further muddies code in that it is written within each line HTML as well. External style sheets keep CSS limited to a single page, away from the HTML, making organization that much easier, especially if any errors crop up. One thing coders stress is organization, so sticking with external sheets, even if it's for a single web page, is the best idea. Creating a style sheet is as easy as going into Notepad or Notepad++, creating a new document, and saving it as a CSS file.
Writing CSS involves choosing a selector and choosing a declaration. This is mostly just parlance for choosing an element to apply styles to, then choosing what styles you want to apply. The selector is the HTML element you wish to alter, affecting it's display in a web browser. It can be a paragraph, a header, or a link - you can apply rules to any element. The declaration is the actual CSS rule. This can be choosing a color, a size, and many other styles.
In the above image, the selector is h1, or the level 1 header tag. Following this are two declarations: one changes the font color to blue, and the other changes the font size to 12 pixels. As illustrated by the image, the tag is written first, followed by the two declarations, both ending with semicolons, enclosed within curly braces. This how any CSS rule is written.
Basic CSS
Again, a visual demonstration is probably the best way to learn actual web design. Let's take the HTML written earlier and apply the CSS rules we just covered. Compare the three images below.
In the above images, we still have our 'Hello World' and 'Welcome to my first page' elements present. Except this time they have been altered by the CSS in the adjacent image. This has resulted in the CSS rules being applied to the HTML, present in the last image.
Only a few rules are shown here. You can apply borders, adjust the size and spacing, and plenty other things. Try researching more rules on your own!
