Coding

CSS Tutorial for Beginners – Getting Started

  • 00:13:51 that we're including a stylesheet here
  • 00:13:53 and then the hyper-reference added with
  • 00:13:55 the href attribute
  • 00:13:57 should point to that file if that file
  • 00:14:00 would live in a subfolder
  • 00:14:02 then you would add subfolder slash file
  • 00:14:05 name
  • 00:14:05 but since it's in the same folder here
  • 00:14:07 we just put the file name so main.css
  • 00:14:11 if we now save that index.html file and
  • 00:14:13 we reload
  • 00:14:14 the styles are back because now we're
  • 00:14:16 including the styles
  • 00:14:18 through our file here and with that you
  • 00:14:22 learned the third way of including
  • 00:14:23 css this actually is the recommended way
  • 00:14:27 because by using an external style sheet
  • 00:14:29 you can have a clear separation of your
  • 00:14:31 html and your css code which is
  • 00:14:33 especially useful as your css code grows
  • 00:14:36 and would bloat your head section at
  • 00:14:38 some point and additionally
  • 00:14:40 if you use the same style sheet in
  • 00:14:42 multiple pages let's say
  • 00:14:44 then your browser can cache the style
  • 00:14:46 sheet and doesn't need to redownload it
  • 00:14:48 for every new page
  • 00:14:50 whereas if you include your styles in
  • 00:14:52 the head section you increase the file
  • 00:14:54 size of your html file
  • 00:14:56 and the browser needs to redownload it
  • 00:14:58 since it's part of the html page
  • 00:14:59 for every new page which can be slower
  • 00:15:02 that is why in this course
  • 00:15:04 we will use an external stylesheet even
  • 00:15:06 if we only have one rule as in this case
  • 00:15:16 we added the first styles to our website
  • 00:15:18 and
  • 00:15:19 this already improved the look a little
  • 00:15:21 bit at least it did something on the
  • 00:15:23 screen
  • 00:15:24 but beautiful still is different i'd say
  • 00:15:28 so for one we should style different
  • 00:15:30 things
  • 00:15:31 like our font we use i don't think this
  • 00:15:34 font is very beautiful
  • 00:15:35 and maybe the color of the text as well
  • 00:15:38 and the positioning of the text in this
  • 00:15:42 surrounding area maybe is also something
  • 00:15:44 we can change
  • 00:15:46 so these are the next things we want to
  • 00:15:48 do additionally
  • 00:15:50 i also don't want to use the same styles
  • 00:15:52 on both sections
  • 00:15:53 because both sections will actually have
  • 00:15:55 very different purposes
  • 00:15:57 and styles in our web page so these are
  • 00:16:00 the two things i want to focus on next
  • 00:16:02 how we can change different things than
  • 00:16:05 just the background
  • 00:16:06 so how we can for example change that
  • 00:16:07 text inside of that background or in
  • 00:16:09 that element having that background
  • 00:16:11 and how we can apply different styles to
  • 00:16:13 different sections
  • 00:16:15 so let's start with the different
  • 00:16:19 styles thing because that instantly
  • 00:16:21 yields a nice effect
  • 00:16:23 let's say we want to change the font
  • 00:16:26 family so the way the font looks like as
  • 00:16:28 well as the color of this h1
  • 00:16:30 tag now for this what we can do is we
  • 00:16:33 can add a new
  • 00:16:34 selector to our css file and in this
  • 00:16:37 case it would be the h1 selector
  • 00:16:39 because we want to change the text in
  • 00:16:41 this h1 element so i guess it makes
  • 00:16:43 sense to use that h1 selector
  • 00:16:45 now we again add the curly braces
  • 00:16:49 and now we did change the background in
  • 00:16:51 the past of the entire section actually
  • 00:16:53 now i want to change things about that
  • 00:16:56 h1 tag about the text itself and the two
  • 00:17:00 things i mentioned were the color
  • 00:17:01 and the font family now let's start with
  • 00:17:04 the color
  • 00:17:05 you change the color of the text with
  • 00:17:07 the color property
  • 00:17:09 and again if you're wondering how i know
  • 00:17:11 that by experience because
  • 00:17:13 as i mentioned you work with the same
  • 00:17:15 set of properties a lot
  • 00:17:16 and it will also show you that reference
  • 00:17:18 i was talking about but for now
  • 00:17:20 let's just use color here and let's set
  • 00:17:22 a color of
  • 00:17:23 white for now if we save that and we
  • 00:17:26 reload the page
  • 00:17:28 we see all so both h1 tags turned white
  • 00:17:32 which again makes a lot of sense because