33 lines
1.3 KiB
HTML
33 lines
1.3 KiB
HTML
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
|
|
<h2>CSS</h2>
|
|
<p>
|
|
Cascading Stylesheets (CSS) are used to style websites - i.e. to make them look pretty.
|
|
Whereas a page without CSS is just displayed as plain content:
|
|
<br>
|
|
<img class="presentation-image" src="images/without_css.jpg">
|
|
<br>
|
|
One with CSS looks a lot more presentable:
|
|
<br>
|
|
<img class="presentation-image" src="images/with_css.jpg">
|
|
<br>
|
|
CSS declarations use the <i>tag names</i> (e.g. <code>p</code>), <i>classes</i> and IDs of
|
|
the elements on the page in order to style them. IDs are written with a preceding hashtag,
|
|
classes are written with a preceding full stop and tag names are written without any preceding characters.
|
|
The styles themselves (like <code>height</code>) should all end in semicolons.
|
|
Here are some example declarations:
|
|
<br>
|
|
<code>
|
|
p {<br>
|
|
font-size: 3rem;<br>
|
|
}<br>
|
|
.class_name {<br>
|
|
height: 200px;<br>
|
|
}<br>
|
|
#id_name {<br>
|
|
font-family: 'Roboto'<br>
|
|
}<br>
|
|
</code>
|
|
<br>
|
|
A comment in CSS is started with <code>/*</code> and ended with <code>*/</code>.
|
|
</p>
|