First of all, you must at least understand basic HTML before you can understand CSS. The good part is it is not that hard. You can check out HTML by clicking the HTML button in the menu bar at the top of this page. CSS stands for Cascading Style Sheet and is written inside of an HTML document and is basically used to enhance the 'looks' of your webpage. The <style> element or the 'style' attribute is used to display CSS code and is used to further modify things like the color, font and size of text. The <style> element goes inside the <head> section of your HTML document. The 'style' attribute can go inside an opening tag, such as <p>,<pre>,<h1> and others. Example:
<p style="color:red">I am a red sentence.</p>I am a red sentence.
This is called the 'inline' method of inserting CSS code. There is also the internal method, where we put the <style> element inside the <head> section, which was demonstrated in the HTML tutorial. (Review the section on 'id' 'class' and <div>). Professional programmers usually use the external method where they use a separate 'style' sheet. The external method is written very similar to the internal method but instead of putting a <style> element in the 'head' section, it is written on a separate file with the extension .css. We then link to that file from the 'head' section. Example:
<link rel="stylesheet" type="text/css" href="theme.css">
The stylesheet is written with a simple text editor like notepad and the structure is the same as if it were written with the 'style' element in the 'head' section, but do not include the <style> tag. The 'href' part points to the name of your style sheet. Name it what you want but use the .css extension. Here we will continue to use the inline method for now to understand what CSS does.
As mentioned before, CSS code manipulates text size, color, fonts and more. You can change the background color of your web page by using the style attribute in your <body> tag. Example
<body style="background-color:rgb(255,255,255);">
<h1 style="color:blue;">This is a blue heading</h1>
<p style="color:red;">This is a red paragraph.</p>Will produce:
This is a red paragraph.
Headings (ex. <h1>) are important because search engines use them to structure your page
Headings have a default size. But, you can specify the size for any heading with the style attribute 'font-size'...
<h1 style="font-size:60px;">Big Font</h1>
Will produce:
For different font styles, use style="font-family:your font;" Example:
<h1 style="font-family:Times New Roman;">This is a Times New Roman heading</h1>
<p style="font-family:courier;">This is a courier paragraph.</p>
Produces:
This is a courier paragraph.
Some other common fonts include:,
1. Arial
2. Helvetica
3. Times New Roman
4. Times
5. Courier New
6. Courier
7. Verdana
8. Georgia
9. Palatino
10. Garamond
11. Bookman
12. Comic Sans MS
13. Trebuchet MS
14. Ariel Black
15. Impact
Again, for text size, use:
<h1 style="font-size:300%;">This is a heading at 300%</h1>
<p style="font-size:160%;">This is a paragraph at 160%.</p>
This is a paragraph at 160%.
For text alignment, use:
<h1 style="text-align:center;">Heading Centered</h1>
<p style="text-align:center;">Paragraph Centered .</p>
Produces:
Paragraph Centered.
You can put a border box around your text or images. For example I used the following code to put a border around the paragraph you're reading:
<p> style="border 1px solid blue;">You can put a border box around your text or images. For example I used the following code to put a border around the paragraph you're reading:</p>
The 1px is how thick the border line is. Solid just means a solid line as opposed to dotted or double. The last attribute is the color of the border line.
style="background-color:powderblue;"
style="color:blue;" (for text color)
style="font-family:verdana;"
style="font-size:300%;"
style="text-align:center;"
style="border:2px solid Tomato;"
HTML displays colors with the 'style' element using CSS attributes and properties. There are 6 different ways to display colors: RGB, HEX, HSL, RGBA, HSLA and the last one is to use one of the 140 standard color names. The RGB method (red, green, blue) is supported by all browsers as is the hexadecimal method (rr,gg,bb). HSL stands for hue, saturation and lightness and is supported by most modern browsers. Here are six different methods that represent the color 'tomato'. The last two add a transparency value:
<h2 style="background-color:tomato;">color name</h2>
<h2 style="background-color:rgb(255, 99, 71);">rgb</h2>
<h2 style="background-color:#ff6347;">hex</h2>
<h2 style="background-color:hsl(9, 100%, 64%);">hsl</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.5);">rgba</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla</h2>
tomato
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
Shades of gray can be represented in rgb and hex by keeping each of the color values the same, with black being 'rgb(0,0,0)' or hex '#000000', and white being 'rgb(255,255,255) or hex '#ffffff'. Gray being values between 0 and 255 in rgb. Hex is a little more complicated because it using hexadecimal numbers to represent the values, for example 255 = ff in hex. Here is a gray example in rgb:
All these colors can be used to change text color, background color, color of borders and more. You can check out how to make color gradients like the one used for the heading of this webpage from sites like:
w3schools link
MDN web docs